@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables.less';
// Checkbox
//
// Styling checkboxes in a way that works cross browser is a tricky problem to solve.
// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
// This renders in all browsers except IE 6-8 which do not support the `:checked` selector;
// these are kept backwards-compatible using the `:not( #noop )` selector.
// You should give the checkbox and label matching `id` and `for` attributes, respectively.
//
// Markup:
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
.mw-ui-checkbox {
display: inline-block;
line-height: @size-input-binary;
vertical-align: middle;
}
// We use the `:not` selector to cancel out styling on IE 8 and below
// Note: This may be broken on older Opera Mini devices.
.mw-ui-checkbox:not( #noop ) {
display: table;
// Position relatively so we can make use of absolute pseudo elements
position: relative;
* {
// Reset font sizes, see T74727
font-size: inherit;
vertical-align: middle;
}
[ type='checkbox' ] {
display: table-cell;
position: relative;
// Ensure the invisible input takes up the required `width` & `height`
width: @size-input-binary;
height: @size-input-binary;
// Support: Firefox mobile to override user-agent stylesheet, see T73750
max-width: none;
margin: 0;
// Hide `input[type=checkbox]` and instead style the label that follows
// Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the checkbox
opacity: 0;
// Render *on top of* the label, so that it's still clickable, see T98905
z-index: 1;
& + label {
display: table-cell;
padding-left: 0.4em;
}
// Pseudo `:before` element of the label after the checkbox now looks like a checkbox
& + label:before {
content: '';
background-color: #fff;
background-origin: border-box;
background-position: center center;
background-repeat: no-repeat;
background-size: 0 0;
.box-sizing( border-box );
position: absolute;
// Ensure alignment of checkbox to middle of the text in long labels, see T85241
top: 50%;
left: 0;
width: @size-input-binary;
height: @size-input-binary;
margin-top: -( @size-input-binary / 2 );
border: 1px solid @colorGray7;
border-radius: @border-radius-base;
}
// Apply a checkmark on the pseudo `:before` element when the input is checked
&:checked + label:before {
.background-image-svg( 'images/checkbox-checked.svg', 'images/checkbox-checked.png' );
background-size: 90% 90%;
}
&:enabled {
cursor: pointer;
& + label {
cursor: pointer;
}
& + label:before {
cursor: pointer;
.transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
}
// `:focus` has to come first, otherwise a specificity race with `:hover:focus` etc is necessary
&:focus + label:before {
border-color: @border-color-base--focus;
box-shadow: @box-shadow-base--focus;
}
&:hover + label:before {
// FIXME: Replace with WikimediaUI Base `@border-color*` var when available.
border-color: @color-primary--hover;
}
&:active + label:before {
background-color: @background-color-input-binary--active;
border-color: @border-color-input-binary--active;
box-shadow: @box-shadow-input-binary--active;
}
&:checked {
& + label:before {
background-color: @background-color-input-binary--checked;
border-color: @border-color-input-binary--checked;
}
&:focus + label:before {
background-color: @background-color-input-binary--checked;
border-color: @border-color-input-binary--checked;
box-shadow: @box-shadow-primary--focus;
}
&:hover + label:before {
// FIXME: Replace with WikimediaUI Base vars when available.
background-color: @color-primary--hover;
border-color: @color-primary--hover;
}
&:active + label:before {
background-color: @background-color-input-binary--active;
border-color: @border-color-input-binary--active;
}
}
}
// disabled checkboxes have a gray background
&:disabled + label:before {
background-color: @colorGray12;
border-color: @colorGray12;
}
}
}