VolkerE has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/311731

Change subject: MediaWiki theme: Use `color-progressive` for switched-on binary 
inputs
......................................................................

MediaWiki theme: Use `color-progressive` for switched-on binary inputs

Using `color-progressive` color for switched-on binary input widgets
(CheckboxInput-, RadioInput- and ToggleSwitchWidget) and treat
ToggleButtonWidget as special case.

Bug: T145629
Change-Id: I57c7bc4b7d12354a54e5d0d4d2b612b3dec1ce87
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
2 files changed, 27 insertions(+), 25 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/31/311731/1

diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index d91a0c7..968aa98 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -111,11 +111,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: @color-progressive;
+@background-color-input-binary-active: @color-progressive-active;
+@background-color-input-binary-on: @color-progressive;
 @size-input-binary: 1.6em;
 @border-input-binary: @border-width-default solid @border-color-input-binary;
 @border-color-input-binary: @border-color-default-active;
 @border-color-input-binary-active: @color-progressive-active;
+@border-color-input-binary-on: @color-progressive;
 @box-shadow-input-binary: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 @padding-input-binary-label: 0.25em 0.25em 0.25em 0.5em;
 
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index 8d1009f..325fc1a 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -473,25 +473,25 @@
 
                &:checked {
                        & + span {
-                               background-color: @color-progressive-active;
-                               border-color: @border-color-input-binary-active;
+                               background-color: 
@background-color-input-binary-on;
+                               border-color: @border-color-input-binary-on;
                        }
 
                        &:hover + span,
                        &:focus:hover + span {
-                               background-color: 
@color-progressive-active-hover;
-                               border-color: @color-progressive-active-hover;
+                               background-color: @color-progressive-hover;
+                               border-color: @color-progressive-hover;
                        }
 
                        &:active + span,
                        &:active:hover + span {
-                               background-color: @color-progressive-active;
+                               background-color: 
@background-color-input-binary-active;
                                border-color: @border-color-input-binary-active;
                        }
 
                        &:focus + span {
-                               background-color: @color-progressive-active;
-                               border-color: @color-progressive-active;
+                               background-color: 
@background-color-input-binary-on;
+                               border-color: @border-color-input-binary-on;
                                box-shadow: @box-shadow-focus-inset;
                        }
                }
@@ -642,28 +642,28 @@
                }
 
                &:active + span {
-                       background-color: @color-progressive-active;
-                       border-color: @color-progressive-active;
+                       background-color: @background-color-input-binary-active;
+                       border-color: @border-color-input-binary-active;
                }
 
                &:checked {
                        & + span {
-                               border-color: @color-progressive-active;
+                               border-color: @border-color-input-binary-on;
                        }
 
                        &:hover + span {
-                               border-color: @color-progressive;
+                               border-color: @color-progressive-hover;
                        }
 
                        &:hover:focus + span {
-                               border-color: @color-progressive;
-                               box-shadow: inset 0 0 0 1px @color-progressive;
+                               border-color: @color-progressive-hover;
+                               box-shadow: inset 0 0 0 1px 
@color-progressive-hover;
                        }
 
                        &:active + span,
                        &:active:focus + span {
-                               border-color: @color-progressive-active;
-                               box-shadow: inset 0 0 0 1px 
@color-progressive-active;
+                               border-color: @border-color-input-binary-active;
+                               box-shadow: inset 0 0 0 1px 
@border-color-input-binary-active;
                        }
 
                        &:focus + span {
@@ -1543,8 +1543,8 @@
                }
                &:active,
                &:active:hover {
-                       background-color: @color-progressive-active-hover;
-                       border-color: @color-progressive-active;
+                       background-color: @background-color-input-binary-active;
+                       border-color: @border-color-input-binary-active;
 
                        .oo-ui-toggleSwitchWidget-grip {
                                background-color: @background-color-default;
@@ -1563,8 +1563,8 @@
                }
 
                &.oo-ui-toggleWidget-on {
-                       background-color: @color-progressive-active;
-                       border-color: @color-progressive-active;
+                       background-color: @background-color-input-binary-on;
+                       border-color: @border-color-input-binary-on;
 
                        .oo-ui-toggleSwitchWidget-grip {
                                background-color: @background-color-default;
@@ -1573,16 +1573,16 @@
                        }
 
                        &:hover {
-                               background-color: 
@color-progressive-active-hover;
-                               border-color: @color-progressive-active-hover;
+                               background-color: @color-progressive-hover;
+                               border-color: @color-progressive-hover;
                        }
                        &:active,
                        &:active:hover {
-                               background-color: @color-progressive-active;
-                               border-color: @color-progressive-active;
+                               background-color: 
@background-color-input-binary-active;
+                               border-color: @border-color-input-binary-active;
                        }
                        &:focus {
-                               border-color: @color-progressive;
+                               border-color: @border-color-input-binary-on;
 
                                &:before {
                                        border-color: @color-default-light;

-- 
To view, visit https://gerrit.wikimedia.org/r/311731
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I57c7bc4b7d12354a54e5d0d4d2b612b3dec1ce87
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

Reply via email to