Sha256: d84ccc7d35af137a694edeec134e82ef136dc76da2c61d2f5c05307fa1a441d3
Contents?: true
Size: 1.99 KB
Versions: 32
Compression:
Stored size: 1.99 KB
Contents
@import "../tokens/colors";
@import "../tokens/transition";
@import "../tokens/positioning";
$transition: $transition_cubic;
[class^=pb_checkbox_kit] {
display: inline-flex;
cursor: pointer;
.pb_checkbox_label {
padding-left: $space_xs;
cursor: pointer;
font-size: $text_lt_default;
user-select: none;
}
.pb_checkbox_checkmark,
.pb_checkbox_indeterminate {
align-items: center;
border: solid $border_light 2px;
border-radius: $border_rad_light;
height: 22px;
position: relative;
transition: background $transition_default ease, border-color $transition_default ease;
width: 22px;
.check_icon,
.indeterminate_icon {
color: $white;
height: 16px;
left: 1px;
position: relative;
display: flex;
opacity: 0;
width: 16px;
&.hidden {
display: none;
}
}
}
@media (hover:hover) {
&:hover input ~ .pb_checkbox_checkmark {
border-color: $primary_action;
}
}
input {
cursor: pointer;
display: flex;
height: 0;
opacity: 0;
position: relative;
width: 0;
left: $offscreen;
&:focus ~ .pb_checkbox_checkmark {
border-color: $primary_action;
}
&:checked ~ .pb_checkbox_checkmark,
& ~ .pb_checkbox_indeterminate {
background-color: $primary_action;
border-color: $primary_action;
}
&:checked ~ .pb_checkbox_checkmark,
& ~ .pb_checkbox_indeterminate {
display: inline-block;
.check_icon,
.indeterminate_icon {
opacity: $opacity_10;
}
}
}
&[class*=_dark] {
input:checked ~ .pb_checkbox_checkmark {
background-color: $primary_action;
border-color: $primary_action;
}
@media (hover:hover) {
&:hover .pb_checkbox_checkmark {
border-color: $primary_action;
}
}
&.error {
> .pb_checkbox_checkmark {
border-color: $error_dark;
}
}
}
&.error {
> .pb_checkbox_checkmark {
border-color: $error;
}
}
}
Version data entries
32 entries across 32 versions & 1 rubygems