Sha256: 575df7a554216c29d0492325728cd0d23b9ad62f23b7ce13ecd7bdd21ed8f8b3
Contents?: true
Size: 1.69 KB
Versions: 40
Compression:
Stored size: 1.69 KB
Contents
// Styling checkboxes and radio buttons by hiding the input and using pseudo-classes
// This technique is a bit more tightly coupled to the markup than we'd prefer but it gives us a lot of cross-browser style control
.checkbox.checkbox-branded,
.checkbox-inline.checkbox-branded,
.radio.radio-branded,
.radio-inline.radio-branded {
input[type="checkbox"],
input[type="radio"] {
opacity: 0;
width: 0;
height: 0;
}
.checkbox-visual,
.radio-visual {
margin-right: 15px;
float: left;
&:before {
@extend %check-style;
background-color: color('gray-200');
color: color('gray-400');
font-family: fontawesome;
}
}
input[type="checkbox"]:checked + .checkbox-visual:before,
input[type="radio"]:checked + .radio-visual:before {
color: color('white');
background-color: color('primary');
}
.checkbox-label,
.radio-label {
display: block;
padding-left: 0;
line-height: $btn-xs-size;
}
}
.checkbox-inline.checkbox-branded,
.radio-inline.radio-branded {
padding-left: 0;
.checkbox-label,
.radio-label {
display: inline-block;
margin-right: 25px;
}
}
.checkbox.checkbox-branded,
.checkbox-inline.checkbox-branded {
.checkbox-visual:before {
content: "\f00c";
border-radius: $border-radius-default;
}
input[type="checkbox"]:checked + .checkbox-visual:before {
background-color: color('primary');
}
}
.radio.radio-branded,
.radio-inline.radio-branded {
.radio-visual:before {
content: "\f111";
padding-top: 1px; //shim for text alignment
@include circle($btn-xs-size, color('gray-200'));
}
input[type="radio"]:checked + .radio-visual:before {
background-color: color('secondary');
}
}
Version data entries
40 entries across 40 versions & 1 rubygems