[MediaWiki-commits] [Gerrit] oojs/ui[master]: MediaWiki theme: Refactor z-index inside ButtonSelectWidget/...
jenkins-bot has submitted this change and it was merged.
Change subject: MediaWiki theme: Refactor z-index inside
ButtonSelectWidget/ButtonGroupWidget
..
MediaWiki theme: Refactor z-index inside ButtonSelectWidget/ButtonGroupWidget
* Remove z-index properties 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 appropriately. The rules
added here essentially mean that when borders
of two neighbouring buttons "collapse", 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(+), 12 deletions(-)
Approvals:
Esanders: Looks good to me, approved
jenkins-bot: Verified
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..f44df9b 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -27,8 +27,11 @@
display: inline-block;
white-space: nowrap;
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;
+
.oo-ui-buttonElement {
.oo-ui-inline-spacing( 0 );
}
@@ -51,11 +54,25 @@
}
}
+ // Give hovered/focussed/active buttons higher `z-index`, so that
borders display right.
+ // Identical to .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;
+ &.oo-ui-widget-enabled >
.oo-ui-buttonElement-button:hover,
+ &.oo-ui-widget-enabled >
.oo-ui-buttonElement-button:active {
+ z-index: 1;
+ }
+
+ &.oo-ui-widget-enabled >
.oo-ui-buttonElement-button:focus {
+ z-index: 2;
+ }
+
+ &.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button {
z-index: 3;
+ }
+
+ &.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
+ z-index: -1;
}
}
}
@@ -1327,6 +1344,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;
@@ -1360,6 +1380,23 @@
}
}
}
+
+ // Give hovered/focussed/active buttons higher `z-index`, so
that borders display right.
+ // Identical to .theme-oo-ui-buttonGroupWidget, except we don't
need `:focus` selector.
[MediaWiki-commits] [Gerrit] oojs/ui[master]: MediaWiki theme: Refactor z-index inside ButtonSelectWidget/...
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
