Layout test MapX

by fxi

HTML

<section id=header>
<span>Project:<span>Afghanistan</span></span>
<span style="">[email protected], admin</span>
</section>


<section>
<input id="tab-one" type="radio" name="grp" checked="checked"/>
<label for="tab-one">Views</label>
<div>
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>

<input id="tab-two" type="radio" name="grp" />
<label for="tab-two">Settings</label>
<div>
  <h3>language</h3>
  Language
   <h3>Project</h3>
  Language
</div>

<input id="tab-three" type="radio" name="grp" />
<label for="tab-three">Widgets</label>
<div>
 Widget
</div>


</section>

CSS

body {
  font-family: Arial;
   color: #333;
}

#header {
  width:100%;
  background:#333;
  color:#ccc;
  padding:10px;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
#header span{
  width:50%;
}

section {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

label {
  background: 
  border: 1px solid #ddd; 
  padding: .7em 1em;
  cursor: pointer;
  z-index: 1;
  margin-left: -1px;
}
label:first-of-type {
  margin-left: 0;
}
div {
  width: 100%;
  margin-top: -1px;
  padding: 1em;
  border: 1px solid #ddd;
  -webkit-order: 1;
  order: 1;
}
input[type=radio], div {
  display: none;
}
input[type=radio]:checked + label {
  background: #fff;
  border-bottom: 1px solid #fff;
}
input[type=radio]:checked + label + div {
  display: block;
}