what2watch/scss/plugins/checkbox/_class.scss

32 lines
608 B
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
// Checkbox
// Variables
$picnic-checkbox-character: '\2714' !default;
$picnic-checkbox-radius: $picnic-radius !default;
%checkbox {
@extend %radio;
+ .checkable:before {
border-radius: $picnic-checkbox-radius;
}
+ .checkable:after {
content: $picnic-checkbox-character;
background: none;
transform: scale(2) translateY(-25%);
visibility: hidden;
opacity: 0;
}
&:checked + .checkable:after {
color: $picnic-black;
background: none;
transform: translateY(-50%);
transition: $picnic-transition;
visibility: visible;
opacity: 1;
}
}