[MediaWiki-commits] [Gerrit] MediaWiki theme: Improve focus states of primary buttons & T... - change (oojs/ui)
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
[MediaWiki-commits] [Gerrit] MediaWiki theme: Improve focus states of primary buttons & T... - change (oojs/ui)
VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/294014
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(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/14/294014/1
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;
