Sha256: 2cf836fe1597a9cbfd0bbf20743f059f3a3114fe813f85aecbd66bbc9c504f08
Contents?: true
Size: 1.93 KB
Versions: 6
Compression:
Stored size: 1.93 KB
Contents
@use "sass:math";
@import "../tokens/colors";
$color_checkbox_success: $data_1;
$color_checkbox_default: $border_light;
$color_disabled: darken($border_light, 20%);
$transition: .2s ease-in-out;
[class^=pb_toggle_kit] {
position: relative;
$width: 44px;
$height: math.div($width, 2);
$border_success: 3px solid $color_checkbox_success;
$border_default: 3px solid $color_checkbox_default;
.pb_toggle_wrapper {
.pb_toggle_control {
cursor: pointer;
transition: $transition;
width: $width;
height: $height;
display: block;
border-radius: $height;
border: $border_default;
position: relative;
box-sizing: content-box;
&:after {
transition: $transition;
content: "";
width: math.div($width, 2) - 4px;
height: $height - 4px;
background-color: $color_checkbox_default;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
}
&:hover {
border: $border_success;
&:after {
background-color: $color_checkbox_success;
}
}
}
input {
display: none;
&:disabled + .pb_toggle_control {
cursor: not-allowed;
opacity: 0.5;
border: 3px solid $border_light;
background-color: $border_light;
&:after {
background-color: darken($neutral, 15%);
}
}
}
input:checked {
display: none;
&:checked + .pb_toggle_control {
border: $border_success;
background-color: $color_checkbox_success;
&:after {
left: math.div($width, 2) + 2px;
background-color: $white;
}
}
&:disabled + .pb_toggle_control {
cursor: not-allowed;
opacity: 0.5;
border: 3px solid $text_lt_light;
background-color: $text_lt_light;
&:after {
background-color: $neutral;
}
}
}
}
}
Version data entries
6 entries across 6 versions & 1 rubygems