scinote-web/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss

88 lines
1.8 KiB
SCSS
Raw Normal View History

2019-12-04 22:17:59 +08:00
// scss-lint:disable SelectorDepth QualifyingElement
2019-12-01 04:24:50 +08:00
:root {
--sci-radio-size: 16px;
}
2020-01-29 18:00:48 +08:00
.sci-radio-container {
display: inline-block;
height: var(--sci-radio-size);
position: relative;
width: var(--sci-radio-size);
}
2019-12-01 04:24:50 +08:00
input[type="radio"].sci-radio {
cursor: pointer;
flex-shrink: 0;
height: var(--sci-radio-size);
margin: 0;
opacity: 0;
position: relative;
width: var(--sci-radio-size);
z-index: 2;
+ .sci-radio-label {
display: inline-block;
flex-shrink: 0;
height: var(--sci-radio-size);
2020-01-29 18:00:48 +08:00
left: 0;
position: absolute;
2019-12-01 04:24:50 +08:00
width: var(--sci-radio-size);
&::before {
animation-timing-function: $timing-function-sharp;
border: $border-default;
border-radius: 50%;
color: $color-white;
content: "";
2019-12-04 22:17:59 +08:00
font-size: calc(var(--sci-radio-size) - var(--sci-radio-size) * .375);
2019-12-01 04:24:50 +08:00
height: var(--sci-radio-size);
left: 0;
line-height: calc(var(--sci-radio-size) - 2px);
position: absolute;
text-align: center;
transition: .2s;
width: var(--sci-radio-size);
}
&::after {
animation-timing-function: $timing-function-sharp;
background: $color-white;
border-radius: 50%;
content: "";
display: inline-block;
height: calc(var(--sci-radio-size) - 6px);
left: 3px;
position: absolute;
2020-01-29 18:00:48 +08:00
top: 3px;
2019-12-01 04:24:50 +08:00
transition: .2s;
width: calc(var(--sci-radio-size) - 6px);
}
}
&.hidden + .sci-radio-label {
display: none;
}
&:checked + .sci-radio-label {
&::before {
border: 1px solid $brand-primary;
}
2019-12-04 22:17:59 +08:00
2019-12-01 04:24:50 +08:00
&::after {
background: $brand-primary;
}
}
&:disabled + .sci-radio-label {
&::before {
background: $color-alto;
border: $border-tertiary;
}
&::after {
display: none;
}
}
2019-12-04 22:17:59 +08:00
}