diff options
Diffstat (limited to 'resources/src/mediawiki.ui')
| -rw-r--r-- | resources/src/mediawiki.ui/components/anchors.less | 71 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/buttons.less | 292 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/checkbox.less | 145 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/icons-2.less | 247 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/images/checkbox-checked.svg | 4 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/inputs.less | 141 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/radio.less | 147 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/default.less | 4 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/forms.less (renamed from resources/src/mediawiki.ui/components/forms.less) | 0 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/utilities.less (renamed from resources/src/mediawiki.ui/components/utilities.less) | 0 |
10 files changed, 2 insertions, 1049 deletions
diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less deleted file mode 100644 index 04924a4b1b20..000000000000 --- a/resources/src/mediawiki.ui/components/anchors.less +++ /dev/null @@ -1,71 +0,0 @@ -@import 'mediawiki.mixins.less'; -@import 'mediawiki.ui/variables.less'; - -// Helpers -.mixin-mw-ui-anchor-styles( @mainColor ) { - color: @mainColor; - - &:hover { - color: lighten( @mainColor, @colorLightenPercentage ); - } - - &:focus, - &:active { - color: darken( @mainColor, @colorDarkenPercentage ); - outline: 0; - } - - // Quiet mode is gray at first - &.mw-ui-quiet { - .mixin-mw-ui-anchor-styles-quiet( @mainColor ); - } -} - -/* -Anchors - -The anchor base type can be applied to `a` elements when a basic context styling needs to be given to a link, without -having to assign it as a button type. `.mw-ui-anchor` only changes the text color, and should not be used in combination -with other base classes, such as `.mw-ui-button`. - -Markup: -<a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a> -<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a> - -.mw-ui-quiet - Quiet until interaction. -*/ - -// Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive) -.mw-ui-anchor { - &.mw-ui-progressive { - .mixin-mw-ui-anchor-styles( @color-primary ); - } - - &.mw-ui-destructive { - .mixin-mw-ui-anchor-styles( @color-destructive ); - } -} - -/* -Quiet anchors - -Use quiet anchors when they are less important and alongside other progressive/destructive -anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state. - -Markup: -<a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a> -<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a> -*/ -.mixin-mw-ui-anchor-styles-quiet( @mainColor ) { - color: @color-base; - text-decoration: none; - - &:hover { - color: @mainColor; - } - - &:focus, - &:active { - color: darken( @mainColor, @colorDarkenPercentage ); - } -} diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less deleted file mode 100644 index e63e1d697415..000000000000 --- a/resources/src/mediawiki.ui/components/buttons.less +++ /dev/null @@ -1,292 +0,0 @@ -@import 'mediawiki.mixins.less'; -@import 'mediawiki.ui/mixins.buttons.less'; -@import 'mediawiki.ui/variables.less'; - -/* stylelint-disable selector-class-pattern */ - -// All buttons start with `.mw-ui-button` class, modified by other classes. -// It can be any element. Due to a lack of a CSS reset, the exact styling of -// the button depends on what type of element is used. -// There are two kinds of buttons, the default is a "Call to Action" with an obvious border -// and there is a quiet kind without a border. - -// Neutral button styling -// -// These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet. -// -// Markup: -// <div> -// <button class="mw-ui-button">.mw-ui-button</button> -// </div> -// <div> -// <button class="mw-ui-button" disabled>.mw-ui-button</button> -// </div> -.mw-ui-button { - background-color: @colorGray15; - color: @color-base; - .mw-ui-button(); - .mw-ui-button-states(); - - &.mw-ui-icon-element { - &:not( .mw-ui-icon-with-label-desktop ) { - // stylelint-disable-next-line declaration-no-important - color: transparent !important; - - span { - .mixin-screen-reader-text(); - } - } - - @media all and ( max-width: @width-breakpoint-desktop ) { - &.mw-ui-icon-with-label-desktop { - // stylelint-disable-next-line declaration-no-important - color: transparent !important; - } - - span { - .mixin-screen-reader-text(); - } - } - } - - // Styling for specific button types - // ----------------------------------------- - - // Quiet buttons - // - // Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow. - // Its use is not recommended on mobile/tablet due to lack of hover state. - // - // Markup: - // <div> - // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button> - // </div> - &.mw-ui-quiet, - &.mw-ui-quiet.mw-ui-progressive, - &.mw-ui-quiet.mw-ui-destructive { - background-color: transparent; - // Quiet buttons all start gray, and reveal - // progressive/destructive color on hover and active. - color: @color-base; - border-color: transparent; - font-weight: bold; - - &:not( .mw-ui-icon-element ) { - min-height: 32px; - } - - // If a sibling element is a checklist, the state should also apply to the button. - input[ type='checkbox' ]:hover + &, - &:hover { - background-color: @background-color-quiet--hover; - color: @color-base; - border-color: transparent; - } - - input[ type='checkbox' ]:focus + &, - &:focus { - color: @color-base; - border-color: @border-color-base--focus; - box-shadow: @box-shadow-primary--focus; - } - - input[ type='checkbox' ]:active + &, - &:active { - background-color: @background-color-quiet--active; - color: @color-base--active; - border-color: @colorGray7; - box-shadow: none; - } - - &:disabled, - &:disabled:hover, - &:disabled:active { - background-color: transparent; - color: @color-base--disabled; - border-color: transparent; - } - } - - // Progressive buttons - // - // Use progressive buttons for actions which lead to a next step in the process. - // - // Markup: - // <div> - // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button> - // </div> - &.mw-ui-progressive { - .mw-ui-button-colors-primary( @color-primary, @color-primary--hover, @color-primary--active ); - - &.mw-ui-quiet { - color: @color-primary; - background-color: transparent; - border-color: transparent; - - input[ type='checkbox' ]:hover + &, - &:hover { - background-color: @background-color-primary--hover; - border-color: transparent; - color: @color-primary--hover; - } - - input[ type='checkbox' ]:focus + &, - &:focus { - color: @color-primary--focus; - border-color: @color-primary--focus; - } - - input[ type='checkbox' ]:active + &, - &:active { - color: @color-base--inverted; - background-color: @color-primary--active; - border-color: @color-primary--active; - } - } - } - - // Destructive buttons - // - // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user. - // This should not be used for cancel buttons. - // - // Markup: - // <div> - // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button> - // </div> - &.mw-ui-destructive { - .mw-ui-button-colors-primary( @color-destructive, @color-destructive--hover, @color-destructive--active ); - - &.mw-ui-quiet { - color: @color-destructive; - background-color: transparent; - border-color: transparent; - - input[ type='checkbox' ]:hover + &, - &:hover { - background-color: @background-color-destructive--hover; - border-color: transparent; - color: @color-destructive--hover; - } - - input[ type='checkbox' ]:focus + &, - &:focus { - color: @color-destructive; - border-color: @color-destructive--focus; - } - - input[ type='checkbox' ]:active + &, - &:active { - color: @color-base--inverted; - background-color: @color-destructive--active; - border-color: @color-destructive--active; - } - } - } - - // Big buttons - // - // Not all buttons are equal. You can emphasise certain actions over others - // using the mw-ui-big class. - // - // Markup: - // <div> - // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button> - // </div> - &.mw-ui-big { - font-size: 1.3em; - } - - // Block buttons - // - // Some buttons might need to be stacked. - // - // Markup: - // <div> - // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button> - // </div> - // <div> - // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button> - // </div> - &.mw-ui-block { - display: block; - width: 100%; - margin-left: auto; - margin-right: auto; - } -} - -a.mw-ui-button { - text-decoration: none; - - // This overrides an underline declaration on a:hover and a:focus in - // commonElements.css, which the class alone isn't specific enough to do. - &:hover, - &:focus { - text-decoration: none; - } -} - -// Button groups -// -// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group. -// -// Markup: -// <div class="mw-ui-button-group"> -// <div class="mw-ui-button is-on">A</div> -// <div class="mw-ui-button">B</div> -// <div class="mw-ui-button">C</div> -// <div class="mw-ui-button">D</div> -// </div><div style="clear:both"></div> -.mw-ui-button-group { - & > * { - min-width: 48px; - border-radius: 0; - float: left; - - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - - &:not( :first-child ) { - border-left: 0; - } - - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } - - & .is-on .button { - cursor: default; - } -} diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less deleted file mode 100644 index 79de87d68766..000000000000 --- a/resources/src/mediawiki.ui/components/checkbox.less +++ /dev/null @@ -1,145 +0,0 @@ -@import 'mediawiki.mixins.less'; -@import 'mediawiki.ui/variables.less'; - -// Checkbox -// -// Styling checkboxes in a way that works cross browser is a tricky problem to solve. -// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div. -// You should give the checkbox and label matching `id` and `for` attributes, respectively. -// -// Markup: -// <div class="mw-ui-checkbox"> -// <input type="checkbox" id="component-example-3"> -// <label for="component-example-3">Standard checkbox</label> -// </div> -// <div class="mw-ui-checkbox"> -// <input type="checkbox" id="component-example-3-checked" checked> -// <label for="component-example-3-checked">Standard checked checkbox</label> -// </div> -// <div class="mw-ui-checkbox"> -// <input type="checkbox" id="component-example-3-disabled" disabled> -// <label for="component-example-3-disabled">Disabled checkbox</label> -// </div> -// <div class="mw-ui-checkbox"> -// <input type="checkbox" id="component-example-3-disabled-checked" disabled checked> -// <label for="component-example-3-disabled-checked">Disabled checked checkbox</label> -// </div> -.mw-ui-checkbox { - display: table; - // Position relatively so we can make use of absolute pseudo elements - position: relative; - line-height: @size-input-binary; - vertical-align: middle; - - * { - // Reset font sizes, see T74727 - font-size: inherit; - vertical-align: middle; - } - - [ type='checkbox' ] { - display: table-cell; - position: relative; - // Ensure the invisible input takes up the required `width` & `height` - width: @size-input-binary; - height: @size-input-binary; - // Support: Firefox mobile to override user-agent stylesheet, see T73750 - max-width: none; - // Hide `input[type=checkbox]` and instead style the label that follows - // Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the checkbox - opacity: 0; - // Render *on top of* the label, so that it's still clickable, see T98905 - z-index: 1; - - & + label { - display: table-cell; - padding-left: 0.4em; - } - - // Pseudo `:before` element of the label after the checkbox now looks like a checkbox - & + label:before { - content: ''; - background-color: #fff; - background-origin: border-box; - background-position: center center; - background-repeat: no-repeat; - background-size: 0 0; - .box-sizing( border-box ); - position: absolute; - // Ensure alignment of checkbox to middle of the text in long labels, see T85241 - top: 50%; - left: 0; - width: @size-input-binary; - height: @size-input-binary; - margin-top: -( @size-input-binary / 2 ); - border: 1px solid @colorGray7; - border-radius: @border-radius-base; - } - - // Apply a checkmark on the pseudo `:before` element when the input is checked. - &:checked + label:before { - background-image: url( images/checkbox-checked.svg ); - background-size: 90% 90%; - } - - &:enabled { - cursor: pointer; - - & + label { - cursor: pointer; - } - - & + label:before { - cursor: pointer; - .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' ); - } - - // `:focus` has to come first, otherwise a specificity race with `:hover:focus` etc is necessary - &:focus + label:before { - border-color: @border-color-base--focus; - box-shadow: @box-shadow-base--focus; - } - - &:hover + label:before { - // FIXME: Replace with WikimediaUI Base `@border-color*` var when available. - border-color: @color-primary--hover; - } - - &:active + label:before { - background-color: @background-color-input-binary--active; - border-color: @border-color-input-binary--active; - box-shadow: @box-shadow-input-binary--active; - } - - &:checked { - & + label:before { - background-color: @background-color-input-binary--checked; - border-color: @border-color-input-binary--checked; - } - - &:focus + label:before { - background-color: @background-color-input-binary--checked; - border-color: @border-color-input-binary--checked; - box-shadow: @box-shadow-primary--focus; - } - - &:hover + label:before { - // FIXME: Replace with WikimediaUI Base vars when available. - background-color: @color-primary--hover; - border-color: @color-primary--hover; - } - - &:active + label:before { - background-color: @background-color-input-binary--active; - border-color: @border-color-input-binary--active; - } - } - } - - // disabled checkboxes have a gray background - &:disabled + label:before { - background-color: @colorGray12; - border-color: @colorGray12; - } - } -} diff --git a/resources/src/mediawiki.ui/components/icons-2.less b/resources/src/mediawiki.ui/components/icons-2.less deleted file mode 100644 index 4eddda9b2157..000000000000 --- a/resources/src/mediawiki.ui/components/icons-2.less +++ /dev/null @@ -1,247 +0,0 @@ -/** -* MediaWiki UI icons specification 2.0 -* -* Applies the MinervaNeue icon styles, adding more mobile-friendly -* features like increased touch-area sizes and highlights. -* -* - mw-ui-icon = base class. 20px square with icon. -* - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states. -* - mw-ui-icon + mw-ui-icon-small = small icon with padding & pseudo-states. -* - mw-ui-icon + mw-ui-icon-flush-left = negative right-margin. -* - mw-ui-icon + mw-ui-icon-flush-right = negative left-margin. -* - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text. -* Labels should be placed in a separate element beside the icon. -* -*/ - -@import 'mediawiki.ui/variables.less'; -@import 'mediawiki.mixins.less'; - -// == Icons == -@icon-touch-area-sm: 34; -@icon-touch-area-md: 44; -@font-size-browser: 16; // Assumed browser default of `16px`. -// Small icon -@icon-glyph-size-sm: 16; -@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em ); -@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em ); -// Medium icon -@icon-glyph-size-md: 20; -@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em ); -@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em ); -// Colors -@icon-color: @colorGray5; -@margin-icon-md-labelled: 8px; -@icon-background-color--selected: rgba( 0, 0, 0, 0.03 ); - -/** -* Mixin for a pseudo-element with a background image. -*/ -.mixin-background-square( @size ) { - // Sizing properties - content: ''; - display: block; - width: 100%; - height: 100%; - // In case display: block is overridden and display gets set to `flex` - // because of inheritance T233521. - min-width: @size; - min-height: @size; - - // Background properties. - background-repeat: no-repeat; - // Using static value instead of `background-size: contain` because of T233521#5545513. - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - background-size: @size @size; - background-position: center; -} - -/** -* A standalone 20px square with screen-reader text. Contains a :before element -* to house the icon as a background image. Total size is increased with padding via -* `box-sizing: content-box`. This separates control over size of icon vs the size of -* the touch-area. -*/ -.mw-ui-icon { - // reset font-size so the "em" value is relative to the more - // predictable rem font size ...and no rems because we can't have nice things. - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - font-size: initial; - - // sizing - position: relative; - display: inline-block; - - // this is important for increasing the size via padding. Overrides `.view-border-box *`. - // stylelint-disable-next-line declaration-no-important - box-sizing: content-box !important; - width: @icon-size-md; - height: @icon-size-md; - - // Guarding against flex-box variability. - min-width: @icon-size-md; - min-height: @icon-size-md; - flex-basis: @icon-size-md; - - // alignment - vertical-align: middle; - line-height: 0; - - // Overflow ellipsis. - .text-overflow( @visible: false ); - - // resetting styles for <button> elements - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - -moz-appearance: none; - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - -webkit-appearance: none; - background-color: transparent; - margin: 0; - padding: 0; - - &:not( .mw-ui-button ) { - border: 0; - } - - &:before { - .mixin-background-square( @icon-size-md ); - } - - & + span { - // Margin is added to separate accompanying text. - margin-left: @margin-icon-md-labelled; - } -} - -/** -* When aligning a series of similar icons (e.g. list items) -* prefer using a `:first-child` or `:last-child` selector. -* The flush-left/right classes are appropriate when that's unavailable. -*/ -.mw-ui-icon-flush-top { - margin-top: -@icon-padding-md; -} - -.mw-ui-icon-flush-left { - margin-left: -@icon-padding-md; -} - -.mw-ui-icon-flush-right { - margin-right: -@icon-padding-md; -} - -.mw-ui-icon-element { - border-radius: @border-radius-base; - padding: @icon-padding-md; - // Use semi-colon if multiple arguments are needed! - // See https://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments - .transition( background-color @transition-duration-base; ); - - // Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text. - color: transparent; - - &:focus, - &:active, - &:visited { - color: transparent; - } - - // Assume a mobile device - and avoid tap state remaining after click (T233046). - &:active { - background-color: @icon-background-color--selected; - } -} - -// When the user's device primary input is capable of hover, like a mouse, -// use hover (T233046). Only on active elements. -@media ( hover: hover ) { - // stylelint-disable-next-line selector-class-pattern - .mw-ui-icon-element:not( .disabled ):hover { - background-color: @icon-background-color--selected; - } -} - -.mw-ui-icon-small { - width: @icon-size-sm; - height: @icon-size-sm; - min-width: @icon-size-sm; - min-height: @icon-size-sm; - flex-basis: @icon-size-sm; - line-height: @icon-size-sm; - - &:before { - .mixin-background-square( @icon-size-sm ); - } -} - -.mw-ui-icon-small.mw-ui-icon-element { - padding: @icon-padding-sm; -} - -.mw-ui-icon-small.mw-ui-icon-flush-left { - margin-left: -@icon-padding-sm; -} - -.mw-ui-icon-small.mw-ui-icon-flush-right { - margin-right: -@icon-padding-sm; -} - -.mw-ui-icon-small.mw-ui-icon-before:before { - min-width: @icon-size-sm; - min-height: @icon-size-sm; - margin-right: @icon-padding-sm; -} - -.mw-ui-icon-before { - width: auto; - max-width: 100%; - - &:before { - // sizing - display: inline-block; - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - font-size: initial; - width: auto; - min-width: @icon-size-md; - min-height: @icon-size-md; - - // alignment. Margin is added to separate accompanying text. - margin-right: @margin-icon-md-labelled; - vertical-align: middle; - } - - span { - vertical-align: middle; - } -} - -@media all and ( min-width: @width-breakpoint-desktop ) { - .mw-ui-icon-with-label-desktop { - // stylelint-disable-next-line declaration-no-important - color: @icon-color !important; - width: auto; - line-height: inherit; - flex-basis: auto; - // Special case outside of standard buttons styling due to surrounding - // interface elements, see T237019. - // stylelint-disable-next-line declaration-no-important - font-weight: 500 !important; - - &:hover, - &:focus, - &:active, - &:visited { - color: @icon-color; - text-decoration: none; - } - - &:before { - width: auto; - display: inline-block; - // Don't use `@icon-padding-md` as we are adjacent to text. - margin-right: @margin-icon-md-labelled; - // Seems to be more visually centered than `middle`. - vertical-align: text-bottom; - } - } -} diff --git a/resources/src/mediawiki.ui/components/images/checkbox-checked.svg b/resources/src/mediawiki.ui/components/images/checkbox-checked.svg deleted file mode 100644 index 3ecbd1a1034c..000000000000 --- a/resources/src/mediawiki.ui/components/images/checkbox-checked.svg +++ /dev/null @@ -1,4 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <path fill="#fff" d="M17 7.5 9.5 15 6 11.5 4.5 13l5 5L20 7.5c-.706-.706-2.294-.706-3 0z"/> -</svg> diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less deleted file mode 100644 index 20a250c0b291..000000000000 --- a/resources/src/mediawiki.ui/components/inputs.less +++ /dev/null @@ -1,141 +0,0 @@ -// Inputs - -@import 'mediawiki.mixins.less'; -@import 'mediawiki.ui/variables.less'; - -// Text inputs -// -// Apply the mw-ui-input class to input and textarea fields. - -// 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> -.mw-ui-input { - background-color: @background-color-base; - color: @color-base--emphasized; - .box-sizing( border-box ); - display: block; - width: 100%; - border: @border-base; - border-radius: @border-radius-base; - padding: 6px 8px; - // necessary for smooth transition - box-shadow: @box-shadow-base; - font-family: inherit; - font-size: inherit; - line-height: 1.28571429em; - vertical-align: middle; - - // Normalize & style placeholder text, see T139034 - .mixin-placeholder( { - color: @color-placeholder; - opacity: 1; - } ); - - // Firefox: Remove red outline when `required` attribute set and invalid content. - // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid - // This should come before `:focus` so latter rules take preference. - &:invalid { - box-shadow: none; - } - - &:hover { - border-color: @colorGray7; - } - - &:focus { - border-color: @border-color-base--focus; - box-shadow: @box-shadow-base--focus; - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - outline: 0; - } - - // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9. - &:not( :disabled ) { - .transition( ~'color 100ms, border-color 100ms, box-shadow 100ms' ); - } - - &:disabled { - border-color: @colorGray14; - color: @colorGray12; - } - - // Normalize styling for `<input type="search">` - &[ type='search' ] { - // Support: Safari/iOS `none` needed, Chrome would accept `textfield` as well. - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - -webkit-appearance: none; - // Support: Firefox. - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - -moz-appearance: textfield; - - // Remove proprietary clear button in IE 10-11, Edge 12+ - &::-ms-clear { - display: none; - } - - // Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ - -webkit-appearance: none; - } - } -} - -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-progressive">Submit</button> -.mw-ui-input-inline { - display: inline-block; - width: auto; - // Make sure we limit `width` to parent element because - // in case of text `input` fields, `width: auto;` equals `size` attribute. - max-width: 100%; -} - -// 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> -.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 { - padding: 8px; - font-size: 1.75em; - font-weight: bold; - line-height: 1.25em; -} diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less deleted file mode 100644 index d2318063c436..000000000000 --- a/resources/src/mediawiki.ui/components/radio.less +++ /dev/null @@ -1,147 +0,0 @@ -@import 'mediawiki.mixins.less'; -@import 'mediawiki.ui/variables.less'; - -// Radio -// -// Styling radios in a way that works cross browser is a tricky problem to solve. -// In MediaWiki UI put a radio and label inside a mw-ui-radio div. -// You should give the radio and label matching "id" and "for" attributes, respectively. -// -// Markup: -// <div class="mw-ui-radio"> -// <input type="radio" id="component-example-4" name="component-example-4"> -// <label for="component-example-4">Standard radio</label> -// </div> -// <div class="mw-ui-radio"> -// <input type="radio" id="component-example-4-checked" name="component-example-4" checked> -// <label for="component-example-4-checked">Standard checked radio</label> -// </div> -// <div class="mw-ui-radio"> -// <input type="radio" id="component-example-4-disabled" name="component-example-4-disabled" disabled> -// <label for="component-example-4-disabled">Disabled radio</label> -// </div> -// <div class="mw-ui-radio"> -// <input type="radio" id="component-example-4-disabled-checked" name="component-example-4-disabled" disabled checked> -// <label for="component-example-4-disabled-checked">Disabled checked radio</label> -// </div> -.mw-ui-radio { - display: inline-block; - vertical-align: middle; -} - -// We disable this styling on JavaScript disabled devices. This fixes the issue with -// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other -// more capable browsers with unstyled radio buttons. -.client-js .mw-ui-radio { - // Position relatively so we can make use of absolute pseudo elements - position: relative; - line-height: @size-input-binary; - - * { - // reset font sizes (see T74727) - font-size: inherit; - vertical-align: middle; - } - - [ type='radio' ] { - // ensure the invisible radio takes up the required width - width: @size-input-binary; - height: @size-input-binary; - // This is needed for Firefox mobile (See T73750 to workaround default Firefox stylesheet) - max-width: none; - // Hide `input[ type=radio ]` and instead style the label that follows - // Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the radio - opacity: 0; - - & + label { - padding-left: 0.4em; - - // Pseudo `:before` element of the label after the radio now looks like a radio - &:before { - content: ''; - background-color: #fff; - .box-sizing( border-box ); - position: absolute; - left: 0; - width: @size-input-binary; - height: @size-input-binary; - border: 1px solid @colorGray7; - border-radius: 100%; - } - - // Needed for `:focus` state's inner white circle - &:after { - content: ' '; - position: absolute; - top: 2px; // `px` unit due to pixel rounding error when using `@size-input-binary / 4` - left: 2px; - width: 1.14285em; // equals `@size-input-binary - 4px` - height: 1.14285em; - border: 1px solid transparent; - border-radius: 100%; - } - } - - // Apply a dot on the pseudo `:before` element when the input is checked - &:checked + label:before { - border-width: @border-width-radio--checked; - } - - &:enabled { - cursor: pointer; - - & + label:before { - cursor: pointer; - .transition( ~'background-color 100ms, color 100ms, border-color 100ms' ); - } - - &:hover + label:before { - // FIXME: Replace with WikimediaUI Base `@border-color*` var when available. - border-color: @color-primary; - } - - &:active + label:before { - // FIXME: Replace with WikimediaUI Base `@background-color*` var when available. - background-color: @color-primary--active; - border-color: @border-color-input-binary--active; - } - - &:checked { - & + label:before { - border-color: @border-color-input-binary--checked; - } - - &:focus + label:after { - border-color: #fff; - } - - &:hover + label:before { - // FIXME: Replace with WikimediaUI Base `@border-color*` var when available. - border-color: @color-primary--hover; - } - - &:active { - & + label:before { - border-color: @border-color-input-binary--active; - box-shadow: @box-shadow-input-binary--active; - } - - & + label:after { - border-color: @border-color-input-binary--active; - } - } - } - } - - &:disabled { - & + label:before { - background-color: @colorGray12; - border-color: @colorGray12; - } - - &:checked + label:before { - background-color: #fff; - } - } - } -} diff --git a/resources/src/mediawiki.ui/default.less b/resources/src/mediawiki.ui/default.less index 852d1a29f1ed..d39a97b5fe9a 100644 --- a/resources/src/mediawiki.ui/default.less +++ b/resources/src/mediawiki.ui/default.less @@ -1,2 +1,2 @@ -@import 'components/forms'; -@import 'components/utilities'; +@import './forms'; +@import './utilities'; diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/forms.less index 5b5ce295aa1e..5b5ce295aa1e 100644 --- a/resources/src/mediawiki.ui/components/forms.less +++ b/resources/src/mediawiki.ui/forms.less diff --git a/resources/src/mediawiki.ui/components/utilities.less b/resources/src/mediawiki.ui/utilities.less index 0bbb440f3fa7..0bbb440f3fa7 100644 --- a/resources/src/mediawiki.ui/components/utilities.less +++ b/resources/src/mediawiki.ui/utilities.less |
