what2watch/scss/plugins/checkbox/_class.scss
2023-09-21 17:43:18 -07:00

31 lines
608 B
SCSS

// 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;
}
}