--- /dev/null
+@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;
+ }
+ }
+}
scripts.mit.edu / autoinstallsdev / mediawiki.git / blobdiff