VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/367437 )
Change subject: Apex theme: Introduce framed button focus indication
......................................................................
Apex theme: Introduce framed button focus indication
Adding visual `:focus` indication to framed ButtonWidgets.
Bug: T94301
Change-Id: Icbd041276699c536201015ab45f6ec5af5f3533d
---
M src/themes/apex/common.less
M src/themes/apex/elements.less
2 files changed, 17 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/37/367437/1
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 7bfe443..337702b 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -39,6 +39,8 @@
@start-frameless: -@padding-horizontal-frameless;
+@border-color-base--focus: #ace;
+
@border-radius-base: 0.25em;
@border-radius-button: 0.3em;
@border-radius-taboption: 0.5em;
@@ -53,6 +55,8 @@
@padding-start-frameless-icon-only: unit( 32 / 16 / 0.8, em );
@padding-bottom-textinput: unit( 8 / 16 / 0.8, em );
+@box-shadow-widget--focus: 0 0 2px 2px #ace;
+
@line-height-base: 1.4;
// Theme animation variables
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index f33458d..bfacb5b 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -127,9 +127,13 @@
.oo-ui-transition( border-color @quick-ease );
.oo-ui-vertical-gradient( #fff, #ddd );
- &:hover,
- &:focus {
+ &:hover {
border-color: #aaa;
+ }
+
+ &:focus {
+ border-color: @border-color-base--focus;
+ box-shadow: @box-shadow-widget--focus;
}
}
@@ -146,6 +150,11 @@
color: #000;
border-color: #c9c9c9;
.oo-ui-vertical-gradient( #ddd, #fff );
+
+ &:focus {
+ border-color: @border-color-base--focus;
+ box-shadow: inset 0 1px 4px 0 rgba( 0, 0, 0,
0.07 ), @box-shadow-widget--focus;
+ }
}
&.oo-ui-iconElement {
@@ -181,8 +190,7 @@
border: 1px solid @progressive-border;
.oo-ui-vertical-gradient(
@progressive-gradient-start, @progressive-gradient-end );
- &:hover,
- &:focus {
+ &:hover {
border-color:
@progressive-border-selected;
}
}
@@ -200,8 +208,7 @@
border: 1px solid @constructive-border;
.oo-ui-vertical-gradient(
@constructive-gradient-start, @constructive-gradient-end );
- &:hover,
- &:focus {
+ &:hover {
border-color:
@constructive-border-selected;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/367437
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icbd041276699c536201015ab45f6ec5af5f3533d
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
