resources/src/mediawiki.ui.checkbox/checkbox.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
   7 // Checkbox
   8 //
   9 // Styling checkboxes in a way that works cross browser is a tricky problem to solve.
  10 // In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
  11 // You should give the checkbox and label matching `id` and `for` attributes, respectively.
  12 //
  13 // Markup:
  14 // <div class="mw-ui-checkbox">
  15 //   <input type="checkbox" id="component-example-3">
  16 //   <label for="component-example-3">Standard checkbox</label>
  17 // </div>
  18 // <div class="mw-ui-checkbox">
  19 //   <input type="checkbox" id="component-example-3-checked" checked>
  20 //   <label for="component-example-3-checked">Standard checked checkbox</label>
  21 // </div>
  22 // <div class="mw-ui-checkbox">
  23 //   <input type="checkbox" id="component-example-3-disabled" disabled>
  24 //   <label for="component-example-3-disabled">Disabled checkbox</label>
  25 // </div>
  26 // <div class="mw-ui-checkbox">
  27 //   <input type="checkbox" id="component-example-3-disabled-checked" disabled checked>
  28 //   <label for="component-example-3-disabled-checked">Disabled checked checkbox</label>
  29 // </div>
  30 .mw-ui-checkbox {
  31         display: table;
  32         // Position relatively so we can make use of absolute pseudo elements
  33         position: relative;
  34         line-height: @size-input-binary;
  35         vertical-align: middle;
  36
  37         * {
  38                 // Reset font sizes, see T74727
  39                 font-size: inherit;
  40                 vertical-align: middle;
  41         }
  42
  43         [ type='checkbox' ] {
  44                 display: table-cell;
  45                 position: relative;
  46                 // Ensure the invisible input takes up the required `width` & `height`
  47                 width: @size-input-binary;
  48                 height: @size-input-binary;
  49                 // Support: Firefox mobile to override user-agent stylesheet, see T73750
  50                 max-width: none;
  51                 // Hide `input[type=checkbox]` and instead style the label that follows
  52                 // Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the checkbox
  53                 opacity: 0;
  54                 // Render *on top of* the label, so that it's still clickable, see T98905
  55                 z-index: 1;
  56
  57                 & + label {
  58                         display: table-cell;
  59                         padding-left: 0.4em;
  60                 }
  61
  62                 // Pseudo `:before` element of the label after the checkbox now looks like a checkbox
  63                 & + label::before {
  64                         content: '';
  65                         background-color: #fff;
  66                         background-origin: border-box;
  67                         background-position: center center;
  68                         background-repeat: no-repeat;
  69                         background-size: 0 0;
  70                         box-sizing: border-box;
  71                         position: absolute;
  72                         // Ensure alignment of checkbox to middle of the text in long labels, see T85241
  73                         top: 50%;
  74                         left: 0;
  75                         width: @size-input-binary;
  76                         height: @size-input-binary;
  77                         margin-top: -( @size-input-binary / 2 );
  78                         border-width: @border-width-base;
  79                         border-style: @border-style-base;
  80                         border-radius: @border-radius-base;
  81                 }
  82
  83                 // Apply a checkmark on the pseudo `:before` element when the input is checked.
  84                 &:checked + label::before {
  85                         background-image: url( images/checkbox-checked.svg );
  86                         background-size: 90% 90%;
  87                 }
  88
  89                 &:enabled {
  90                         cursor: pointer;
  91
  92                         & + label {
  93                                 cursor: pointer;
  94                         }
  95
  96                         & + label::before {
  97                                 border-color: @border-color-input-binary;
  98                                 transition-property: @transition-property-base;
  99                                 transition-duration: @transition-duration-base;
 100                         }
 101
 102                         // `:focus` has to come first, otherwise a specificity race with `:hover:focus` etc is necessary
 103                         &:focus + label::before {
 104                                 border-color: @border-color-input-binary--focus;
 105                                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
 106                                 // In Windows high contrast mode the outline becomes visible.
 107                                 outline: @outline-base--focus;
 108                         }
 109
 110                         &:hover + label::before {
 111                                 border-color: @border-color-input-binary--hover;
 112                                 cursor: @cursor-base--hover;
 113                         }
 114
 115                         &:active + label::before {
 116                                 background-color: @background-color-progressive--active;
 117                                 border-color: @border-color-progressive--active;
 118                                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--active;
 119                         }
 120
 121                         &:checked {
 122                                 & + label::before {
 123                                         background-color: @background-color-input-binary--checked;
 124                                         border-color: @border-color-input-binary--checked;
 125                                 }
 126
 127                                 &:focus + label::before {
 128                                         background-color: @background-color-input-binary--checked;
 129                                         border-color: @border-color-input-binary--checked;
 130                                 }
 131
 132                                 &:hover + label::before {
 133                                         background-color: @background-color-progressive--hover;
 134                                         border-color: @border-color-input-binary--hover;
 135                                 }
 136
 137                                 &:active + label::before {
 138                                         background-color: @background-color-progressive--active;
 139                                         border-color: @border-color-progressive--active;
 140                                 }
 141                         }
 142                 }
 143
 144                 // Disabled checkboxes have a gray background.
 145                 &:disabled + label::before {
 146                         background-color: @background-color-disabled;
 147                         border-color: @border-color-disabled;
 148                 }
 149         }
 150 }