42 lines
986 B
SCSS
42 lines
986 B
SCSS
|
$tabs: five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen, eighteen, nineteen, twenty;
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
&.one {
|
||
|
|
> .row {
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> input:nth-of-type(1):checked ~ .row {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> label img {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// This is probably really stupid, but whatever. I need more than the 4 built-in tabs that Picnic provides
|
||
|
|
@for $tab-index from 1 through length($tabs) {
|
||
|
|
$number: $tab-index + 4;
|
||
|
|
$tab: nth($tabs, $tab-index);
|
||
|
|
|
||
|
|
&.#{$tab} {
|
||
|
|
> .row {
|
||
|
|
width: 100% * $number;
|
||
|
|
left: -100% * ($number - 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@for $item from 1 through ($number - 1) {
|
||
|
|
> input:nth-of-type(#{$item}):checked ~ .row {
|
||
|
|
margin-left: (100% * ($number - 1)) - (100% * ($item - 1));// 400%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> label img {
|
||
|
|
width: floor(100% / $number) - 2%;
|
||
|
|
margin: 4% 0 4% 4%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|