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

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.mixins.less';
   3
   4 // Form input sizes, equal to OOUI at 14px base font-size
   5 @size-input-binary: 1.5625em;
   6 // Checked radio input `border-width`, in pixel as both the background and the dot are signals.
   7 // Equal to OOUI.
   8 @border-width-input-radio--checked: 6px;
   9
  10 // Radio
  11 //
  12 // Styling radios in a way that works cross browser is a tricky problem to solve.
  13 // In MediaWiki UI put a radio and label inside a mw-ui-radio div.
  14 // You should give the radio and label matching "id" and "for" attributes, respectively.
  15 //
  16 // Markup:
  17 // <div class="mw-ui-radio">
  18 //   <input type="radio" id="component-example-4" name="component-example-4">
  19 //   <label for="component-example-4">Standard radio</label>
  20 // </div>
  21 // <div class="mw-ui-radio">
  22 //   <input type="radio" id="component-example-4-checked" name="component-example-4" checked>
  23 //   <label for="component-example-4-checked">Standard checked radio</label>
  24 // </div>
  25 // <div class="mw-ui-radio">
  26 //   <input type="radio" id="component-example-4-disabled" name="component-example-4-disabled" disabled>
  27 //   <label for="component-example-4-disabled">Disabled radio</label>
  28 // </div>
  29 // <div class="mw-ui-radio">
  30 //   <input type="radio" id="component-example-4-disabled-checked" name="component-example-4-disabled" disabled checked>
  31 //   <label for="component-example-4-disabled-checked">Disabled checked radio</label>
  32 // </div>
  33 .mw-ui-radio {
  34         display: inline-block;
  35         vertical-align: middle;
  36 }
  37
  38 // We disable this styling on JavaScript disabled devices. This fixes the issue with
  39 // Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
  40 // more capable browsers with unstyled radio buttons.
  41 .client-js .mw-ui-radio {
  42         // Position relatively so we can make use of absolute pseudo elements
  43         position: relative;
  44         line-height: @size-input-binary;
  45
  46         * {
  47                 // reset font sizes (see T74727)
  48                 font-size: inherit;
  49                 vertical-align: middle;
  50         }
  51
  52         [ type='radio' ] {
  53                 // ensure the invisible radio takes up the required width
  54                 width: @size-input-binary;
  55                 height: @size-input-binary;
  56                 // This is needed for Firefox mobile (See T73750 to workaround default Firefox stylesheet)
  57                 max-width: none;
  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: @background-color-base;
  69                                 box-sizing: border-box;
  70                                 position: absolute;
  71                                 left: 0;
  72                                 width: @size-input-binary;
  73                                 height: @size-input-binary;
  74                                 border-width: @border-width-base;
  75                                 border-style: @border-style-base;
  76                                 border-radius: @border-radius-circle;
  77                         }
  78
  79                         // Needed for `:focus` state's inner white circle
  80                         &::after {
  81                                 content: ' ';
  82                                 position: absolute;
  83                                 top: 2px; // `px` unit due to pixel rounding error when using `@size-input-binary / 4`
  84                                 left: 2px;
  85                                 width: 1.14285em; // equals `@size-input-binary - 4px`
  86                                 height: 1.14285em;
  87                                 border: @border-width-base @border-style-base @border-color-transparent;
  88                                 border-radius: @border-radius-circle;
  89                         }
  90                 }
  91
  92                 // Apply a dot on the pseudo `:before` element when the input is checked
  93                 &:checked + label::before {
  94                         border-width: @border-width-input-radio--checked;
  95                 }
  96
  97                 &:enabled {
  98                         & + label::before {
  99                                 border-color: @border-color-input-binary;
 100                                 transition-property: @transition-property-base;
 101                                 transition-duration: @transition-duration-base;
 102                         }
 103
 104                         &:hover {
 105                                 cursor: @cursor-base--hover;
 106                         }
 107
 108                         &:hover + label::before {
 109                                 border-color: @border-color-input-binary--hover;
 110                                 cursor: @cursor-base--hover;
 111                         }
 112
 113                         &:active + label::before {
 114                                 background-color: @background-color-progressive--active;
 115                                 border-color: @border-color-progressive--active;
 116                         }
 117
 118                         &:checked {
 119                                 & + label::before {
 120                                         border-color: @border-color-input-binary--checked;
 121                                 }
 122
 123                                 &:focus + label::after {
 124                                         border-color: @border-color-inverted;
 125                                 }
 126
 127                                 &:hover + label::before {
 128                                         border-color: @border-color-input-binary--hover;
 129                                 }
 130
 131                                 &:active {
 132                                         & + label::before {
 133                                                 border-color: @border-color-progressive--active;
 134                                                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--active;
 135                                         }
 136
 137                                         & + label::after {
 138                                                 border-color: @border-color-progressive--active;
 139                                         }
 140                                 }
 141                         }
 142                 }
 143
 144                 &:disabled {
 145                         & + label::before {
 146                                 background-color: @background-color-disabled;
 147                                 border-color: @border-color-disabled;
 148                         }
 149
 150                         &:checked + label::before {
 151                                 background-color: #fff;
 152                         }
 153                 }
 154         }
 155 }