summary |
shortlog |
log |
commit | commitdiff |
tree
raw |
patch |
inline | side by side (from parent 1:
768654a)
Change-Id: Idfe36e3efb4a1c26ad677d3c9732ce66d39b9a60
"no-descending-specificity": null,
"selector-no-id": null,
"no-descending-specificity": null,
"selector-no-id": null,
- "selector-pseudo-element-colon-notation": null,
"value-keyword-case": null
}
"value-keyword-case": null
}
}
// the pseudo before element of the label after the checkbox now looks like a checkbox
}
// the pseudo before element of the label after the checkbox now looks like a checkbox
content: '';
background-color: #fff;
.background-image-svg( 'images/checked.svg', 'images/checked.png' );
content: '';
background-color: #fff;
.background-image-svg( 'images/checked.svg', 'images/checked.png' );
}
// when the input is checked, style the label pseudo before element that followed as a checked checkbox
}
// when the input is checked, style the label pseudo before element that followed as a checked checkbox
- &:checked + label::before {
+ &:checked + label:before {
.background-size( 100%, 100% );
}
.background-size( 100%, 100% );
}
- &:active + label::before {
+ &:active + label:before {
background-color: @colorGray13;
border-color: @colorGray13;
}
background-color: @colorGray13;
border-color: @colorGray13;
}
- &:focus + label::before {
+ &:focus + label:before {
- &:focus:hover + label::before,
- &:hover + label::before {
+ &:focus:hover + label:before,
+ &:hover + label:before {
border-bottom-width: 3px;
}
// disabled checkboxes have a gray background
border-bottom-width: 3px;
}
// disabled checkboxes have a gray background
- &:disabled + label::before {
+ &:disabled + label:before {
cursor: default;
background-color: @colorGray14;
border-color: @colorGray14;
}
// disabled and checked checkboxes have a white circle
cursor: default;
background-color: @colorGray14;
border-color: @colorGray14;
}
// disabled and checked checkboxes have a white circle
- &:disabled:checked + label::before {
+ &:disabled:checked + label:before {
.background-image-svg( 'images/checked_disabled.svg', 'images/checked_disabled.png' );
}
}
.background-image-svg( 'images/checked_disabled.svg', 'images/checked_disabled.png' );
}
}
margin-right: 0.4em;
// the pseudo before element of the label after the radio now looks like a radio
margin-right: 0.4em;
// the pseudo before element of the label after the radio now looks like a radio
content: '';
background-color: #fff;
.background-image-svg( 'images/radio_checked.svg', 'images/radio_checked.png' );
content: '';
background-color: #fff;
.background-image-svg( 'images/radio_checked.svg', 'images/radio_checked.png' );
}
// when the input is checked, style the label pseudo before element that followed as a checked radio
}
// when the input is checked, style the label pseudo before element that followed as a checked radio
- &:checked + label::before {
+ &:checked + label:before {
.background-size( 100%, 100% );
}
.background-size( 100%, 100% );
}
- &:active + label::before {
+ &:active + label:before {
background-color: @colorGray13;
border-color: @colorGray13;
}
background-color: @colorGray13;
border-color: @colorGray13;
}
- &:focus + label::before {
+ &:focus + label:before {
- &:focus:hover + label::before,
- &:hover + label::before {
+ &:focus:hover + label:before,
+ &:hover + label:before {
border-bottom-width: 3px;
}
// disabled radios have a gray background
border-bottom-width: 3px;
}
// disabled radios have a gray background
- &:disabled + label::before {
+ &:disabled + label:before {
background-color: @colorGray14;
border-color: @colorGray14;
cursor: default;
}
// disabled and checked radios have a white circle
background-color: @colorGray14;
border-color: @colorGray14;
cursor: default;
}
// disabled and checked radios have a white circle
- &:disabled:checked + label::before {
+ &:disabled:checked + label:before {
.background-image-svg( 'images/radio_disabled.svg', 'images/radio_disabled.png' );
}
}
.background-image-svg( 'images/radio_disabled.svg', 'images/radio_disabled.png' );
}
}