summaryrefslogtreecommitdiff
path: root/resources/src/mediawiki.ui/components
diff options
context:
space:
mode:
Diffstat (limited to 'resources/src/mediawiki.ui/components')
-rw-r--r--resources/src/mediawiki.ui/components/buttons.less16
-rw-r--r--resources/src/mediawiki.ui/components/checkbox.less3
-rw-r--r--resources/src/mediawiki.ui/components/icons.less33
-rw-r--r--resources/src/mediawiki.ui/components/images/ok.pngbin442 -> 0 bytes
-rw-r--r--resources/src/mediawiki.ui/components/images/ok.svg1
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
deleted file mode 100644
index 1ea6aa2d..00000000
--- a/resources/src/mediawiki.ui/components/images/ok.png
+++ /dev/null
Binary files differ
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>