@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: //
// // //
//
// // //
//
// // //
//
// // //
// // Styleguide 3. .mw-ui-checkbox { display: inline-block; 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 ) { // Position relatively so we can make use of absolute pseudo elements position: relative; display: table; * { // reset font sizes (see bug 72727) font: inherit; vertical-align: middle; } input[type="checkbox"] { // we hide the input element as instead we will style the label that follows // we use opacity so that VoiceOver software can still identify it opacity: 0; // Render "on top of" the label, so that it's still clickable (T98905) z-index: 1; position: relative; // ensure the invisible checkbox takes up the required width width: @checkboxSize; height: @checkboxSize; // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) max-width: none; margin: 0 0.4em 0 0; display: table-cell; & + label { display: table-cell; } // the pseudo before element of the label after the checkbox now looks like a checkbox & + label::before { content: ''; background-color: #fff; .background-image-svg( 'images/checked.svg', 'images/checked.png' ); background-position: center center; background-origin: border-box; background-repeat: no-repeat; .background-size( 0, 0 ); .box-sizing( border-box ); position: absolute; // align the checkbox to middle of the text top: 50%; left: 0; width: @checkboxSize; height: @checkboxSize; margin-top: -1em; border: 1px solid @colorGray7; border-radius: @borderRadius; line-height: @checkboxSize; cursor: pointer; } // when the input is checked, style the label pseudo before element that followed as a checked checkbox &:checked + label::before { .background-size( 100%, 100% ); } &:active + label::before { background-color: @colorGray13; border-color: @colorGray13; } &:focus + label::before { border-width: 2px; } &:focus:hover + label::before, &:hover + label::before { border-bottom-width: 3px; } // disabled checkboxes have a gray background &:disabled + label::before { cursor: default; background-color: @colorGray14; border-color: @colorGray14; } // disabled and checked checkboxes have a white circle &:disabled:checked + label::before { .background-image-svg( 'images/checked_disabled.svg', 'images/checked_disabled.png' ); } } }