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 vertical-align: middle;
36 // We use the not selector to cancel out styling on IE 8 and below
37 // We also disable this styling on JavaScript disabled devices. This fixes the issue with
38 // Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
39 // more capable browsers with unstyled checkboxes.
40 .client-js .mw-ui-checkbox:not( #noop ) {
41 // Position relatively so we can make use of absolute pseudo elements
46 // reset font sizes (see T74727)
48 vertical-align: middle;
51 input[type='checkbox'] {
52 // we hide the input element as instead we will style the label that follows
53 // we use opacity so that VoiceOver software can still identify it
55 // Render *on top of* the label, so that it's still clickable (T98905)
58 // ensure the invisible checkbox takes up the required width
60 height: @checkboxSize;
61 // This is needed for Firefox mobile (See T73750 to workaround default Firefox stylesheet)
72 // the pseudo before element of the label after the checkbox now looks like a checkbox
75 background-color: #fff;
76 .background-image-svg( 'images/checked.svg', 'images/checked.png' );
77 background-position: center center;
78 background-origin: border-box;
79 background-repeat: no-repeat;
80 .background-size( 0, 0 );
81 .box-sizing( border-box );
83 // align the checkbox to middle of the text
87 height: @checkboxSize;
89 border: 1px solid @colorGray7;
90 border-radius: @borderRadius;
91 line-height: @checkboxSize;
95 // when the input is checked, style the label pseudo before element that followed as a checked checkbox
96 &:checked + label:before {
97 .background-size( 100%, 100% );
100 &:active + label:before {
101 background-color: @colorGray13;
102 border-color: @colorGray13;
105 &:focus + label:before {
109 &:focus:hover + label:before,
110 &:hover + label:before {
111 border-bottom-width: 3px;
114 // disabled checkboxes have a gray background
115 &:disabled + label:before {
117 background-color: @colorGray14;
118 border-color: @colorGray14;
121 // disabled and checked checkboxes have a white circle
122 &:disabled:checked + label:before {
123 .background-image-svg( 'images/checked_disabled.svg', 'images/checked_disabled.png' );