176 lines
2.5 KiB
SCSS
176 lines
2.5 KiB
SCSS
// Tab definition
|
|
%tabs {
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
> label img {
|
|
float: left;
|
|
margin-left: $picnic-separation;
|
|
}
|
|
|
|
> .row {
|
|
width: calc(100% + 2 * .6em);
|
|
display: table;
|
|
table-layout: fixed;
|
|
|
|
position: relative;
|
|
padding-left: 0;
|
|
transition: all .3s;
|
|
border-spacing: 0;
|
|
margin: 0;
|
|
|
|
&:before,
|
|
&:after {
|
|
display: none;
|
|
}
|
|
|
|
> *,
|
|
img {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
> input {
|
|
display: none;
|
|
|
|
+ * {
|
|
width: 100%;
|
|
}
|
|
|
|
+ label {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.two {
|
|
> .row {
|
|
width: 200%;
|
|
left: -100%;
|
|
}
|
|
|
|
> input:nth-of-type(1):checked ~ .row {
|
|
margin-left: 100%;
|
|
}
|
|
|
|
> label img {
|
|
width: 48%;
|
|
margin: 4% 0 4% 4%;
|
|
}
|
|
}
|
|
|
|
&.three {
|
|
> .row {
|
|
width: 300%;
|
|
left: -200%;
|
|
}
|
|
|
|
> input:nth-of-type(1):checked ~ .row {
|
|
margin-left: 200%;
|
|
}
|
|
|
|
> input:nth-of-type(2):checked ~ .row {
|
|
margin-left: 100%;
|
|
}
|
|
|
|
> label img {
|
|
width: 30%;
|
|
margin: 5% 0 5% 5%;
|
|
}
|
|
}
|
|
|
|
&.four {
|
|
> .row {
|
|
width: 400%;
|
|
left: -300%;
|
|
}
|
|
|
|
> input:nth-of-type(1):checked ~ .row {
|
|
margin-left: 300%;
|
|
}
|
|
|
|
> input:nth-of-type(2):checked ~ .row {
|
|
margin-left: 200%;
|
|
}
|
|
|
|
> input:nth-of-type(3):checked ~ .row {
|
|
margin-left: 100%;
|
|
}
|
|
|
|
> label img {
|
|
width: 22%;
|
|
margin: 4% 0 4% 4%;
|
|
}
|
|
}
|
|
|
|
&.five {
|
|
> .row {
|
|
width: 500%;
|
|
left: -400%;
|
|
}
|
|
|
|
> input:nth-of-type(1):checked ~ .row {
|
|
margin-left: 400%;
|
|
}
|
|
|
|
> input:nth-of-type(2):checked ~ .row {
|
|
margin-left: 300%;
|
|
}
|
|
|
|
> input:nth-of-type(3):checked ~ .row {
|
|
margin-left: 200%;
|
|
}
|
|
|
|
> input:nth-of-type(4):checked ~ .row {
|
|
margin-left: 100%;
|
|
}
|
|
|
|
> label img {
|
|
width: 18%;
|
|
margin: 2% 0 2% 2%;
|
|
}
|
|
}
|
|
|
|
&.six {
|
|
> .row {
|
|
width: 600%;
|
|
left: -500%;
|
|
}
|
|
|
|
> input:nth-of-type(1):checked ~ .row {
|
|
margin-left: 500%;
|
|
}
|
|
|
|
> input:nth-of-type(2):checked ~ .row {
|
|
margin-left: 400%;
|
|
}
|
|
|
|
> input:nth-of-type(3):checked ~ .row {
|
|
margin-left: 300%;
|
|
}
|
|
|
|
> input:nth-of-type(4):checked ~ .row {
|
|
margin-left: 200%;
|
|
}
|
|
|
|
> input:nth-of-type(5):checked ~ .row {
|
|
margin-left: 100%;
|
|
}
|
|
|
|
> label img {
|
|
width: 12%;
|
|
margin: 1% 0 1% 1%;
|
|
}
|
|
}
|
|
|
|
|
|
>label:first-of-type img {
|
|
margin-left: 0;
|
|
}
|
|
}
|