VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/285411
Change subject: MediaWiki theme: Standardize `:focus` states of ButtonWidgets
......................................................................
MediaWiki theme: Standardize `:focus` states of ButtonWidgets
Standardizing `:focus` state by using 2px progressive colors across
board.
Also adding Less variables where useful instead of fixed values and reorder
property mixins in selectors to reflect selector order.
Bug: T115293
Change-Id: If19415bb485c1d214b6a7595c4eda00f27ab4d00
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 22 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/11/285411/1
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 07e107e..8ec1e29 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -16,6 +16,7 @@
@color-progressive: #347bff;
@color-progressive-hover: #2962cc;
@color-progressive-active: #1f4999;
+@color-progressive-focus: @color-progressive;
@color-progressive-fade: #ebf2ff; // equivalents rgba output in `fade(
@color-progressive, 10% )`
@color-destructive: #d11d13;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index df2ff5a..3994421 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -21,7 +21,7 @@
&-frameless {
> .oo-ui-buttonElement-button {
&:focus {
- box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.2
), 0 0 0 1px rgba( 0, 0, 0, 0.2 );
+ box-shadow: inset 0 0 0 1px
@color-progressive-focus, 0 0 0 1px @color-progressive-focus;
outline: 0;
}
@@ -101,18 +101,17 @@
min-width: 1em;
border-radius: @border-radius-default;
position: relative;
-
- &:hover,
- &:focus {
- outline: 0;
- }
-
.oo-ui-transition(
background @transition-ease-quick,
color @transition-ease-quick,
border-color @transition-ease-quick,
box-shadow @transition-ease-quick
);
+
+ &:hover,
+ &:focus {
+ outline: 0;
+ }
}
// Support <input/> from ButtonInputWidget
@@ -166,7 +165,8 @@
}
&:focus {
- box-shadow: inset 0 0 0 1px rgba( 0, 0,
0, 0.2 );
+ border-color: @color-progressive-focus;
+ box-shadow: inset 0 0 0 1px
@color-progressive-focus;
}
}
@@ -184,16 +184,16 @@
&.oo-ui-flaggedElement {
&-progressive {
- .mw-framed-button-colored(
@color-progressive, @color-progressive-fade, @color-progressive-active,
@border-color-progressive-active );
+ .mw-framed-button-colored(
@color-progressive, @color-progressive-fade, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
}
// Deprecated in 0.16.1
&-constructive {
- .mw-framed-button-colored(
@color-progressive, @color-progressive-fade, @color-progressive-active,
@border-color-progressive-active );
+ .mw-framed-button-colored(
@color-progressive, @color-progressive-fade, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
}
&-destructive {
- .mw-framed-button-colored(
@color-destructive, @color-destructive-fade, @color-destructive-active,
@border-color-destructive-active );
+ .mw-framed-button-colored(
@color-destructive, @color-destructive-fade, @color-destructive-active,
@border-color-destructive-active, @color-progressive-focus );
}
}
&.oo-ui-flaggedElement-primary.oo-ui-flaggedElement {
@@ -216,8 +216,7 @@
.mw-frameless-button-colored( @link, @hover, @active ) { // following CSS
Pseudo Classes
> .oo-ui-buttonElement-button {
- &:hover,
- &:focus {
+ &:hover {
> .oo-ui-labelElement-label {
color: @hover;
}
@@ -237,7 +236,7 @@
}
}
-.mw-framed-button-colored( @link, @hover, @active, @border-color-active ) {
+.mw-framed-button-colored( @link, @hover, @active, @border-color-active,
@focus ) {
> .oo-ui-buttonElement-button {
color: @link;
@@ -247,8 +246,8 @@
}
&:focus {
- box-shadow: inset 0 0 0 1px @active;
- border-color: @active;
+ box-shadow: inset 0 0 0 1px @color-progressive-focus;
+ border-color: @color-progressive-focus;
}
}
@@ -262,7 +261,7 @@
&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
background-color: @background-color-active;
- color: #fff;
+ color: @color-default-light;
}
}
}
@@ -274,7 +273,7 @@
border-color: @link;
&:hover {
- background: @hover;
+ background-color: @hover;
border-color: @hover;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index a7e4729..149c724 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -37,6 +37,10 @@
.oo-ui-buttonElement-button {
border-radius: 0;
margin-left: -1px;
+
+ &:focus {
+ z-index: 2;
+ }
}
&:first-child .oo-ui-buttonElement-button {
--
To view, visit https://gerrit.wikimedia.org/r/285411
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If19415bb485c1d214b6a7595c4eda00f27ab4d00
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
