}
@checkboxSize: 1.6em;
+@focusBottomBorderSize: 0.2em;
// We use the not selector to cancel out styling on IE 8 and below
.mw-ui-checkbox:not(#noop) {
line-height: @checkboxSize;
* {
+ // reset font sizes (see bug 72727)
+ font: inherit;
vertical-align: middle;
}
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
max-width: none;
+ margin-right: .4em;
// the pseudo before element of the label after the checkbox now looks like a checkbox
- & + label {
+ & + label::before {
+ content: '';
cursor: pointer;
- margin: 0 .4em;
-
- &::before {
- content: '';
- position: absolute;
- left: 0;
- display: inline-block;
- border-radius: @borderRadius;
- margin-right: 18px;
- width: @checkboxSize;
- height: @checkboxSize;
- background-color: #fff;
- border: 1px solid grey;
- }
+ position: absolute;
+ left: 0;
+ border-radius: @borderRadius;
+ width: @checkboxSize;
+ height: @checkboxSize;
+ background-color: #fff;
+ border: 1px solid grey;
}
// when the input is checked, style the label pseudo before element that followed as a checked checkbox
- &:checked {
- + label {
- &::before {
- .background-image-svg('images/checked.svg', 'images/checked.png');
- .background-size( @checkboxSize, @checkboxSize );
- background-repeat: no-repeat;
- background-position: center top;
- }
- }
+ &:checked + label::before {
+ .background-image-svg('images/checked.svg', 'images/checked.png');
+ .background-size( @checkboxSize, @checkboxSize );
+ background-repeat: no-repeat;
+ background-position: center top;
}
- @focusBottomBorderSize: 0.2em;
- &:active,
- &:focus {
- + label {
- &::after {
- content: '';
- position: absolute;
- width: @checkboxSize;
- height: @checkboxSize - @focusBottomBorderSize + 0.08; // offset by bottom border
- // offset from the checkbox by 1px to account for left border
- left: 1px;
- border-bottom: solid @focusBottomBorderSize lightgrey;
- }
- }
+ &:active + label::before,
+ &:focus + label::before {
+ box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey;
}
// disabled checked boxes have a gray background
- &:disabled + label {
+ &:disabled + label::before {
cursor: default;
-
- &::before {
- background-color: lightgrey;
- }
+ background-color: lightgrey;
}
}
}