VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/292888
Change subject: MediaWiki theme: Improve UX on ToggleSwitchWidget
......................................................................
MediaWiki theme: Improve UX on ToggleSwitchWidget
Improving user experience on ToggleSwitchWidget by making `off`
state clearer differentiating from `on` state.
Also improving `:active` state by aligning color to WCAG level AA compliant
color.
Bug: T134795
Change-Id: I25e387e33da672455a09252632d174d1dc067405
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
2 files changed, 40 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/88/292888/1
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 1dbe2f5..4c96ac2 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -66,12 +66,13 @@
@transition-ease-out-sine-medium: 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 );
// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
-@background-color-input-binary-active: #ccc;
+@background-color-input-binary-active: #767676;
@size-input-binary: 1.6em;
-@border-input-binary: 1px solid #777;
+@border-input-binary: 1px solid #767676;
@border-color-input-binary-active: @background-color-input-binary-active;
@border-bottom-width-input-binary-hover: 3px;
@border-width-input-binary-focus: 2px;
+@box-shadow-input-binary: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
// Theme mixins
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 1be715e..5c774ec 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1256,7 +1256,6 @@
width: 1.2em;
height: 1.2em;
border-radius: 1.2em;
- background-color: #555;
.oo-ui-transition(
left @transition-ease-quick,
margin-left @transition-ease-quick
@@ -1283,21 +1282,26 @@
}
&.oo-ui-widget-enabled {
- &.oo-ui-toggleWidget-on {
- background-color: @color-progressive;
+ .oo-ui-toggleSwitchWidget-grip {
+ border: @border-input-binary;
+ }
+
+ &:hover {
+ border-color: @color-progressive-hover;
+
+ .oo-ui-toggleSwitchWidget-grip {
+ border-color: @color-progressive-hover;
+ }
+ }
+ &:active,
+ &:active:hover {
+ background-color: @background-color-input-binary-active;
border-color: @color-progressive;
.oo-ui-toggleSwitchWidget-grip {
background-color: @background-color-default;
- box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
- }
- }
- &:hover {
- border-color: @color-progressive-hover;
-
- &.oo-ui-toggleWidget-on {
- background-color: @color-progressive-hover;
- border-color: @color-progressive-hover;
+ border-color: @background-color-default;
+ box-shadow: @box-shadow-input-binary;
}
}
&:focus {
@@ -1305,22 +1309,35 @@
box-shadow: @box-shadow-focus-default;
outline: 0;
- &.oo-ui-toggleWidget-on {
+ .oo-ui-toggleSwitchWidget-grip {
border-color: @color-progressive;
-
- &:before {
- border-color: #fff;
- }
}
}
- &:active,
- &:active:hover {
+
+ &.oo-ui-toggleWidget-on {
background-color: @color-progressive;
border-color: @color-progressive;
.oo-ui-toggleSwitchWidget-grip {
background-color: @background-color-default;
- box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+ box-shadow: @box-shadow-input-binary;
+ }
+
+ &:hover {
+ background-color: @color-progressive-hover;
+ border-color: @color-progressive-hover;
+ }
+ &:active,
+ &:active:hover {
+ background-color: @color-progressive-active;
+ border-color: @color-progressive-active;
+ }
+ &:focus {
+ border-color: @color-progressive;
+
+ &:before {
+ border-color: #fff;
+ }
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/292888
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I25e387e33da672455a09252632d174d1dc067405
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
