Sha256: 32a69bd7583053dc0a74a74de582c71829a35cbfe164d7965cf3254f46d27f65
Contents?: true
Size: 1.89 KB
Versions: 71
Compression:
Stored size: 1.89 KB
Contents
@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: $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: $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: $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
71 entries across 71 versions & 1 rubygems