49 lines
1.1 KiB
SCSS
49 lines
1.1 KiB
SCSS
/* Check Boxes */
|
|
|
|
.check-box {
|
|
StBoxLayout { spacing: .8em; }
|
|
|
|
StBin {
|
|
border-radius: 7px;
|
|
padding: 2px;
|
|
}
|
|
|
|
&:focus StBin {
|
|
// Trick due to St limitations. It needs a background to draw a box-shadow
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
|
|
}
|
|
|
|
StIcon {
|
|
icon-size: 14px;
|
|
padding: 1px;
|
|
|
|
color: transparent;
|
|
border-radius: 6px;
|
|
border: 2px solid transparentize(if($variant == 'light', black, white), .85);
|
|
}
|
|
|
|
&:hover StIcon {
|
|
border-color: transparentize(if($variant == 'light', black, white), .8);
|
|
}
|
|
|
|
&:active StIcon {
|
|
border-color: transparentize(if($variant == 'light', black, white), .7);
|
|
}
|
|
|
|
&:checked StIcon {
|
|
background-color: -st-accent-color;
|
|
color: -st-accent-fg-color;
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:checked:hover StIcon {
|
|
background-color: st-lighten(-st-accent-color, 5%);
|
|
color: st-lighten(-st-accent-fg-color, 5%);
|
|
}
|
|
|
|
&:checked:active StIcon {
|
|
background-color: st-darken(-st-accent-color, 7%);
|
|
color: st-darken(-st-accent-fg-color, 7%);
|
|
}
|
|
}
|