mirror of
https://github.com/google/blockly.git
synced 2026-01-04 15:40:08 +01:00
6a1f30bd12
* Move the finished version of the codelab This moves the finished version of the codelab to app-completed so it's at the same level as the starting app code. * Fix paths to be relative The paths for blockly files and media were absolute, which would break if you ran it from any directory that wasn't identical.
76 lines
1.0 KiB
CSS
76 lines
1.0 KiB
CSS
main {
|
|
width: 400px;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
overflow:hidden;
|
|
height: 600px;
|
|
}
|
|
|
|
header {
|
|
background-color: green;
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
width: 400px;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
font-size: 1.8em;
|
|
line-height: 2.4em;
|
|
}
|
|
|
|
.mode-edit,
|
|
.mode-maker,
|
|
.mode-blockly {
|
|
display: none;
|
|
}
|
|
|
|
[mode="maker"] .mode-maker,
|
|
[mode="edit"] .mode-edit,
|
|
[mode="blockly"] .mode-blockly {
|
|
display: block;
|
|
}
|
|
|
|
.blockly-editor {
|
|
position: absolute;
|
|
top: 64px;
|
|
left: -400px;
|
|
transition: left .4s;
|
|
height: 460px;
|
|
width: 400px;
|
|
background-color: #eee;
|
|
}
|
|
|
|
[mode="blockly"] .blockly-editor {
|
|
left: 0;
|
|
}
|
|
|
|
.maker {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
height: 460px;
|
|
width: 400px;
|
|
}
|
|
|
|
.maker > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.button {
|
|
width: 120px;
|
|
height: 140px;
|
|
color: #fff;
|
|
font-size: 3em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 140px;
|
|
}
|
|
|
|
.mdl-button {
|
|
margin: 1em 0;
|
|
float: right;
|
|
}
|