123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- .labelHover() {
- &:hover {
- color: @grayLight;
- }
- }
- .radio, .checkbox {
- &-inline {
- padding-left: 0;
- &.highlight {
- left: -8px;
- }
- }
- // This handy trick allows us to make rules for .radio, .checkbox, .radio-inline, and, .checkbox-inline all at once.
- &, &-inline {
- // Sometimes the wrapping containter is a div with .checkbox or .radio, and has a label within it.
- // Sometimes the label itself is the wrapping container, and has .checkbox or .radio on it.
- // The use of the amperstand "parent selector" here allows us to cover many scenarios at once, with terse, but elegant, code.
- label&, .input-label&, & label, & .input-label {
- .labelHover;
- }
-
- label, .input-label, label& {
- cursor: pointer;
- font-weight: normal;
- .labelHover;
- }
- &.highlight {
- input:not(.sr-only) {
- & ~ label {
- padding: 4px;
- border-radius: @baseBorderRadius;
- }
- &:checked ~ label {
- background-color: #e9e9e9;
- opacity: 1;
- z-index: 0;
- }
- }
- }
- input:not(.sr-only) {
- position: absolute;
- width: 1px;
- height: 1px;
- margin: -1px;
- padding: 0;
- overflow: hidden;
- clip: rect(0,0,0,0);
- border: 0;
- & ~ label {
- padding-left: 0;
- &:before {
- font-family:"Glyphicons Halflings";
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- speak: none;
- border: 1px solid #adadad;
- color: #fff;
- font-size: 9px;
- width: 14px;
- height: 14px;
- padding: 0;
- margin-top: 0;
- margin-bottom: -2px;
- cursor: pointer;
- display: inline-block;
- z-index: 2;
- content: "";
- }
- }
- /* for keyboard tabbing */
- &:active ~ label, &:focus ~ label {
- color: @text-color;
- color: rgb(91, 157, 217);
- cursor: pointer;
-
- &:before {
- outline-color: rgb(91, 157, 217);
- outline-offset: -2px;
- outline-style: auto;
- outline-width: 5px;
- }
- &, &:hover {
- color: @text-color;
- cursor: pointer;
- }
- }
- &:active:hover ~ label, &:focus:hover ~ label, &:focus:hover ~ label, &:checked:hover ~ label {
- &, &:hover {
- color: @text-color;
- cursor: pointer;
- }
- }
- &[disabled="disabled"] {
- & ~ label, & ~ label:before {
- color: @text-color;
- opacity: 0.5 !important;
- cursor: not-allowed !important;
- }
- }
- &:checked ~ label {
- &:before {
- background: #39b3d7;
- border-color: #39b3d7;
- }
- }
- }
- &, &:hover {
- input {
- &:checked {
- }
- }
- }
- &.highlight {
- &:before {
- left: 4px;
- top: 7px;
- }
- }
- }
- &.highlight {
- input:not(.sr-only) {
- & ~ label {
- left: -8px;
- position: relative;
- }
- }
- }
- &-inline {
- padding-left: 0;
- &.highlight {
- // left: -8px;
- }
- &:before {
- left: 0;
- top: 3px;
- }
- }
- }
|