diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components')
| -rw-r--r-- | resources/src/mediawiki.ui/components/buttons.less | 16 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/checkbox.less | 3 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/icons.less | 33 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/images/ok.png | bin | 442 -> 0 bytes | |||
| -rw-r--r-- | resources/src/mediawiki.ui/components/images/ok.svg | 1 |
5 files changed, 15 insertions, 38 deletions
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index f88f3ee6..77b3f9d8 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -47,7 +47,7 @@ zoom: 1; // Container styling - .button-colors(#FFF); + .button-colors(#FFF, #CCC, #777); border-radius: @borderRadius; min-width: 4em; @@ -135,10 +135,10 @@ // Styleguide 2.1.1. &.mw-ui-progressive, &.mw-ui-primary { - .button-colors(@colorProgressive); + .button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive); &.mw-ui-quiet { - .button-colors-quiet(@colorProgressive); + .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive); } } @@ -158,10 +158,10 @@ // // Styleguide 2.1.2. &.mw-ui-constructive { - .button-colors(@colorConstructive); + .button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive); &.mw-ui-quiet { - .button-colors-quiet(@colorConstructive); + .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive); } } @@ -180,10 +180,10 @@ // // Styleguide 2.1.3. &.mw-ui-destructive { - .button-colors(@colorDestructive); + .button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive); &.mw-ui-quiet { - .button-colors-quiet(@colorDestructive); + .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive); } } @@ -220,7 +220,7 @@ background: transparent; border: none; text-shadow: none; - .button-colors-quiet(@colorButtonText); + .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive); &:hover, &:focus { diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less index 4829f5f6..ac5becb8 100644 --- a/resources/src/mediawiki.ui/components/checkbox.less +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -54,6 +54,9 @@ // 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; + // Render "on top of" the label, so that it's still clickable (T98905) + z-index: 1; + position: relative; // ensure the invisible checkbox takes up the required width width: @checkboxSize; height: @checkboxSize; diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less index ad951b08..d9e8c420 100644 --- a/resources/src/mediawiki.ui/components/icons.less +++ b/resources/src/mediawiki.ui/components/icons.less @@ -1,13 +1,9 @@ @import "mediawiki.mixins"; - -// Variables -@iconSize: 1.4em; -@gutterWidth: 1em; +@import "mediawiki.ui/variables"; // Mixins .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) { &.mw-ui-icon { - &:after, &:before { .background-image-svg(@iconSvg, @iconPng); } @@ -42,7 +38,7 @@ // // Styleguide 6.1.1. &.mw-ui-icon-element { - @width: @iconSize + ( 2 * @gutterWidth ); + @width: @iconSize + ( 2 * @iconGutterWidth ); text-indent: -999px; overflow: hidden; @@ -53,11 +49,10 @@ left: 0; right: 0; position: absolute; - margin: 0 @gutterWidth; + margin: 0 @iconGutterWidth; } } - &.mw-ui-icon-after:after, &.mw-ui-icon-before:before, &.mw-ui-icon-element:before { background-position: 50% 50%; @@ -81,27 +76,7 @@ &: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; + margin-right: @iconGutterWidth; } } } - -// 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/ok.png b/resources/src/mediawiki.ui/components/images/ok.png Binary files differdeleted file mode 100644 index 1ea6aa2d..00000000 --- a/resources/src/mediawiki.ui/components/images/ok.png +++ /dev/null diff --git a/resources/src/mediawiki.ui/components/images/ok.svg b/resources/src/mediawiki.ui/components/images/ok.svg deleted file mode 100644 index a3d3058a..00000000 --- a/resources/src/mediawiki.ui/components/images/ok.svg +++ /dev/null @@ -1 +0,0 @@ -<?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> |
