diff options
Diffstat (limited to 'www/wiki/resources/src/mediawiki.ui/components/checkbox.less')
| -rw-r--r-- | www/wiki/resources/src/mediawiki.ui/components/checkbox.less | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.ui/components/checkbox.less b/www/wiki/resources/src/mediawiki.ui/components/checkbox.less new file mode 100644 index 00000000..0c13daf8 --- /dev/null +++ b/www/wiki/resources/src/mediawiki.ui/components/checkbox.less @@ -0,0 +1,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; + } + } +} |