mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
78 lines
1.7 KiB
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.5, 0.5, 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);
|
|
}
|
|
}
|
|
}
|
|
}
|