Forked from Hugo Giraudel's Pen Demo Flexbox 1.
A Pen by Michael Garten on CodePen.
Forked from Hugo Giraudel's Pen Demo Flexbox 1.
A Pen by Michael Garten on CodePen.
<ul class="navigation"> | |
<li><a :to="explore">Explore</a></li> | |
<li><a :to="editor">Editor</a></li> | |
<li><a :to="projects">Projects</a></li> | |
<li><a :to="profile">Profile</a></li> | |
</ul> | |
<editor-layout class="flex-container"> | |
<editor-layout-panel id="input-panel" class="flex-item"> | |
<header> | |
<h2>Input Panel</h2> | |
</header> | |
<div class="body"> | |
<pre> | |
<code> | |
{ | |
"object": { | |
"name": "myobject", | |
"type": "someObject" | |
} | |
} | |
</code> | |
</pre> | |
</div> | |
</editor-layout-panel> | |
<editor-layout-panel id="editor-panel" class="flex-item"> | |
<header> | |
<h2>Editor Panel</h2> | |
</header> | |
<div class="body"> | |
<pre> | |
<code> | |
{ | |
"object": { | |
"name": "myobject", | |
"type": "someObject" | |
} | |
} | |
</code> | |
</pre> | |
</div> | |
</editor-layout-panel> | |
<editor-layout-panel id="preview-panel" class="flex-item"> | |
<header> | |
<h2>Preview Panel</h2> | |
</header> | |
<div class="body"> | |
<pre> | |
<code> | |
{ | |
"object": { | |
"name": "myobject", | |
"type": "someObject" | |
} | |
} | |
</code> | |
</pre> | |
</div> | |
</editor-layout-panel> | |
<editor-layout-panel id="context-panel" class="flex-item"> | |
<header> | |
<h2>Context Panel</h2> | |
</header> | |
<div class="body"> | |
<pre> | |
<code> | |
{ | |
"object": { | |
"name": "myobject", | |
"type": "someObject" | |
} | |
} | |
</code> | |
</pre> | |
</div> | |
</editor-layout-panel> | |
</editor-layout> |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> |
@import "compass/css3"; | |
.flex-container { | |
display: flex; | |
background-color: #f1f1f1; | |
margin: 5px; | |
} | |
.flex-item { | |
background-color: #fff; | |
color: #717171; | |
padding: 1% 4%; | |
margin: 0; | |
height: 100%; | |
width: 100%; | |
border: 1px solid #ccc; | |
border-radius: 2%; | |
box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); | |
} | |
.flex-item header h2 { | |
font-size: 1.4rem; | |
font-weight: bold; | |
padding: 0 0 2% 0; | |
border-bottom: 1px solid #ccc; | |
} | |
.flex-item .body { | |
font-size: .9rem; | |
padding: 2%; | |
} | |
.navigation { | |
width: 100%; | |
list-style: none; | |
margin: 0; | |
background: teal; | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-flow: row wrap; | |
justify-content: flex-end; | |
} | |
.navigation a { | |
text-decoration: none; | |
display: block; | |
padding: 1em; | |
color: white; | |
font-weight: bold; | |
} | |
.navigation a:hover { | |
background: darken(teal, 2%); | |
} | |
@media all and (max-width: 800px) { | |
.navigation { | |
justify-content: space-around; | |
} | |
} | |
@media all and (max-width: 600px) { | |
.navigation, | |
.flex-container { | |
-webkit-flex-flow: column wrap; | |
flex-flow: column wrap; | |
padding: 0; | |
} | |
.navigation a { | |
text-align: center; | |
padding: 10px; | |
border-top: 1px solid rgba(255, 255, 255, 0.3); | |
border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
} | |
.navigation li:last-of-type a { | |
border-bottom: none; | |
} | |
} | |
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
body { | |
font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
background-color: #f1f1f1; | |
} |