what2watch/scss/plugins/tabs/_class.scss

176 lines
2.5 KiB
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
// 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;
}
}