1 @import 'mediawiki.mixins';
2 @import 'mediawiki.ui/variables';
6 // Styling checkboxes in a way that works cross browser is a tricky problem to solve.
7 // In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
8 // This renders in all browsers except IE 6-8 which do not support the `:checked` selector;
9 // these are kept backwards-compatible using the `:not( #noop )` selector.
10 // You should give the checkbox and label matching `id` and `for` attributes, respectively.
13 // <div class="mw-ui-checkbox">
14 // <input type="checkbox" id="kss-example-3">
15 // <label for="kss-example-3">Standard checkbox</label>
17 // <div class="mw-ui-checkbox">
18 // <input type="checkbox" id="kss-example-3-checked" checked>
19 // <label for="kss-example-3-checked">Standard checked checkbox</label>
21 // <div class="mw-ui-checkbox">
22 // <input type="checkbox" id="kss-example-3-disabled" disabled>
23 // <label for="kss-example-3-disabled">Disabled checkbox</label>
25 // <div class="mw-ui-checkbox">
26 // <input type="checkbox" id="kss-example-3-disabled-checked" disabled checked>
27 // <label for="kss-example-3-disabled-checked">Disabled checked checkbox</label>
32 display: inline-block;
33 line-height: @sizeInputBinary;
34 vertical-align: middle;
37 // We use the `:not` selector to cancel out styling on IE 8 and below
38 // We also disable this styling on JavaScript disabled devices. This fixes the issue with
39 // Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
40 // more capable browsers with unstyled checkboxes.
41 .client-js .mw-ui-checkbox:not( #noop ) {
43 // Position relatively so we can make use of absolute pseudo elements
47 // Reset font sizes, see T74727
49 vertical-align: middle;
55 // Ensure the invisible input takes up the required `width` & `height`
56 width: @sizeInputBinary;
57 height: @sizeInputBinary;
58 // Support: Firefox mobile to override user-agent stylesheet, see T73750
61 // Hide `input[type=checkbox]` and instead style the label that follows
62 // Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the checkbox
64 // Render *on top of* the label, so that it's still clickable, see T98905
72 // Pseudo `:before` element of the label after the checkbox now looks like a checkbox
75 background-color: #fff;
76 background-origin: border-box;
77 background-position: center center;
78 background-repeat: no-repeat;
79 .background-size( 0, 0 );
80 .box-sizing( border-box );
82 // Ensure alignment of checkbox to middle of the text in long labels, see T85241
85 width: @sizeInputBinary;
86 height: @sizeInputBinary;
87 margin-top: -( @sizeInputBinary / 2 );
88 border: 1px solid @colorGray7;
89 border-radius: @borderRadius;
92 // Apply a checkmark on the pseudo `:before` element when the input is checked
93 &:checked + label:before {
94 .background-image-svg( 'images/checkbox-checked.svg', 'images/checkbox-checked.png' );
95 .background-size( 90%, 90% );
107 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
110 // `:focus` has to come first, otherwise a specificity race with `:hover:focus` etc is necessary
111 &:focus + label:before {
112 border-color: @colorProgressive;
113 box-shadow: @boxShadowWidgetFocus;
116 &:hover + label:before {
117 border-color: @colorProgressive;
120 &:active + label:before {
121 background-color: @colorProgressiveActive;
122 border-color: @borderColorInputBinaryActive;
123 box-shadow: @boxShadowInputBinaryActive;
128 background-color: @backgroundColorInputBinaryChecked;
129 border-color: @borderColorInputBinaryChecked;
132 &:focus + label:before {
133 background-color: @backgroundColorInputBinaryChecked;
134 border-color: @borderColorInputBinaryChecked;
135 box-shadow: @boxShadowProgressiveFocus;
138 &:hover + label:before {
139 background-color: @colorProgressiveHighlight;
140 border-color: @colorProgressiveHighlight;
143 &:active + label:before {
144 background-color: @backgroundColorInputBinaryActive;
145 border-color: @borderColorInputBinaryActive;
150 // disabled checkboxes have a gray background
151 &:disabled + label:before {
152 background-color: @colorGray12;
153 border-color: @colorGray12;