responsivewebframework
Version:
Jalasoft Foundation Front End Framework ========================================
54 lines (48 loc) • 1.52 kB
text/less
// Radio Button
input[type="radio"][class="radio"] {
display: none;
}
.click-area{
position: absolute;
left: (@base-size-radio-button - 48);
top: (@base-size-radio-button - 21);
cursor: pointer;
width: @area-selectable-radio-button;
height: @area-selectable-radio-button;
margin: (@base-size-radio-button - 5);
}
input[type="radio"][class="radio"]+label {
display: inline-block;
cursor: pointer;
position: relative;
left: (@base-size-radio-button + 4);
font-family: @font-family-base-component;
font-size: @font-size-base-component;
color: @body-color;
margin: (@base-size-radio-button - 0.5) (@base-size-radio-button - 10) (@base-size-radio-button - 0.7) (@base-size-radio-button + 5);
top: 1.5px;
}
input[type="radio"][class="radio"]+label:before {
position: absolute;
content: "";
width: @external-size-radio-button;
height: @external-size-radio-button;
border: @stroke-radio-button solid @secondary-color;
border-radius: @base-size-radio-button;
background-color: #fff;
left: (@base-size-radio-button - 36);
top: (@base-size-radio-button - 9);
}
input[type="radio"][class="radio"]+label:after {
background-color: transparent;
}
input[type="radio"][class="radio"]:checked+label:after {
position: absolute;
content: "";
width: @inner-size-radio-button;
height: @inner-size-radio-button;
top: (@base-size-radio-button - 4);
left: (@base-size-radio-button - 31);
border-radius: @base-size-radio-button;
background-color: @secondary-color;
}