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

View File

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