mdb-ui-kit/less/radios.less
2014-08-20 17:00:55 +02:00

69 lines
1.7 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;
}
.ripple {
background-color: @lightbg-text;
left: 0;
top: -8px;
height: 34px;
width: 34px;
border-radius: 100%;
transform: scale(0);
transition: transform .1s, opacity 0.2s 0.4s;
z-index: 1;
opacity: 0.2;
margin: 0;
&.animate {
transform: scale(1);
opacity: 0;
}
}
.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);
}
}
.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;
}
}