jenkins-bot has submitted this change and it was merged.
Change subject: MediaWiki theme: Improve focus states of primary buttons &
ToggleSwitchWidget
......................................................................
MediaWiki theme: Improve focus states of primary buttons & ToggleSwitchWidget
Improving focus states of primary buttons to be more harmonious with
normal buttons. Also moving `oo-ui-toggleSwitchWidget-grip` styles to
Apex only as they are not used in MediaWiki theme. Also aligning Less mixins
to CSS Coding guidelines.
Bug: T137658
Change-Id: I5a083f1682cd10d833e1483c3de15e023ac39ffd
---
M src/styles/widgets/ToggleSwitchWidget.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
5 files changed, 45 insertions(+), 55 deletions(-)
Approvals:
Prtksxna: Looks good to me, approved
Bartosz Dziewoński: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/src/styles/widgets/ToggleSwitchWidget.less
b/src/styles/widgets/ToggleSwitchWidget.less
index 54cb57b..78c9937 100644
--- a/src/styles/widgets/ToggleSwitchWidget.less
+++ b/src/styles/widgets/ToggleSwitchWidget.less
@@ -18,21 +18,5 @@
.oo-ui-box-sizing( border-box );
}
- .oo-ui-toggleSwitchWidget-glow {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
-
- .oo-ui-unselectable();
- }
-
- .oo-ui-toggleWidget-off & {
- &-glow {
- display: none;
- }
- }
-
.theme-oo-ui-toggleSwitchWidget();
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index b429eb7..c9d647d 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -970,13 +970,18 @@
border-radius: 1em;
box-shadow: 0 0 0 #fff, inset 0 0.1em 0.2em #ddd;
border: 1px solid #ccc;
-
.oo-ui-inline-spacing(0.5em);
-
.oo-ui-vertical-gradient(#ddd, #fff);
&.oo-ui-widget-disabled {
opacity: 0.5;
+ }
+
+ &.oo-ui-widget-enabled {
+ &:hover,
+ &:hover .oo-ui-toggleSwitchWidget-grip {
+ border-color: #aaa;
+ }
}
&-grip {
@@ -989,23 +994,31 @@
box-shadow: 0 0.1em 0.25em rgba( 0, 0, 0, 0.1 );
border: 1px #c9c9c9 solid;
- .oo-ui-transition(left @medium-ease, margin-left @medium-ease);
- .oo-ui-vertical-gradient(#fff, #ddd);
+ .oo-ui-transition( left @medium-ease, margin-left @medium-ease
);
+ .oo-ui-vertical-gradient( #fff, #ddd );
}
- &.oo-ui-widget-enabled {
- &:hover,
- &:hover .oo-ui-toggleSwitchWidget-grip {
- border-color: #aaa;
- }
- }
-
- .oo-ui-toggleSwitchWidget-glow {
+ &-glow {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
border-radius: 1em;
box-shadow: inset 0 1px 4px 0 rgba( 0, 0, 0, 0.07 );
+ .oo-ui-transition( opacity @medium-ease );
+ .oo-ui-vertical-gradient( #b0d9ee, #eaf4fa );
+ .oo-ui-unselectable();
+ }
- .oo-ui-transition(opacity @medium-ease);
- .oo-ui-vertical-gradient(#b0d9ee, #eaf4fa);
+ .oo-ui-toggleWidget-off & {
+ &-glow {
+ opacity: 0;
+ }
+ &-grip {
+ left: 0.25em;
+ margin-left: 0;
+ }
}
.oo-ui-toggleWidget-on & {
@@ -1015,17 +1028,6 @@
&-grip {
left: @travelDistance + 0.25em;
margin-left: -2px;
- }
- }
-
- .oo-ui-toggleWidget-off & {
- &-glow {
- display: block;
- opacity: 0;
- }
- &-grip {
- left: 0.25em;
- margin-left: 0;
}
}
}
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index bc421c5..3bd5c2f 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -50,12 +50,13 @@
@border-color-progressive-active: #859dcc; // equivalents `fade(
@color-progressive-active, 50% )`
@border-color-destructive-active: #b77c79; // equivalents `fade(
@color-destructive-active, 50% )`
+@border-color-focus-inset: @color-default-light;
@box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
@box-shadow-menu: @box-shadow-dialog;
@box-shadow-popup: @box-shadow-dialog;
@box-shadow-focus-default: inset 0 0 0 1px @color-progressive;
-@box-shadow-light-inset: inset 0 0 0 1px @color-default-light;
+@box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px
@color-default-light;
@text-shadow-default: 0 1px 1px #fff; // 'coined' effect
@text-shadow-disabled: @text-shadow-default;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index b704e02..d7adba3 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -298,7 +298,7 @@
> .oo-ui-buttonElement-button:focus {
border-color: @focus;
- box-shadow: @box-shadow-light-inset;
+ box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px
@color-default-light;
}
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index f1134d4..97bd95a 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1242,13 +1242,16 @@
content: "";
display: block;
position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
+ top: 1px;
+ left: 1px;
+ bottom: 1px;
+ right: 1px;
border: 1px solid transparent;
border-radius: 1em;
z-index: 1;
+ .oo-ui-transition(
+ border-color @transition-ease-quick
+ );
}
&-grip {
@@ -1270,17 +1273,17 @@
display: none;
}
- &.oo-ui-toggleWidget-on {
- .oo-ui-toggleSwitchWidget-grip {
- left: @travelDistance + 0.4em;
- margin-left: -2px;
- }
- }
-
&.oo-ui-toggleWidget-off {
.oo-ui-toggleSwitchWidget-grip {
left: 0.4em;
margin-left: 0;
+ }
+ }
+
+ &.oo-ui-toggleWidget-on {
+ .oo-ui-toggleSwitchWidget-grip {
+ left: @travelDistance + 0.4em;
+ margin-left: -2px;
}
}
@@ -1311,7 +1314,7 @@
border-color: @color-progressive;
&:before {
- border-color: #fff;
+ border-color: @border-color-focus-inset;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/294014
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5a083f1682cd10d833e1483c3de15e023ac39ffd
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Pginer <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
