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