mdb-ui-kit/scss/_radios.scss
2015-12-15 18:18:32 -06:00

101 lines
2.0 KiB
SCSS

.radio label,
label.radio-inline {
position: relative;
padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size
span {
position: absolute;
top: calc-top($line-height, $font-size-base, $mdb-radio-size); // vertical center of line-height
left: 0;
display: inline-block;
width: $mdb-radio-size;
height: $mdb-radio-size;
transition-duration: 0.2s;
&.mdb-radio-outer-circle {
border: $mdb-radio-border solid $mdb-radio-color-off;
border-radius: 50%;
transition: border-color ease .28s;
}
&.mdb-radio-inner-circle {
display: inline-block;
background-color: $mdb-radio-color-on;
border-radius: 50%;
transition: transform ease .28s;
transform: scale3d(0, 0, 0);
// focus/press ripple
&::after {
position: absolute;
top: -#{$mdb-radio-size};
left: -#{$mdb-radio-size};
z-index: 1;
display: block;
width: 50px;
height: 50px;
margin: 0;
content: "";
background-color: $gray-dark;
border-radius: 100%;
opacity: 0;
transform: scale3d(1.5, 1.5, 1);
}
}
}
input[type=radio] {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
&:checked {
@include mdb-radio-color($mdb-radio-color-on);
~ .mdb-radio-inner-circle {
transform: scale3d(0.55, 0.55, 1);
&::after {
animation: rippleOn 500ms;
}
}
}
&:not(:checked) ~ .mdb-radio-inner-circle::after {
animation: rippleOff 500ms;
}
&[disabled],
fieldset[disabled] & {
@include mdb-radio-color($mdb-radio-color-disabled);
.theme-dark & {
@include mdb-radio-color($mdb-radio-color-disabled-dark);
}
}
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}