12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- .radio, .radio-inline {
-
- input[type="radio"]:not(.sr-only) {
- & ~ label {
- &:before {
- border-radius: 8px;
- z-index: 1;
- }
- }
- &:checked {
- & ~ label {
- &:before {
- background: #39b3d7; /* Old browsers */
- background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 40%, #39b3d7 41%, #39b3d7 100%); /* FF3.6+ */
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(40%,#ffffff), color-stop(41%,#39b3d7), color-stop(100%,#39b3d7)); /* Chrome,Safari4+ */
- background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* Chrome10+,Safari5.1+ */
- background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* Opera 12+ */
- background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* IE10+ */
- background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#39b3d7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
- }
- }
- }
- /* for keyboard tabbing */
- &:hover ~ label, &:active ~ label, &:focus ~ label {
-
- &:before {
- outline-color: rgba(91, 157, 217, 0.7);
- outline-offset: -4px;
- outline-style: auto;
- outline-width: 6px;
- }
- }
- /* 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;
- }
- }
- }
- }
|