mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-11 12:17:59 +03:00
98 lines
2.3 KiB
Plaintext
98 lines
2.3 KiB
Plaintext
// main: material.less
|
|
|
|
.form-horizontal .radio {
|
|
margin-bottom: 10px;
|
|
}
|
|
.radio {
|
|
label {
|
|
cursor: pointer;
|
|
padding-left: 45px;
|
|
position: relative;
|
|
span {
|
|
display: block;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 2px;
|
|
transition-duration: 0.2s;
|
|
}
|
|
.circle {
|
|
border: 2px solid @lightbg-text;
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 100%;
|
|
}
|
|
.check {
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 100%;
|
|
background-color: @radio-default;
|
|
transform: scale(0);
|
|
}
|
|
.check:after {
|
|
display: block;
|
|
position: absolute;
|
|
content: "";
|
|
background-color: @lightbg-text;
|
|
left: -18px;
|
|
top: -18px;
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 100%;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
margin: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
input[type=radio]:not(:checked) ~ .check:after {
|
|
.animation(rippleOff 500ms);
|
|
}
|
|
input[type=radio]:checked ~ .check:after {
|
|
.animation(rippleOn 500ms);
|
|
}
|
|
|
|
}
|
|
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
|
|
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
|
|
|
|
input[type=radio][disabled] ~ .check,
|
|
input[type=radio][disabled] ~ .circle {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
input[type=radio] { display: none; }
|
|
input[type=radio]:checked ~ .check {
|
|
transform: scale(0.55);
|
|
}
|
|
input[type=radio][disabled] ~ .circle {
|
|
border-color: @lightbg-text;
|
|
}
|
|
input[type=radio][disabled] ~ .check {
|
|
background-color: @lightbg-text;
|
|
}
|
|
|
|
}
|
|
|
|
.ripple() {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 0.2;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rippleOn {.ripple()}
|
|
@-moz-keyframes rippleOn {.ripple()}
|
|
@-ms-keyframes rippleOn {.ripple()}
|
|
@-o-keyframes rippleOn {.ripple()}
|
|
@keyframes rippleOn {.ripple()}
|
|
|
|
@-webkit-keyframes rippleOff {.ripple()}
|
|
@-moz-keyframes rippleOff {.ripple()}
|
|
@-ms-keyframes rippleOn {.ripple()}
|
|
@-o-keyframes rippleOff {.ripple()}
|
|
@keyframes rippleOff {.ripple()}
|