bulma-addons
Version:
Addons for Bulma CSS framework
132 lines (112 loc) • 2.92 kB
CSS
.checkbox {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox > [type="checkbox"] {
cursor: pointer;
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;
}
.checkbox > [type="checkbox"]:disabled {
cursor: not-allowed;
}
.checkbox > [type="checkbox"]:disabled:before {
opacity: 0.75;
background-color: #b5b5b5 ;
border-color: #b5b5b5 ;
}
.checkbox > [type="checkbox"]:disabled:checked:before {
background-color: #b5b5b5 ;
border-color: #b5b5b5 ;
}
.checkbox > [type="checkbox"]:before {
visibility: visible;
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: white;
border: 2px solid #dbdbdb;
border-radius: 2px;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.checkbox > [type="checkbox"]:after {
visibility: visible;
display: none;
content: '';
position: absolute;
left: 0.5em;
top: 10%;
height: 66%;
width: 33%;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.checkbox > [type="checkbox"]:checked:before {
background-color: #b5b5b5;
border-color: #b5b5b5;
}
.checkbox > [type="checkbox"]:checked:after {
display: block;
}
.checkbox:hover > [type="checkbox"]:not(:disabled):before {
border-color: rgba(0, 0, 0, 0.5);
}
.checkbox .checkbox.is-white > [type="checkbox"]:checked:before {
background-color: white;
border-color: #fcfcfc;
}
.checkbox .checkbox.is-black > [type="checkbox"]:checked:before {
background-color: #0a0a0a;
border-color: #080808;
}
.checkbox .checkbox.is-light > [type="checkbox"]:checked:before {
background-color: whitesmoke;
border-color: #f2f2f2;
}
.checkbox .checkbox.is-dark > [type="checkbox"]:checked:before {
background-color: #363636;
border-color: #333333;
}
.checkbox .checkbox.is-primary > [type="checkbox"]:checked:before {
background-color: #00d1b2;
border-color: #00ccad;
}
.checkbox .checkbox.is-link > [type="checkbox"]:checked:before {
background-color: #3273dc;
border-color: #2e70dc;
}
.checkbox .checkbox.is-info > [type="checkbox"]:checked:before {
background-color: #3298dc;
border-color: #2e96dc;
}
.checkbox .checkbox.is-success > [type="checkbox"]:checked:before {
background-color: #48c774;
border-color: #44c571;
}
.checkbox .checkbox.is-warning > [type="checkbox"]:checked:before {
background-color: #ffdd57;
border-color: #ffdc52;
}
.checkbox .checkbox.is-danger > [type="checkbox"]:checked:before {
background-color: #f14668;
border-color: #f14164;
}
/*# sourceMappingURL=checkbox.css.map */