resources/src/mediawiki.ui/components/radio.less

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3
   4 // Radio
   5 //
   6 // Styling radios in a way that works cross browser is a tricky problem to solve.
   7 // In MediaWiki UI put a radio and label inside a mw-ui-radio div.
   8 // This renders in all browsers except IE 6-8 which do not support the :checked selector;
   9 // these are kept backwards-compatible using the `:not( #noop )` selector.
  10 // You should give the radio and label matching "id" and "for" attributes, respectively.
  11 //
  12 // Markup:
  13 // <div class="mw-ui-radio">
  14 //   <input type="radio" id="kss-example-4" name="kss-example-4">
  15 //   <label for="kss-example-4">Standard radio</label>
  16 // </div>
  17 // <div class="mw-ui-radio">
  18 //   <input type="radio" id="kss-example-4-checked" name="kss-example-4" checked>
  19 //   <label for="kss-example-4-checked">Standard checked radio</label>
  20 // </div>
  21 // <div class="mw-ui-radio">
  22 //   <input type="radio" id="kss-example-4-disabled" name="kss-example-4-disabled" disabled>
  23 //   <label for="kss-example-4-disabled">Disabled radio</label>
  24 // </div>
  25 // <div class="mw-ui-radio">
  26 //   <input type="radio" id="kss-example-4-disabled-checked" name="kss-example-4-disabled" disabled checked>
  27 //   <label for="kss-example-4-disabled-checked">Disabled checked radio</label>
  28 // </div>
  29 //
  30 // Styleguide 4.
  31 .mw-ui-radio {
  32         display: inline-block;
  33         vertical-align: middle;
  34 }
  35
  36 // We use the not selector to cancel out styling on IE 8 and below.
  37 // We also disable this styling on JavaScript disabled devices. This fixes the issue with
  38 // Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
  39 // more capable browsers with unstyled radio buttons.
  40 .client-js .mw-ui-radio:not( #noop ) {
  41         // Position relatively so we can make use of absolute pseudo elements
  42         position: relative;
  43         line-height: @sizeInputBinary;
  44
  45         * {
  46                 // reset font sizes (see T74727)
  47                 font: inherit;
  48                 vertical-align: middle;
  49         }
  50
  51         [type='radio'] {
  52                 // ensure the invisible radio takes up the required width
  53                 width: @sizeInputBinary;
  54                 height: @sizeInputBinary;
  55                 // This is needed for Firefox mobile (See T73750 to workaround default Firefox stylesheet)
  56                 max-width: none;
  57                 margin: 0;
  58                 // Hide `input[type=radio]` and instead style the label that follows
  59                 // Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the radio
  60                 opacity: 0;
  61
  62                 & + label {
  63                         padding-left: 0.4em;
  64
  65                         // Pseudo `:before` element of the label after the radio now looks like a radio
  66                         &:before {
  67                                 content: '';
  68                                 background-color: #fff;
  69                                 .box-sizing( border-box );
  70                                 position: absolute;
  71                                 left: 0;
  72                                 width: @sizeInputBinary;
  73                                 height: @sizeInputBinary;
  74                                 border: 1px solid @colorGray7;
  75                                 border-radius: 100%;
  76                         }
  77
  78                         // Needed for `:focus` state's inner white circle
  79                         &:after {
  80                                 content: ' ';
  81                                 position: absolute;
  82                                 top: 2px; // `px` unit due to pixel rounding error when using `@sizeInputBinary / 4`
  83                                 left: 2px;
  84                                 width: 1.14285em; // equals `@sizeInputBinary - 4px`
  85                                 height: 1.14285em;
  86                                 border: 1px solid transparent;
  87                                 border-radius: 100%;
  88                         }
  89                 }
  90
  91                 // Apply a dot on the pseudo `:before` element when the input is checked
  92                 &:checked + label:before {
  93                         border-width: @borderWidthRadioChecked;
  94                 }
  95
  96                 &:enabled {
  97                         cursor: pointer;
  98
  99                         & + label:before {
 100                                 cursor: pointer;
 101                                 .transition( ~'background-color 100ms, color 100ms, border-color 100ms' );
 102                         }
 103
 104                         &:hover + label:before {
 105                                 border-color: @colorProgressive;
 106                         }
 107
 108                         &:active + label:before {
 109                                 background-color: @colorProgressiveActive;
 110                                 border-color: @borderColorInputBinaryActive;
 111                         }
 112
 113                         &:checked {
 114                                 & + label:before {
 115                                         border-color: @borderColorInputBinaryChecked;
 116                                 }
 117
 118                                 &:focus + label:after {
 119                                         border-color: #fff;
 120                                 }
 121
 122                                 &:hover + label:before {
 123                                         border-color: @colorProgressiveHighlight;
 124                                 }
 125
 126                                 &:active {
 127                                         & + label:before {
 128                                                 border-color: @borderColorInputBinaryActive;
 129                                                 box-shadow: @boxShadowInputBinaryActive;
 130                                         }
 131
 132                                         & + label:after {
 133                                                 border-color: @borderColorInputBinaryActive;
 134                                         }
 135                                 }
 136                         }
 137                 }
 138
 139                 &:disabled {
 140                         & + label:before {
 141                                 background-color: @colorGray12;
 142                                 border-color: @colorGray12;
 143                         }
 144
 145                         &:checked + label:before {
 146                                 background-color: #fff;
 147                         }
 148                 }
 149         }
 150 }