VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/305605
Change subject: MediaWiki theme: Make ToggleSwitchWidget's disabled state
follow enabled
......................................................................
MediaWiki theme: Make ToggleSwitchWidget's disabled state follow enabled
After changes introduced in I25e387e33da672455a09252632d174d1dc067405
ToggleSwitchWidget's grip is still not following the same visual logic
in disabled state. This patch introduces outlined circle - supported
by `box-shadow` because of increasing contrast to `background-color` -
when widget is disabled.
Also cleaning up and unifying the different disabled variables. And
exchanging minor occurence of fixed value with variable.
Change-Id: I6f8b45303474a9ffce5f2acd1fc5db38ef211f29
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 20 insertions(+), 13 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/05/305605/1
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 04c5eae..f64468f 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -29,9 +29,9 @@
// Disabled Widgets
@background-color-disabled: #f3f3f3;
-@background-color-filled-disabled: #ddd;
+@background-color-disabled-filled: #ddd;
@color-disabled: #ccc;
-@color-disabled-framed: #fff;
+@color-disabled-filled: #fff;
@opacity-disabled: 0.2;
// Invalid Widget (validation error feedback)
@@ -49,6 +49,7 @@
@border-default: @border-width-default solid @border-color-default;
@border-disabled: @border-width-default solid @border-color-disabled;
+@border-disabled-filled: @border-width-default solid
@border-color-disabled-filled;
@border-dialog: @border-width-default solid @border-color-dialog;
@border-menu: @border-dialog;
@@ -56,7 +57,7 @@
@border-color-default-hover: #aaa;
@border-color-default-focus: @color-progressive-focus;
@border-color-disabled: #ddd;
-@border-color-disabled-framed: @color-disabled-framed;
+@border-color-disabled-filled: @color-disabled-filled;
@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;
@@ -71,6 +72,7 @@
@box-shadow-menu: @box-shadow-dialog;
@box-shadow-focus-default: inset 0 0 0 1px @color-progressive;
@box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px
@color-default-light;
+@box-shadow-disabled-filled: inset 0 0 0 1px @color-disabled-filled;
@line-height-default: 1.4;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 7bba06c..7de6231 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -147,14 +147,14 @@
&.oo-ui-widget-disabled {
& > .oo-ui-buttonElement-button {
- background-color:
@background-color-filled-disabled;
- color: @color-disabled-framed;
+ background-color:
@background-color-disabled-filled;
+ color: @color-disabled-filled;
border: @border-disabled;
}
& + .oo-ui-widget-disabled {
& > .oo-ui-buttonElement-button {
- border-left-color:
@border-color-disabled-framed;
+ border-left-color:
@border-color-disabled-filled;
}
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index e5e074c..f31185f 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -403,7 +403,7 @@
}
&:disabled + span {
- background-color: @background-color-filled-disabled;
+ background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
}
@@ -540,7 +540,7 @@
}
&:disabled + span {
- background-color: @background-color-filled-disabled;
+ background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
}
@@ -1110,7 +1110,7 @@
.oo-ui-popupWidget-anchor:after {
bottom: -@anchor-size - 1px;
left: -@anchor-size + 1px;
- border-bottom-color: @border-color-disabled-framed;
+ border-bottom-color: @border-color-disabled-filled;
border-width: @anchor-size;
}
}
@@ -1376,12 +1376,17 @@
}
&.oo-ui-widget-disabled {
- background-color: @background-color-filled-disabled;
+ background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
outline: 0; // Chrome when element has `tabindex` attribute
- .oo-ui-toggleSwitchWidget-grip {
- background-color: @color-disabled-framed;
+ &.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
+ border: @border-disabled-filled;
+ box-shadow: @box-shadow-disabled-filled;
+ }
+
+ &.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
+ background-color: @background-color-default;
}
}
}
@@ -1406,7 +1411,7 @@
.oo-ui-animation( oo-ui-progressBarWidget-slide 2s
infinite linear );
width: 40%;
margin-left: -10%;
- border-left-width: 1px;
+ border-left-width: @border-width-default;
}
}
&.oo-ui-widget-disabled {
--
To view, visit https://gerrit.wikimedia.org/r/305605
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6f8b45303474a9ffce5f2acd1fc5db38ef211f29
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
