diff options
Diffstat (limited to 'resources/src/mediawiki.ui')
17 files changed, 414 insertions, 110 deletions
diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less index e1b258dd..f0fb7b95 100644 --- a/resources/src/mediawiki.ui/components/anchors.less +++ b/resources/src/mediawiki.ui/components/anchors.less @@ -3,13 +3,8 @@ @import "mediawiki.ui/mixins"; // Helpers -.mw-ui-anchor( @mainColor ) { - // Make all context classes take the main color in IE6 - .select-ie6-only& { - &:link, &:visited, &:hover, &:focus, &:active { - color: @mainColor; - } - } +.mixin-mw-ui-anchor-styles( @mainColor ) { + color: @mainColor; // Hover state &:hover { @@ -21,57 +16,65 @@ outline: none; // outline fix } - color: @mainColor; - // Quiet mode is gray at first &.mw-ui-quiet { - .mw-ui-anchor-quiet( @mainColor ); + .mixin-mw-ui-anchor-styles-quiet( @mainColor ); } } -.mw-ui-anchor-quiet( @mainColor ) { - color: @colorTextLight; - text-decoration: none; +/* +Anchors - &:hover { - color: @mainColor; - } - &:focus, &:active { - color: darken( @mainColor, @colorDarkenPercentage ); - } -} +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. -/* -Text & Anchors +Markup: +<a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a> +<a href="#" class="mw-ui-anchor mw-ui-constructive">Constructive</a> +<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a> -Allows you to give text a context as to the type of action it is indicating. +.mw-ui-quiet - Quiet until interaction. -Styleguide 6. +Styleguide 6.2. */ +// Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive) +.mw-ui-anchor { + &.mw-ui-progressive { + .mixin-mw-ui-anchor-styles( @colorProgressive ); + } + + &.mw-ui-constructive { + .mixin-mw-ui-anchor-styles( @colorConstructive ); + } + + &.mw-ui-destructive { + .mixin-mw-ui-anchor-styles( @colorDestructive ); + } +} + /* -Guidelines +Quiet anchors -This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context. +Use quiet anchors when they are less important and alongside other progressive/destructive/progressive +anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state. Markup: -<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a> -<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a> -<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a> +<a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a> +<a href="#" class="mw-ui-anchor mw-ui-constructive mw-ui-quiet">Constructive</a> +<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a> -.mw-ui-quiet - Quiet until interaction. - -Styleguide 6.1. +Styleguide 6.2.1. */ -.mw-ui-progressive { - .mw-ui-anchor( @colorProgressive ); -} -.mw-ui-constructive { - .mw-ui-anchor( @colorConstructive ); -} -.mw-ui-destructive { - .mw-ui-anchor( @colorDestructive ); -} -.mw-ui-quiet { - .mw-ui-anchor-quiet( @colorTextLight ); +.mixin-mw-ui-anchor-styles-quiet( @mainColor ) { + color: @colorTextLight; + 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 index f6a44fd4..f88f3ee6 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -17,6 +17,8 @@ // Neutral button styling // +// These are the main actions on the page/workflow. The page should have only one of progressive, constructive and desctructive buttons, the rest being quiet. +// // Markup: // <div> // <button class="mw-ui-button">.mw-ui-button</button> @@ -47,7 +49,7 @@ // Container styling .button-colors(#FFF); border-radius: @borderRadius; - min-width: 80px; + min-width: 4em; // Ensure that buttons and inputs are nicely aligned when they have differing heights vertical-align: middle; @@ -165,8 +167,7 @@ // Destructive buttons // - // Use destructive buttons for actions which result in the destruction of data. - // e.g. deleting a page. + // 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: @@ -188,7 +189,8 @@ // Quiet buttons // - // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons. + // Use quiet buttons when they are less important and alongside other constructive, 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> @@ -257,6 +259,7 @@ a.mw-ui-button { // // Styleguide 2.2. .mw-ui-button-group > * { + min-width: 48px; border-radius: 0; float: left; diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less index e39646bc..4829f5f6 100644 --- a/resources/src/mediawiki.ui/components/checkbox.less +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -11,27 +11,42 @@ // // Markup: // <div class="mw-ui-checkbox"> -// <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label> +// <input type="checkbox" id="kss-example-3"> +// <label for="kss-example-3">Standard checkbox</label> // </div> // <div class="mw-ui-checkbox"> -// <input type="checkbox" id="kss-example-5-2" disabled><label for="kss-example-5-2">Disabled checkbox</label> +// <input type="checkbox" id="kss-example-3-checked" checked> +// <label for="kss-example-3-checked">Standard checked checkbox</label> +// </div> +// <div class="mw-ui-checkbox"> +// <input type="checkbox" id="kss-example-3-disabled" disabled> +// <label for="kss-example-3-disabled">Disabled checkbox</label> +// </div> +// <div class="mw-ui-checkbox"> +// <input type="checkbox" id="kss-example-3-disabled-checked" disabled checked> +// <label for="kss-example-3-disabled-checked">Disabled checked checkbox</label> // </div> // -// Styleguide 5. +// Styleguide 3. .mw-ui-checkbox { display: inline-block; vertical-align: middle; } -@checkboxSize: 24px; +@checkboxSize: 2em; // We use the not selector to cancel out styling on IE 8 and below -.mw-ui-checkbox:not(#noop) { +// We also 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 checkboxes. +.client-js .mw-ui-checkbox:not(#noop) { // Position relatively so we can make use of absolute pseudo elements position: relative; - line-height: @checkboxSize; + display: table; * { + // reset font sizes (see bug 72727) + font: inherit; vertical-align: middle; } @@ -42,59 +57,70 @@ // ensure the invisible checkbox takes up the required width width: @checkboxSize; height: @checkboxSize; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) + max-width: none; + margin: 0; + margin-right: 0.4em; + display: table-cell; - // the pseudo before element of the label after the checkbox now looks like a checkbox & + label { - cursor: pointer; + display: table-cell; + } - &::before { - content: ''; - position: absolute; - left: 0; - display: inline-block; - border-radius: @borderRadius; - margin-right: 18px; - width: @checkboxSize; - height: @checkboxSize; - background-color: #fff; - border: 1px solid grey; - } + // the pseudo before element of the label after the checkbox now looks like a checkbox + & + label::before { + .transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ); + content: ''; + cursor: pointer; + .box-sizing(border-box); + position: absolute; + left: 0; + border-radius: @borderRadius; + width: @checkboxSize; + height: @checkboxSize; + line-height: @checkboxSize; + background-color: #fff; + border: 1px solid @colorGray7; + // align the checkbox to middle of the text + top: 50%; + margin-top: -1em; + .background-image-svg('images/checked.svg', 'images/checked.png'); + .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em ); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + background-size: 0 0; } // when the input is checked, style the label pseudo before element that followed as a checked checkbox - &:checked { - + label { - &::before { - .background-image-svg('images/checked.svg', 'images/checked.png'); - background-repeat: no-repeat; - background-position: center top; - } - } + &:checked + label::before { + background-size: 100% 100%; + } + + &:active + label::before { + background-color: @colorGray13; + border-color: @colorGray13; } - @focusBottomBorderSize: 3px; - &:active, - &:focus { - + label { - &::after { - content: ''; - position: absolute; - width: @checkboxSize; - height: @checkboxSize - @focusBottomBorderSize + 1; // offset by bottom border - // offset from the checkbox by 1px to account for left border - left: 1px; - border-bottom: solid @focusBottomBorderSize lightgrey; - } - } + &:focus + label::before { + border-width: 2px; } - // disabled checked boxes have a gray background - &:disabled + label { + &:focus:hover + label::before, + &:hover + label::before { + border-bottom-width: 3px; + } + + // disabled checkboxes have a gray background + &:disabled + label::before { cursor: default; + background-color: @colorGray14; + border-color: @colorGray14; + } - &::before { - background-color: lightgrey; - } + // disabled and checked checkboxes have a white circle + &:disabled:checked + label::before { + .background-image-svg('images/checked_disabled.svg', 'images/checked_disabled.png'); } } } diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less index 592a3098..dc49e202 100644 --- a/resources/src/mediawiki.ui/components/forms.less +++ b/resources/src/mediawiki.ui/components/forms.less @@ -15,7 +15,7 @@ // Forms // -// Styleguide 3. +// Styleguide 5. // VForm // @@ -34,7 +34,7 @@ // </div> // </form> // -// Styleguide 3.1. +// Styleguide 5.1. .mw-ui-vform { .box-sizing(border-box); @@ -102,7 +102,7 @@ // </div> // </form> // - // Styleguide 3.2. + // Styleguide 5.2. .error, .errorbox, .warningbox, @@ -153,14 +153,15 @@ // You generally don't need to use this class if <label> is within an Agora // form container such as mw-ui-vform .mw-ui-label { - .agora-label-styling(); // mixins/forms.less + .agora-label-styling(); } // Nesting an input inside a label with this class // improves alignment, e.g. -// <label class="mw-ui-radio-label"> -// <input type="radio">The label text -// </label> +// +// <label class="mw-ui-radio-label"> +// <input type="radio">The label text +// </label> .mw-ui-radio-label { .agora-inline-label-styling(); } diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less new file mode 100644 index 00000000..ad951b08 --- /dev/null +++ b/resources/src/mediawiki.ui/components/icons.less @@ -0,0 +1,107 @@ +@import "mediawiki.mixins"; + +// Variables +@iconSize: 1.4em; +@gutterWidth: 1em; + +// Mixins +.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) { + &.mw-ui-icon { + &:after, + &:before { + .background-image-svg(@iconSvg, @iconPng); + } + } +} + +// Icons +// +// To use icons you must be using a browser that supports pseudo elements. +// This includes support for IE8. +// http://caniuse.com/#feat=css-gencontent +// +// For elements that are intended to have both an icon and text, browsers that +// do not support pseudo-selectors will degrade to text-only. +// +// However, icon-only elements do not yet degrade to text-only elements in these +// browsers. +// +// Styleguide 6. + +.mw-ui-icon { + position: relative; + min-height: @iconSize; + min-width: @iconSize; + + // Standalone icons + // + // Markup: + // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br/> + // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br/> + // <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button> + // + // Styleguide 6.1.1. + &.mw-ui-icon-element { + @width: @iconSize + ( 2 * @gutterWidth ); + + text-indent: -999px; + overflow: hidden; + width: @width; + min-width: @width; + max-width: @width; + &:before { + left: 0; + right: 0; + position: absolute; + margin: 0 @gutterWidth; + } + } + + &.mw-ui-icon-after:after, + &.mw-ui-icon-before:before, + &.mw-ui-icon-element:before { + background-position: 50% 50%; + float: left; + display: block; + background-repeat: no-repeat; + background-size: 100% auto; + min-height: @iconSize; + content: ''; + } + + + // Icons with text + // + // Markup: + // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div> + // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div> + // + // Styleguide 6.1.2 + &.mw-ui-icon-before { + &:before { + position: relative; + width: @iconSize; + margin-right: @gutterWidth; + } + } + + // Icons with text before + // + // Markup: + // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div> + // + // Styleguide 6.1.3 + &.mw-ui-icon-after { + &:after { + position: relative; + float: right; + width: @iconSize; + margin-left: @gutterWidth; + } + } +} + +// Icons +.mw-ui-icon-ok { + .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png'); +} diff --git a/resources/src/mediawiki.ui/components/images/checked.svg b/resources/src/mediawiki.ui/components/images/checked.svg index aea69db4..aca2b2b0 100644 --- a/resources/src/mediawiki.ui/components/images/checked.svg +++ b/resources/src/mediawiki.ui/components/images/checked.svg @@ -1 +1 @@ -<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 12l5 5 11-12" stroke="#00B78C" stroke-width="3" fill="none"/></svg>
\ No newline at end of file +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 12l5 5L20 5" stroke="#00B78C" stroke-width="3" fill="none"/></svg> diff --git a/resources/src/mediawiki.ui/components/images/checked_disabled.png b/resources/src/mediawiki.ui/components/images/checked_disabled.png Binary files differnew file mode 100644 index 00000000..523b880f --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/checked_disabled.png diff --git a/resources/src/mediawiki.ui/components/images/checked_disabled.svg b/resources/src/mediawiki.ui/components/images/checked_disabled.svg new file mode 100644 index 00000000..ba4010ee --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/checked_disabled.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 12l5 5L20 5" stroke="#fff" stroke-width="3" fill="none"/></svg> diff --git a/resources/src/mediawiki.ui/components/images/ok.png b/resources/src/mediawiki.ui/components/images/ok.png Binary files differnew file mode 100644 index 00000000..1ea6aa2d --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/ok.png diff --git a/resources/src/mediawiki.ui/components/images/ok.svg b/resources/src/mediawiki.ui/components/images/ok.svg new file mode 100644 index 00000000..a3d3058a --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/ok.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M18.125 1.813l-10.5 10.75-3.844-3.75L0 12.719l7.72 7.452L22 5.625z" fill="#f0f0f0"/></svg> diff --git a/resources/src/mediawiki.ui/components/images/radio_checked.png b/resources/src/mediawiki.ui/components/images/radio_checked.png Binary files differnew file mode 100644 index 00000000..d5735164 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_checked.png diff --git a/resources/src/mediawiki.ui/components/images/radio_checked.svg b/resources/src/mediawiki.ui/components/images/radio_checked.svg new file mode 100644 index 00000000..c8b9b625 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_checked.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle fill="#00AF89" cx="12" cy="12" r="6"/></svg> diff --git a/resources/src/mediawiki.ui/components/images/radio_disabled.png b/resources/src/mediawiki.ui/components/images/radio_disabled.png Binary files differnew file mode 100644 index 00000000..945b3dde --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_disabled.png diff --git a/resources/src/mediawiki.ui/components/images/radio_disabled.svg b/resources/src/mediawiki.ui/components/images/radio_disabled.svg new file mode 100644 index 00000000..ec8ffe3e --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_disabled.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle fill="#fff" cx="12" cy="12" r="6"/></svg> diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less index 1da42a45..2f761312 100644 --- a/resources/src/mediawiki.ui/components/inputs.less +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -9,7 +9,7 @@ font-style: italic; font-weight: normal; } -// Inputs +// Text inputs // // Apply the mw-ui-input class to input and textarea fields. // @@ -32,16 +32,14 @@ border: 1px solid @colorFieldBorder; .box-sizing(border-box); width: 100%; - padding: .4em .3em .2em .6em; + padding: .3em .3em .3em .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"); + .transition(~"border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)"); // Placeholder text styling must be set individually for each browser @winter &::-webkit-input-placeholder { // webkit @@ -66,11 +64,17 @@ } &:focus { - box-shadow: inset .45em 0 0 @colorProgressive; - border-color: @colorGrayDark; + box-shadow: inset 0 0 0 2px @colorProgressive; + // Color being used to match inset shadow, not semantic reasons + border-color: @colorProgressive; // Remove focus glow on input[type="search"] outline: 0; } + + &:disabled { + border-color: @colorGray14; + color: @colorGray12; + } } textarea.mw-ui-input { @@ -83,7 +87,7 @@ textarea.mw-ui-input { // // Markup: // <input class="mw-ui-input mw-ui-input-inline"> -// <button class="mw-ui-button mw-ui-constructive">go</button> +// <button class="mw-ui-button mw-ui-constructive">Submit</button> // // Styleguide 1.2. input[type="number"], diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less new file mode 100644 index 00000000..1928699b --- /dev/null +++ b/resources/src/mediawiki.ui/components/radio.less @@ -0,0 +1,116 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; + +// 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. +// This renders in all browsers except IE6-8 which do not support the :checked selector; +// these are kept backwards-compatible using the :not(#noop) selector. +// You should give the radio and label matching "id" and "for" attributes, respectively. +// +// Markup: +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4" name="kss-example-4"> +// <label for="kss-example-4">Standard radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4-checked" name="kss-example-4" checked> +// <label for="kss-example-4-checked">Standard checked radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4-disabled" name="kss-example-4-disabled" disabled> +// <label for="kss-example-4-disabled">Disabled radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-4-disabled-checked" name="kss-example-4-disabled" disabled checked> +// <label for="kss-example-4-disabled-checked">Disabled checked radio</label> +// </div> +// +// Styleguide 4. +.mw-ui-radio { + display: inline-block; + vertical-align: middle; +} + +@radioSize: 2em; + +// We use the not selector to cancel out styling on IE 8 and below. +// We also 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:not(#noop) { + // Position relatively so we can make use of absolute pseudo elements + position: relative; + line-height: @radioSize; + + * { + // reset font sizes (see bug 72727) + font: inherit; + vertical-align: middle; + } + + input[type="radio"] { + // we hide the input element as instead we will style the label that follows + // we use opacity so that VoiceOver software can still identify it + opacity: 0; + // ensure the invisible radio takes up the required width + width: @radioSize; + height: @radioSize; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) + max-width: none; + margin-right: 0.4em; + + // the pseudo before element of the label after the radio now looks like a radio + & + label::before { + .transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ); + content: ''; + cursor: pointer; + .box-sizing(border-box); + position: absolute; + left: 0; + border-radius: 100%; + width: @radioSize; + height: @radioSize; + background-color: #fff; + border: 1px solid @colorGray7; + .background-image-svg('images/radio_checked.svg', 'images/radio_checked.png'); + .background-size( @radioSize, @radioSize ); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + background-size: 0 0; + } + + // when the input is checked, style the label pseudo before element that followed as a checked radio + &:checked + label::before { + background-size: 100% 100%; + } + + &:active + label::before { + background-color: @colorGray13; + border-color: @colorGray13; + } + + &:focus + label::before { + border-width: 2px; + } + + &:focus:hover + label::before, + &:hover + label::before { + border-bottom-width: 3px; + } + + // disabled radios have a gray background + &:disabled + label::before { + cursor: default; + background-color: @colorGray14; + border-color: @colorGray14; + } + + // disabled and checked radios have a white circle + &:disabled:checked + label::before { + .background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png'); + } + } +} diff --git a/resources/src/mediawiki.ui/components/text.less b/resources/src/mediawiki.ui/components/text.less new file mode 100644 index 00000000..500d42c4 --- /dev/null +++ b/resources/src/mediawiki.ui/components/text.less @@ -0,0 +1,40 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; +@import "mediawiki.ui/mixins"; + +/* +Text & Anchors + +Allows you to give text a context as to the type of action it is indicating. + +Styleguide 6. +*/ + +/* +Text + +Context classes may be used on elements with only plain-text content with the mw-ui-text base. When the context classes +are used on interactive and block-level elements, the appropriate alternative base type classes should also be used. For +example, mw-ui-anchor with A, or mw-ui-button with buttons. + +Markup: +<span class="mw-ui-text mw-ui-progressive">Progressive</span> +<span class="mw-ui-text mw-ui-constructive">Constructive</span> +<span class="mw-ui-text mw-ui-destructive">Destructive</span> + +Styleguide 6.1. +*/ + +.mw-ui-text { + // The selector order is like this on purpose; IE6 ignores the second selector, + // so we don't want to accidentally apply this color on all mw-ui-CONTEXT classes + .mw-ui-progressive& { + color: @colorProgressive; + } + .mw-ui-constructive& { + color: @colorConstructive; + } + .mw-ui-destructive& { + color: @colorDestructive; + } +}
\ No newline at end of file |
