mdb-ui-kit/scss/_radios.scss

78 lines
1.7 KiB
SCSS

.radio label,
label.radio-inline {
position: relative;
padding-left: $bmd-radio-size + $bmd-radio-label-padding; // absolutely positioned so add the radio size
.bmd-radio {
position: absolute;
left: 0;
display: inline-block;
padding: .7em;
margin: -.7em;
line-height: .7;
border-radius: 100%;
&::after {
display: inline-block;
width: $bmd-radio-size;
height: $bmd-radio-size;
cursor: pointer;
content: "";
border: $bmd-radio-border solid $bmd-radio-color-off;
border-radius: 50%;
transition: border-color ease .28s;
transition-duration: 0.2s;
}
&::before {
position: absolute;
display: inline-block;
width: $bmd-radio-size;
height: $bmd-radio-size;
content: "";
background-color: $bmd-radio-color-on;
border-radius: 50%;
transition: transform ease .28s;
transform: scale3d(0, 0, 0);
}
}
input[type=radio] {
// Hide native radio
position: absolute;
left: 0;
z-index: -1;
width: 0;
height: 0;
margin: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
&:checked ~ .bmd-radio {
@include bmd-radio-color($bmd-radio-color-on);
&::before {
transform: scale3d(0.55, 0.55, 1);
}
}
&[disabled],
&:disabled,
fieldset[disabled] & {
+ .bmd-radio {
cursor: default;
@include bmd-radio-color($bmd-radio-color-disabled);
}
// No ripple on disabled radios
+ .bmd-radio .ripple-container {
display: none;
}
.bg-inverse & + .bmd-radio {
@include bmd-radio-color($bmd-radio-color-disabled-inverse);
}
}
}
}