diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components/radio.less')
| -rw-r--r-- | resources/src/mediawiki.ui/components/radio.less | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less new file mode 100644 index 00000000..1928699b --- /dev/null +++ b/resources/src/mediawiki.ui/components/radio.less @@ -0,0 +1,116 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; + +// Radio +// +// Styling radios in a way that works cross browser is a tricky problem to solve. +// In MediaWiki UI put a radio and label inside a mw-ui-radio div. +// This renders in all browsers except IE6-8 which do not support the :checked selector; +// these are kept backwards-compatible using the :not(#noop) selector. +// You should give the radio and label matching "id" and "for" attributes, respectively. +// +// Markup: +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4" name="kss-example-4"> +// <label for="kss-example-4">Standard radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4-checked" name="kss-example-4" checked> +// <label for="kss-example-4-checked">Standard checked radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4-disabled" name="kss-example-4-disabled" disabled> +// <label for="kss-example-4-disabled">Disabled radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4-disabled-checked" name="kss-example-4-disabled" disabled checked> +// <label for="kss-example-4-disabled-checked">Disabled checked radio</label> +// </div> +// +// Styleguide 4. +.mw-ui-radio { + display: inline-block; + vertical-align: middle; +} + +@radioSize: 2em; + +// 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 radio buttons. +.client-js .mw-ui-radio:not(#noop) { + // Position relatively so we can make use of absolute pseudo elements + position: relative; + line-height: @radioSize; + + * { + // reset font sizes (see bug 72727) + font: inherit; + vertical-align: middle; + } + + input[type="radio"] { + // 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; + // ensure the invisible radio takes up the required width + width: @radioSize; + height: @radioSize; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) + max-width: none; + margin-right: 0.4em; + + // the pseudo before element of the label after the radio now looks like a radio + & + label::before { + .transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ); + content: ''; + cursor: pointer; + .box-sizing(border-box); + position: absolute; + left: 0; + border-radius: 100%; + width: @radioSize; + height: @radioSize; + background-color: #fff; + border: 1px solid @colorGray7; + .background-image-svg('images/radio_checked.svg', 'images/radio_checked.png'); + .background-size( @radioSize, @radioSize ); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + background-size: 0 0; + } + + // when the input is checked, style the label pseudo before element that followed as a checked radio + &: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 radios have a gray background + &:disabled + label::before { + cursor: default; + background-color: @colorGray14; + border-color: @colorGray14; + } + + // disabled and checked radios have a white circle + &:disabled:checked + label::before { + .background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png'); + } + } +} |