Sha256: 96ce8f2aabfd8df16bbc61b0efced4959ae1fdb4c791016c38b2181c35470c57
Contents?: true
Size: 1.9 KB
Versions: 91
Compression:
Stored size: 1.9 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: calc($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: calc($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: calc($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
91 entries across 91 versions & 1 rubygems