Sha256: 4cd0caf9fe75a7d2951892e9a6d3a0d898160814abe7464be7546b896eb1a767
Contents?: true
Size: 1.58 KB
Versions: 16
Compression:
Stored size: 1.58 KB
Contents
$checkbox_size: 20px;
@mixin checkbox($background-color, $border-color) {
position: absolute;
top: 0;
left: 0;
width: $checkbox_size;
height: $checkbox_size;
background-color: $background-color;
border: 2px solid $border-color;
border-radius: $border-radius-large;
@include transition(border-color 0.2s ease-in-out, background-color 0.2s ease-in-out);
}
.checkbox-branded {
position: relative;
font-size: $font-size-default;
&.checkbox { // using added specificity of .checkbox to override bootstrap
display: inline-block;
label {
padding-left: $checkbox_size * 1.5;
}
}
label {
cursor: pointer;
padding-left: $checkbox_size * 0.75;
@media (max-width: $screen-md-min) {
line-height: $font-size-default; // helps labels that wrap to two lines
}
&:before {
@include checkbox($color-white, $color-gray-400);
content: '';
}
&:after {
@include checkbox($color-white, $color-gray-400);
content: '\f00c';
font-family: fontawesome;
color: $color-white;
padding-left: 1px; // horizontal alignment of check w/ in box
line-height: 17px; // vertical alignment of check w/ in box
opacity: 0;
}
&:hover::after {
border-color: $color-gray-500;
opacity: 1;
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after,
&:checked + .has-error label:after
{
@include checkbox($color-primary, color('primary-dark'));
opacity: 1;
}
}
}
.checkbox-branded-inline {
float: left;
margin-right: $checkbox_size * 1.5;
}
Version data entries
16 entries across 16 versions & 1 rubygems