Bartosz Dziewoński has uploaded a new change for review.

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

Change subject: MediaWiki theme: Consistent toggle button 'active' state
......................................................................

MediaWiki theme: Consistent toggle button 'active' state

.oo-ui-buttonElement-active and .oo-ui-buttonElement-pressed is not
the same: the former is persistent, like in the toggle button; the
latter is temporary, as in a button currently being pressed by the user.
(Confusingly, CSS pseudoclass :active acts like our 'pressed' state.)

Apex styles them both identically, but in the MediaWiki theme we use
dark background for 'active' and light grey for 'pressed'. However,
this distinction was not implemented quite right everywhere.

Change-Id: I91df3da1bd83e83c4c52983cb2b02fe66583ac66
---
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
2 files changed, 15 insertions(+), 18 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/38/189238/1

diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index b475b00..8dbccf4 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -55,7 +55,6 @@
                                color: @text;
                        }
 
-                       &.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button > .oo-ui-labelElement-label,
                        &.oo-ui-buttonElement-pressed > 
.oo-ui-buttonElement-button > .oo-ui-labelElement-label {
                                color: @active-text;
                        }
@@ -139,11 +138,15 @@
                        }
 
                        & > .oo-ui-buttonElement-button:active,
-                       &.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button,
                        &.oo-ui-buttonElement-pressed > 
.oo-ui-buttonElement-button {
                                background-color: @active-color;
                                border-color: @active-color;
                                box-shadow: none;
+                       }
+
+                       &.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button {
+                               background-color: @highlight;
+                               color: #fff;
                        }
 
                        &.oo-ui-flaggedElement {
@@ -192,7 +195,6 @@
 
        &.oo-ui-widget-enabled {
                & > .oo-ui-buttonElement-button:active > 
.oo-ui-labelElement-label,
-               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > 
.oo-ui-labelElement-label,
                &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > 
.oo-ui-labelElement-label {
                        color: @active;
                        box-shadow: none;
@@ -217,11 +219,15 @@
 
        &.oo-ui-widget-enabled {
                .oo-ui-buttonElement-button:active,
-               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
                &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
                        color: @active;
                        border-color: @active-color;
                        box-shadow: none;
+               }
+               
+               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
+                       background-color: @highlight;
+                       color: #fff;
                }
        }
 }
@@ -245,12 +251,16 @@
 
        &.oo-ui-widget-enabled {
                .oo-ui-buttonElement-button:active,
-               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
                &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
                        background-color: @active;
                        border-color: @active;
                        box-shadow: none;
                }
+               
+               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
+                       background-color: @highlight;
+                       color: #fff;
+               }
        }
 }
 
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index 1617ad3..e28e8d8 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -36,13 +36,6 @@
        }
 
        .oo-ui-buttonElement-framed {
-               &.oo-ui-buttonElement-active {
-                       .oo-ui-buttonElement-button {
-                               background: @highlight;
-                               color: #fff;
-                       }
-               }
-
                .oo-ui-buttonElement-button {
                        border-radius: 0;
                        margin-left: -1px;
@@ -770,12 +763,6 @@
        .oo-ui-inline-spacing(0.5em);
 
        .oo-ui-buttonOptionWidget {
-               &.oo-ui-buttonElement-active {
-                       .oo-ui-buttonElement-button {
-                               background: @highlight;
-                               color: #fff;
-                       }
-               }
                .oo-ui-buttonElement-button {
                        border-radius: 0;
                        margin-left: -1px;

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I91df3da1bd83e83c4c52983cb2b02fe66583ac66
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to