diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components/inputs.less')
| -rw-r--r-- | resources/src/mediawiki.ui/components/inputs.less | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less new file mode 100644 index 00000000..1da42a45 --- /dev/null +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -0,0 +1,126 @@ +// Inputs + +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; +@import "mediawiki.ui/mixins"; + +// Placeholder text styling helper +.field-placeholder-styling() { + font-style: italic; + font-weight: normal; +} +// Inputs +// +// Apply the mw-ui-input class to input and textarea fields. +// +// Styleguide 1. + +// mw-ui-input +// +// Style an input using MediaWiki UI. +// Currently in draft status and subject to change. +// When focused a progressive highlight appears to the left of the field. +// +// Markup: +// <input class="mw-ui-input" placeholder="Enter your name"> +// <textarea class="mw-ui-input">Text here</textarea> +// +// Styleguide 1.1. +.mw-ui-input { + // turn off default input styling for input[type="search"] fields + -webkit-appearance: none; + border: 1px solid @colorFieldBorder; + .box-sizing(border-box); + width: 100%; + padding: .4em .3em .2em .6em; + display: block; + vertical-align: middle; + border-radius: @borderRadius; + // Override user agent stylesheet properties. Instead use parent element. + color: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + .transition(~"border linear .2s, box-shadow linear .2s"); + + // Placeholder text styling must be set individually for each browser @winter + &::-webkit-input-placeholder { // webkit + .field-placeholder-styling; + } + &::-moz-placeholder { // FF 4-18 + .field-placeholder-styling; + } + &:-moz-placeholder { // FF >= 19 + .field-placeholder-styling; + } + &:-ms-input-placeholder { // IE >= 10 + .field-placeholder-styling; + } + + // Remove red outline from inputs which have required field and invalid content. + // This is a Firefox only issue + // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid + // This should be above :focus so focus behaviour takes preference + &:invalid { + box-shadow: none; + } + + &:focus { + box-shadow: inset .45em 0 0 @colorProgressive; + border-color: @colorGrayDark; + // Remove focus glow on input[type="search"] + outline: 0; + } +} + +textarea.mw-ui-input { + min-height: 8em; +} + +// mw-ui-input-inline +// +// Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input. +// +// Markup: +// <input class="mw-ui-input mw-ui-input-inline"> +// <button class="mw-ui-button mw-ui-constructive">go</button> +// +// Styleguide 1.2. +input[type="number"], +.mw-ui-input-inline { + display: inline-block; + width: auto; +} + +// mw-ui-input-large +// +// Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you +// want to draw attention to one instance. For example, replying with a subject line and more text. +// Currently in draft status and subject to change. When used on an input field, the text is styled +// in a large font. When used alongside another mw-ui-input large they are pushed together to form one +// contiguous block. +// +// Markup: +// <input value="input" class="mw-ui-input mw-ui-input-large" value="input" placeholder="Enter subject"> +// <textarea class="mw-ui-input mw-ui-input-large" placeholder="Provide additional details"></textarea> +// +// Styleguide 1.3. +.mw-ui-input-large { + margin-top: 0; + margin-bottom: 0; + + // When two large inputs are together, we make them flush by hiding one of the borders + & + .mw-ui-input-large { + margin-top: -1px; + } + // When focusing, make the input relative to raise it above any attached inputs to unhide its borders + &:focus { + position: relative; + } +} + +input.mw-ui-input-large { + font-size: 1.75em; + font-weight: bold; + line-height: 1.25em; +} |