mdb-ui-kit/radios.less
2014-08-18 16:25:33 +02:00

65 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;
}
.bubble {
background: @input-unchecked;
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;
&.animate {
transform: scale(1);
opacity: 0;
}
}
.circle {
border: 2px solid #5A5F5A;
height: 15px;
width: 15px;
border-radius: 100%;
}
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: @radio-default;
transform: scale(0);
}
}
&.radio {
&-default .check { background-color: @radio-default; }
&-primary .check { background-color: @radio-primary; }
&-success .check { background-color: @radio-success; }
&-info { background-color: @radio-info; }
&-warning .check { background-color: @radio-warning; }
&-danger .check { background-color: @radio-danger; }
}
input[type=radio] { display: none; }
input[type=radio]:checked ~ .check {
transform: scale(1);
}
input[type=radio]:checked ~ .circle {
transform: scale(1);
border: 1px;
}
}