resources/src/mediawiki.ui.input/input.less

   1 // Inputs
   2
   3 @import 'mediawiki.skin.variables.less';
   4 @import 'mediawiki.mixins.less';
   5
   6 // Text inputs
   7 //
   8 // Apply the mw-ui-input class to input and textarea fields.
   9
  10 // mw-ui-input
  11 //
  12 // Style an input using MediaWiki UI.
  13 // Currently in draft status and subject to change.
  14 // When focused a progressive highlight appears to the left of the field.
  15 //
  16 // Markup:
  17 // <input class="mw-ui-input" placeholder="Enter your name">
  18 // <textarea class="mw-ui-input">Text here</textarea>
  19 .mw-ui-input {
  20         box-sizing: border-box;
  21         display: block;
  22         width: 100%;
  23         border-width: @border-width-base;
  24         border-style: @border-style-base;
  25         border-radius: @border-radius-base;
  26         padding: 6px 8px;
  27         // `@box-shadow-color-transparent` necessary for smooth transition.
  28         box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
  29         font-family: inherit;
  30         font-size: inherit;
  31         line-height: 1.28571429em;
  32         vertical-align: middle;
  33
  34         // Normalize & style placeholder text, see T139034
  35         .mixin-placeholder( {
  36                 color: @color-placeholder;
  37                 opacity: @opacity-base;
  38         } );
  39
  40         // Firefox: Remove red outline when `required` attribute set and invalid content.
  41         // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
  42         // This should come before `:focus` so latter rules take preference.
  43         &:invalid {
  44                 box-shadow: none;
  45         }
  46
  47         &:not( :disabled ) {
  48                 background-color: @background-color-base;
  49                 color: @color-emphasized;
  50                 border-color: @border-color-base;
  51                 transition-property: @transition-property-base;
  52                 transition-duration: @transition-duration-medium;
  53
  54                 &:hover {
  55                         border-color: @border-color-input--hover;
  56                 }
  57
  58                 &:focus {
  59                         border-color: @border-color-progressive--focus;
  60                         box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
  61                         outline: @outline-base--focus;
  62                 }
  63         }
  64
  65         &:disabled {
  66                 background-color: @background-color-disabled-subtle;
  67                 color: @color-disabled;
  68                 border-color: @border-color-disabled;
  69         }
  70
  71         // Normalize styling for `<input type="search">`
  72         &[ type='search' ] {
  73                 // Support: Safari/iOS `none` needed, Chrome would accept `textfield` as well.
  74                 -webkit-appearance: none;
  75                 // Support: Firefox.
  76                 -moz-appearance: textfield;
  77
  78                 // Remove proprietary clear button in IE 10-11, Edge 12+
  79                 &::-ms-clear {
  80                         display: none;
  81                 }
  82
  83                 // Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X
  84                 &::-webkit-search-cancel-button,
  85                 &::-webkit-search-decoration {
  86                         -webkit-appearance: none;
  87                 }
  88         }
  89 }
  90
  91 textarea.mw-ui-input {
  92         min-height: 8em;
  93 }
  94
  95 // mw-ui-input-inline
  96 //
  97 // Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input.
  98 //
  99 // Markup:
 100 // <input class="mw-ui-input mw-ui-input-inline">
 101 // <button class="mw-ui-button mw-ui-progressive">Submit</button>
 102 .mw-ui-input-inline {
 103         display: inline-block;
 104         width: auto;
 105         // Make sure we limit `width` to parent element because
 106         // in case of text `input` fields, `width: auto;` equals `size` attribute.
 107         max-width: 100%;
 108 }
 109
 110 // mw-ui-input-large
 111 //
 112 // Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you
 113 // want to draw attention to one instance. For example, replying with a subject line and more text.
 114 // Currently in draft status and subject to change. When used on an input field, the text is styled
 115 // in a large font. When used alongside another mw-ui-input large they are pushed together to form one
 116 // contiguous block.
 117 //
 118 // Markup:
 119 // <input value="input" class="mw-ui-input mw-ui-input-large" value="input" placeholder="Enter subject">
 120 // <textarea class="mw-ui-input mw-ui-input-large" placeholder="Provide additional details"></textarea>
 121 .mw-ui-input-large {
 122         margin-top: 0;
 123         margin-bottom: 0;
 124
 125         // When two large inputs are together, we make them flush by hiding one of the borders
 126         & + .mw-ui-input-large {
 127                 margin-top: -@position-offset-border-width-base;
 128         }
 129         // When focusing, make the input relative to raise it above any attached inputs to unhide its borders
 130         &:focus {
 131                 position: relative;
 132         }
 133 }
 134
 135 input.mw-ui-input-large {
 136         padding: 8px;
 137         font-size: 1.75em;
 138         font-weight: bold;
 139         line-height: 1.25em;
 140 }