/* Component - CSS Checkbox */
.checkbox.checkbox-css {
position: relative;
line-height: 16px;
padding-top: 7px;
&.checkbox-inline {
padding-left: 0;
display: inline-block;
& + .checkbox.checkbox-css.checkbox-inline {
margin-left: 15px;
}
}
& label {
padding-left: 24px;
margin: 0;
&:before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 16px;
border-radius: 4px;
background: #dee2e6;
}
}
& input {
display: none;
&:checked + label:after {
content: '';
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
position: absolute;
top: 7px;
left: 0;
color: #fff;
height: 16px;
width: 16px;
text-align: center;
}
&:checked + label:before {
background: @blue;
border-color: @blue;
}
}
&.checkbox-success input:checked + label:before {
background: @green;
border-color: @green;
}
&.checkbox-info input:checked + label:before {
background: @aqua;
border-color: @aqua;
}
&.checkbox-danger input:checked + label:before {
background: @red;
border-color: @red;
}
&.checkbox-warning input:checked + label:before {
background: @orange;
border-color: @orange;
}
&.checkbox-inverse input:checked + label:before {
background: @black;
border-color: @black;
}
}
.has-success .checkbox.checkbox-css label:before,
.has-success.checkbox.checkbox-css label:before,
.is-valid .checkbox.checkbox-css label:before,
.is-valid.checkbox.checkbox-css label:before {
background: #d8f5d9;
}
.has-success .checkbox.checkbox-css label,
.has-success.checkbox.checkbox-css label,
.is-valid .checkbox.checkbox-css label,
.is-valid.checkbox.checkbox-css label {
color: @green_darker;
}
.has-error .checkbox.checkbox-css label:before,
.has-error.checkbox.checkbox-css label:before,
.is-invalid .checkbox.checkbox-css label:before,
.is-invalid.checkbox.checkbox-css label:before {
background: #ffd0cd;
}
.has-error .checkbox.checkbox-css label,
.has-error.checkbox.checkbox-css label,
.is-invalid .checkbox.checkbox-css label,
.is-invalid.checkbox.checkbox-css label {
color: @red_darker;
}
.has-warning .checkbox.checkbox-css label:before,
.has-warning.checkbox.checkbox-css label:before {
background: #fce1ba;
}
|
Download
