what2watch/scss/plugins/radio/_class.scss

55 lines
1.1 KiB
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
// Radio button
// Variables
$picnic-radio-size: 1em !default;
$picnic-radio-border: 1px solid $picnic-dull !default;
//
%radio {
opacity: 0;
width: 0;
position: absolute;
display: inline-block;
+ .checkable:hover:before,
&:focus + .checkable:before {
border: 1px solid $picnic-primary;
}
+ .checkable {
position: relative;
cursor: pointer;
padding-left: $picnic-radio-size * 1.5;
margin-right: .6em;
&:before,
&:after {
content: '';
position: absolute;
display: inline-block;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: $picnic-radio-size;
line-height: $picnic-radio-size;
color: transparent;
font-family: sans;
text-align: center;
box-sizing: border-box;
width: $picnic-radio-size;
height: $picnic-radio-size;
border-radius: 50%;
transition: $picnic-transition;
}
&:before {
border: $picnic-radio-border;
}
}
&:checked + .checkable:after {
background: $picnic-black;
transform: scale(.5) translateY(-100%);
}
}