improve Tab styling

This commit is contained in:
Sérgio Ramos 2016-10-27 10:37:49 +01:00
parent 591d1ac1fa
commit 114d6a04f4
2 changed files with 18 additions and 14 deletions

View File

@ -2,12 +2,15 @@
float: left;
& .label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
cursor: pointer;
background: #F2F2F2;
border: 1px solid #D8D8D8;
color: #646464;
position: relative;
left: 1px;
height: 55px;
padding: 14px 25px;
margin-right: 5px;
z-index: 0;
}
& .input[type=radio] {
@ -16,23 +19,25 @@
}
& .content {
border-color: #D8D8D8;
border-style: solid;
border-width: 1px 0 0 0;
background: #FAFAFA;
position: absolute;
top: 28px;
display: none;
top: 54px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
& .input[type=radio]:checked ~ .label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
background: #FAFAFA;
border-bottom: 1px solid #FAFAFA;
z-index: 1;
}
& .input[type=radio]:checked ~ .label ~ .content {
z-index: 1;
display: block;
}
}

View File

@ -2,5 +2,4 @@
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}