bulma-addons
Version:
Addons for Bulma CSS framework
120 lines (99 loc) • 2.39 kB
CSS
.radio {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio > [type="radio"] {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
z-index: 1;
width: 1.5em;
height: 1.5em;
top: 0.25em;
padding: 0;
margin: 0;
visibility: hidden;
}
.radio > [type="radio"]:disabled {
cursor: not-allowed;
}
.radio > [type="radio"]:disabled:before {
opacity: 0.75;
border-color: #b5b5b5 ;
}
.radio > [type="radio"]:disabled:checked:before {
border-color: #b5b5b5 ;
}
.radio > [type="radio"]:disabled:checked:after {
background-color: #b5b5b5 ;
}
.radio > [type="radio"]:before {
visibility: visible;
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background-color: white;
border: 2px solid #dbdbdb;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.radio > [type="radio"]:after {
visibility: visible;
display: none;
content: '';
position: absolute;
left: 25%;
top: 25%;
border-radius: 100%;
height: 50%;
width: 50%;
background-color: #363636;
}
.radio > [type="radio"]:checked:before {
border-color: #b5b5b5;
}
.radio > [type="radio"]:checked:after {
display: block;
}
.radio:hover > [type="radio"]:not(:checked):not(:disabled):before {
border-color: rgba(0, 0, 0, 0.5);
}
.radio .radio.is-white > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-black > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-light > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-dark > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-primary > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-link > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-info > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-success > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-warning > [type="radio"]:checked:before {
border-color: #00d1b2;
}
.radio .radio.is-danger > [type="radio"]:checked:before {
border-color: #00d1b2;
}
/*# sourceMappingURL=radio.css.map */