2015-12-06 06:24:05 +03:00
|
|
|
.radio label,
|
2015-12-15 01:42:22 +03:00
|
|
|
label.radio-inline {
|
2015-12-06 06:24:05 +03:00
|
|
|
position: relative;
|
2015-12-15 20:21:16 +03:00
|
|
|
padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size
|
2014-10-03 15:58:24 +04:00
|
|
|
|
2015-12-06 06:24:05 +03:00
|
|
|
span {
|
|
|
|
position: absolute;
|
2015-12-16 03:18:32 +03:00
|
|
|
top: calc-top($line-height, $font-size-base, $mdb-radio-size); // vertical center of line-height
|
2015-12-14 23:19:17 +03:00
|
|
|
left: 0;
|
2015-12-15 20:21:16 +03:00
|
|
|
display: inline-block;
|
2015-12-15 01:42:22 +03:00
|
|
|
width: $mdb-radio-size;
|
|
|
|
height: $mdb-radio-size;
|
2015-12-06 06:24:05 +03:00
|
|
|
transition-duration: 0.2s;
|
2015-12-14 23:19:17 +03:00
|
|
|
|
|
|
|
&.mdb-radio-outer-circle {
|
|
|
|
border: $mdb-radio-border solid $mdb-radio-color-off;
|
2015-12-15 20:21:16 +03:00
|
|
|
border-radius: 50%;
|
|
|
|
transition: border-color ease .28s;
|
2015-12-14 23:19:17 +03:00
|
|
|
}
|
|
|
|
&.mdb-radio-inner-circle {
|
|
|
|
display: inline-block;
|
|
|
|
background-color: $mdb-radio-color-on;
|
2015-12-15 01:42:22 +03:00
|
|
|
border-radius: 50%;
|
2015-12-15 20:21:16 +03:00
|
|
|
transition: transform ease .28s;
|
2015-12-14 23:19:17 +03:00
|
|
|
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: "";
|
2015-12-15 01:42:22 +03:00
|
|
|
background-color: $gray-dark;
|
2015-12-14 23:19:17 +03:00
|
|
|
border-radius: 100%;
|
|
|
|
opacity: 0;
|
|
|
|
transform: scale3d(1.5, 1.5, 1);
|
|
|
|
}
|
|
|
|
}
|
2015-11-02 23:39:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
input[type=radio] {
|
|
|
|
width: 0;
|
2015-12-07 22:34:46 +03:00
|
|
|
height: 0;
|
2015-11-02 23:39:13 +03:00
|
|
|
overflow: hidden;
|
2015-12-07 22:34:46 +03:00
|
|
|
opacity: 0;
|
2015-11-25 02:40:52 +03:00
|
|
|
|
|
|
|
&:checked {
|
2015-12-14 23:19:17 +03:00
|
|
|
@include mdb-radio-color($mdb-radio-color-on);
|
|
|
|
|
|
|
|
~ .mdb-radio-inner-circle {
|
|
|
|
transform: scale3d(0.55, 0.55, 1);
|
|
|
|
&::after {
|
|
|
|
animation: rippleOn 500ms;
|
|
|
|
}
|
|
|
|
}
|
2015-11-25 02:40:52 +03:00
|
|
|
}
|
|
|
|
|
2015-12-14 23:19:17 +03:00
|
|
|
&:not(:checked) ~ .mdb-radio-inner-circle::after {
|
|
|
|
animation: rippleOff 500ms;
|
|
|
|
}
|
2015-11-25 02:40:52 +03:00
|
|
|
|
2015-12-15 01:42:22 +03:00
|
|
|
&[disabled],
|
|
|
|
fieldset[disabled] & {
|
2015-12-14 23:19:17 +03:00
|
|
|
@include mdb-radio-color($mdb-radio-color-disabled);
|
2015-11-25 02:40:52 +03:00
|
|
|
|
2015-12-14 23:19:17 +03:00
|
|
|
.theme-dark & {
|
|
|
|
@include mdb-radio-color($mdb-radio-color-disabled-dark);
|
|
|
|
}
|
2015-11-25 02:40:52 +03:00
|
|
|
}
|
2015-11-02 23:39:13 +03:00
|
|
|
}
|
2014-10-03 15:58:24 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rippleOn {
|
2015-11-02 23:39:13 +03:00
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity: 0.2;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2014-10-03 15:58:24 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rippleOff {
|
2015-11-02 23:39:13 +03:00
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity: 0.2;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2014-10-03 15:58:24 +04:00
|
|
|
}
|