fuelux
Version:
Base Fuel UX styles and controls
60 lines (47 loc) • 2.07 kB
text/less
@import "forms.less";
.fuelux {
.radio, .radio-inline {
input[type="radio"]:not(.sr-only) {
& ~ label {
&:before {
border-radius: 8px;
z-index: 1;
}
}
&:checked {
& ~ label {
&:before {
background: @checkboxPrimaryColor; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@true-white), color-stop(40%,@true-white), color-stop(41%,@checkboxPrimaryColor), color-stop(100%,@checkboxPrimaryColor)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* IE10+ */
background: radial-gradient(ellipse at center, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* W3C */
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{true-white}', endColorstr='@{checkboxPrimaryColor}', GradientType=1)"; /* IE6-9 fallback on horizontal gradient */
}
}
}
/* for keyboard tabbing */
&:hover ~ label, &:active ~ label, &:focus ~ label {
&:before {
.checkbox-radio-focus();
}
}
/* for keyboard tabbing */
&:active:hover ~ label, &:focus:hover ~ label, &:focus:hover ~ label, &:checked:hover ~ label {
&:before {
outline-color: none;
outline-offset: 0;
outline-style: none;
outline-width: 0;
cursor: default;
}
&, &:hover {
color: @text-color;
cursor: default;
}
}
}
}
}