1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
// 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:
// <div class="mw-ui-checkbox">
// <input type="checkbox" id="kss-example-3">
// <label for="kss-example-3">Standard checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
// <input type="checkbox" id="kss-example-3-checked" checked>
// <label for="kss-example-3-checked">Standard checked checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
// <input type="checkbox" id="kss-example-3-disabled" disabled>
// <label for="kss-example-3-disabled">Disabled checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
// <input type="checkbox" id="kss-example-3-disabled-checked" disabled checked>
// <label for="kss-example-3-disabled-checked">Disabled checked checkbox</label>
// </div>
//
// Styleguide 3.
.mw-ui-checkbox {
display: inline-block;
line-height: @sizeInputBinary;
vertical-align: middle;
}
// We use the `:not` selector to cancel out styling on IE 8 and below
// We also disable this styling on JavaScript disabled devices. This fixes the issue with
// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
// more capable browsers with unstyled checkboxes.
.client-js .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: inherit;
vertical-align: middle;
}
[ type='checkbox' ] {
display: table-cell;
position: relative;
// Ensure the invisible input takes up the required `width` & `height`
width: @sizeInputBinary;
height: @sizeInputBinary;
// 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: @sizeInputBinary;
height: @sizeInputBinary;
margin-top: -( @sizeInputBinary / 2 );
border: 1px solid @colorGray7;
border-radius: @borderRadius;
}
// 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: @colorProgressive;
box-shadow: @boxShadowWidgetFocus;
}
&:hover + label:before {
border-color: @colorProgressive;
}
&:active + label:before {
background-color: @colorProgressiveActive;
border-color: @borderColorInputBinaryActive;
box-shadow: @boxShadowInputBinaryActive;
}
&:checked {
& + label:before {
background-color: @backgroundColorInputBinaryChecked;
border-color: @borderColorInputBinaryChecked;
}
&:focus + label:before {
background-color: @backgroundColorInputBinaryChecked;
border-color: @borderColorInputBinaryChecked;
box-shadow: @boxShadowProgressiveFocus;
}
&:hover + label:before {
background-color: @colorProgressiveHighlight;
border-color: @colorProgressiveHighlight;
}
&:active + label:before {
background-color: @backgroundColorInputBinaryActive;
border-color: @borderColorInputBinaryActive;
}
}
}
// disabled checkboxes have a gray background
&:disabled + label:before {
background-color: @colorGray12;
border-color: @colorGray12;
}
}
}
|
