153 lines
3.9 KiB
SCSS
153 lines
3.9 KiB
SCSS
@mixin slide-toggle($name, $width, $height, $left-color, $right-color, $small-sides, $vertical) {
|
|
$multiplier: 2;
|
|
@if $small-sides {
|
|
$multiplier: 4;
|
|
}
|
|
input.sheet-slide-input-#{$name},
|
|
label.sheet-slide-toggle-#{$name} {
|
|
height: $height;
|
|
width: $width * $multiplier;
|
|
}
|
|
label.sheet-slide-toggle-#{$name} {
|
|
@if $vertical {
|
|
margin-top: -$height;
|
|
} @else {
|
|
margin-left: -$width * $multiplier;
|
|
}
|
|
line-height: $height;
|
|
.sheet-slide-cover {
|
|
@if $small-sides {
|
|
width: $width * 3;
|
|
} @else {
|
|
width: $width;
|
|
}
|
|
$volume-color: darken($left-color, 10);
|
|
box-shadow: 0 .12em .01em rgba($volume-color, 1),
|
|
0 .12em .3em rgba($volume-color, .6),
|
|
0 .12em 2em $mostly-transparent-black,
|
|
-.12em .15em .2em $mostly-transparent-black;
|
|
height: $height;
|
|
}
|
|
}
|
|
input[type='checkbox'].sheet-slide-input-#{$name} + label.sheet-slide-toggle-#{$name} {
|
|
.sheet-slide-cover {
|
|
background-color: $left-color;
|
|
text-shadow: 0 .05em 0 darken($left-color, 05);
|
|
@if $small-sides {
|
|
margin-right: $width;
|
|
}
|
|
}
|
|
span[class^='sheet-slide-toggle-'] {
|
|
@if $small-sides {
|
|
width: 25%;
|
|
} @else {
|
|
width: 50%;
|
|
}
|
|
color: $left-color;
|
|
}
|
|
}
|
|
span.sheet-slide-toggle-#{$name}-left {
|
|
@if $small-sides {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
span.sheet-slide-toggle-#{$name}-right {
|
|
@if $small-sides {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
margin-left: 50%;
|
|
}
|
|
}
|
|
input[type='checkbox'].sheet-slide-input-#{$name}:checked + label.sheet-slide-toggle-#{$name} {
|
|
.sheet-slide-cover {
|
|
background-color: $right-color;
|
|
@if $small-sides {
|
|
margin-right: 0;
|
|
} @else {
|
|
margin-right: $width;
|
|
}
|
|
border-bottom: .03em solid lighten($right-color, 10);
|
|
$volume-color: darken($right-color, 10);
|
|
box-shadow: 0 .12em .01em rgba($volume-color, 1),
|
|
0 .12em .3em rgba($volume-color, .6),
|
|
0 .12em 2em $mostly-transparent-black,
|
|
.12em .15em .2em $mostly-transparent-black;
|
|
text-shadow: 0 .05em 0 darken($right-color, 10);
|
|
}
|
|
span[class^='sheet-slide-toggle-'] {
|
|
color: $right-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
label[class^='sheet-slide-toggle-'] {
|
|
$brick-color: $white;
|
|
background-color: $brick-color;
|
|
border: 1px solid darken($brick-color, 15);
|
|
border-bottom-color: darken($brick-color, 10);
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 .1em .03em $mostly-transparent-black,
|
|
inset 0 .1em .3em $mostly-transparent-black,
|
|
0 0 2em rgba($brick-color, .6);
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
perspective: 300px;
|
|
position: relative;
|
|
text-align: left;
|
|
user-select: none;
|
|
vertical-align: top;
|
|
|
|
.sheet-slide-cover {
|
|
background-color: $off-white;
|
|
box-shadow: .1em 0 .2em $mostly-transparent-black;
|
|
color: $white;
|
|
display: inline-block;
|
|
margin-right: -1px;
|
|
margin-top: -1px;
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: center;
|
|
top: 0;
|
|
transition: all $duration ease-in-out;
|
|
transition-duration: $duration / 1.5;
|
|
transition-timing-function: cubic-bezier(.52, -.41, .55, 1.46);
|
|
}
|
|
span[class^='sheet-slide-toggle-'] {
|
|
display: inline-block;
|
|
text-align: center;
|
|
transition: all $duration ease-in-out;
|
|
}
|
|
}
|
|
|
|
@include slide-toggle('pc', 40px, 12px, $deep-green, $deep-red, false, false);
|
|
|
|
.sheet-slide-input-pc {
|
|
&:checked ~ div {
|
|
.sheet-trait {
|
|
span {
|
|
line-height: 1.18;
|
|
}
|
|
}
|
|
}
|
|
&:checked ~ div .sheet-pc,
|
|
&:checked ~ .sheet-pc,
|
|
&:not(:checked) ~ div .sheet-npc,
|
|
&:not(:checked) ~ .sheet-npc {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
input[class^='sheet-slide-input-'] {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin: 0;
|
|
opacity: 0;
|
|
position: relative;
|
|
vertical-align: top;
|
|
z-index: 5;
|
|
}
|