Readlebee/app/styles/picnic-customizations/_tabs.scss

42 lines
986 B
SCSS
Raw Normal View History

$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%;
}
}
}
}