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

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

Change subject: MediaWiki theme: Refactor z-index inside 
ButtonSelectWidget/ButtonGroupWidget
......................................................................

MediaWiki theme: Refactor z-index inside ButtonSelectWidget/ButtonGroupWidget

* Remove z-index stuff from ButtonElement, causes T145311.
* Create stacking context at .oo-ui-buttonSelectWidget and
  .oo-ui-buttonGroupWidget, so that we can fiddle with z-index
  for all ButtonElements inside them without causing T145311.
* Fiddle with z-index so that the fancy collapsing borders
  for the buttons inside the group display the best. The rules
  added here essentially mean that when "collapsing" the borders
  of two neighbouring buttons, we prefer to keep the border of
  the active button, then focussed, then hovered, then everything
  else, then disabled.

Bug: T145311
Change-Id: If2f84721d4820d7ae73506f63e522b309e02b4f1
---
M src/styles/elements/ButtonElement.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 40 insertions(+), 14 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/06/310806/1

diff --git a/src/styles/elements/ButtonElement.less 
b/src/styles/elements/ButtonElement.less
index 269dafe..4ec67f3 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -24,14 +24,6 @@
                cursor: default;
        }
 
-       &.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
-               &:hover,
-               &:active,
-               &:focus {
-                       z-index: 2;
-               }
-       }
-
        &.oo-ui-indicatorElement > .oo-ui-buttonElement-button > 
.oo-ui-indicatorElement-indicator,
        &.oo-ui-iconElement > .oo-ui-buttonElement-button > 
.oo-ui-iconElement-icon,
        &.oo-ui-labelElement > .oo-ui-buttonElement-button > 
.oo-ui-labelElement-label {
diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index 91804b1..bb950c3 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -243,7 +243,6 @@
                                background-color: @color-progressive-active;
                                color: @color-default-light;
                                border-color: @border-color-input-binary-active;
-                               z-index: 3;
 
                                &:focus {
                                        border-color: @color-progressive-focus;
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index 80d3a92..88840cc 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -27,6 +27,9 @@
        display: inline-block;
        white-space: nowrap;
        border-radius: @border-radius-default;
+       // Create a stacking context, so that we can use z-index below without 
leaking out
+       z-index: 0;
+       position: relative;
 
        .oo-ui-inline-spacing( 0.5em );
        .oo-ui-buttonElement {
@@ -51,12 +54,24 @@
                }
        }
 
+       // Give hovered/focussed/active buttons higher z-index, so that the 
fancy borders display right.
+       // Identical to styles in .theme-oo-ui-buttonSelectWidget, except for 
the :focus selector.
        &.oo-ui-widget-enabled {
-               .oo-ui-buttonElement {
-                       .oo-ui-buttonElement-button:focus {
-                               border-color: @border-color-default-focus;
-                               z-index: 3;
-                       }
+               .oo-ui-buttonElement.oo-ui-widget-disabled > 
.oo-ui-buttonElement-button {
+                       z-index: -1;
+               }
+
+               .oo-ui-buttonElement.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:hover,
+               .oo-ui-buttonElement.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:active {
+                       z-index: 1;
+               }
+
+               .oo-ui-buttonElement.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:focus {
+                       z-index: 2;
+               }
+
+               .oo-ui-buttonElement.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button {
+                       z-index: 3;
                }
        }
 }
@@ -1327,6 +1342,9 @@
 .theme-oo-ui-buttonSelectWidget () {
        border-radius: @border-radius-default;
        .oo-ui-inline-spacing( 0.5em );
+       // Create a stacking context, so that we can use z-index below without 
leaking out
+       z-index: 0;
+       position: relative;
 
        &:focus {
                outline: 0;
@@ -1361,6 +1379,23 @@
                        }
                }
        }
+
+       // Give hovered/focussed/active buttons higher z-index, so that the 
fancy borders display right.
+       // Identical to styles in .theme-oo-ui-buttonGroupWidget, except we 
don't need :focus selector.
+       &.oo-ui-widget-enabled {
+               .oo-ui-buttonElement.oo-ui-widget-disabled > 
.oo-ui-buttonElement-button {
+                       z-index: -1;
+               }
+
+               .oo-ui-buttonElement.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:hover,
+               .oo-ui-buttonElement.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:active {
+                       z-index: 1;
+               }
+
+               .oo-ui-buttonElement.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button {
+                       z-index: 3;
+               }
+       }
 }
 
 .theme-oo-ui-radioSelectWidget () {

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: If2f84721d4820d7ae73506f63e522b309e02b4f1
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to