jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/338542 )
Change subject: styles: Improve vertical alignment of elements' & widgets' icons
......................................................................
styles: Improve vertical alignment of elements' & widgets' icons
For better flexibility in layout, independent of fonts or base
`font-size` used, we're replacing our current `em` sized positioning
with a full-height positioning across widgets and same treatment for
ButtonElement icons in MediaWiki theme. Also cleaning-up inheritance,
putting basic logic into widgets across instead of each theme
separately and cleaning up CSS/Less code.
Bug: T158486
Change-Id: Ie3598034b484e9ecf1fe42abbbc547c4b80a4e0d
---
M src/styles/elements/ButtonElement.less
M src/styles/widgets/CapsuleMultiselectWidget.less
M src/styles/widgets/DropdownWidget.less
M src/styles/widgets/SelectFileWidget.less
M src/themes/apex/elements.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
9 files changed, 54 insertions(+), 66 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/src/styles/elements/ButtonElement.less
b/src/styles/elements/ButtonElement.less
index 60903d2..11a6d52 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -26,9 +26,10 @@
}
&.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 {
- display: inline-block; // For vertical alignment
+ &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label,
+ &-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
+ // Vertical align text
+ display: inline-block;
vertical-align: middle;
}
diff --git a/src/styles/widgets/CapsuleMultiselectWidget.less
b/src/styles/widgets/CapsuleMultiselectWidget.less
index 0fd88af..93edfa3 100644
--- a/src/styles/widgets/CapsuleMultiselectWidget.less
+++ b/src/styles/widgets/CapsuleMultiselectWidget.less
@@ -8,6 +8,13 @@
width: 100%;
display: block;
position: relative;
+
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ }
}
&-content {
diff --git a/src/styles/widgets/DropdownWidget.less
b/src/styles/widgets/DropdownWidget.less
index 7c29693..36311cb 100644
--- a/src/styles/widgets/DropdownWidget.less
+++ b/src/styles/widgets/DropdownWidget.less
@@ -14,9 +14,11 @@
.oo-ui-unselectable();
.oo-ui-box-sizing( border-box );
- .oo-ui-indicatorElement-indicator,
- .oo-ui-iconElement-icon {
+ .oo-ui-iconElement-icon,
+ .oo-ui-indicatorElement-indicator {
position: absolute;
+ top: 0;
+ height: 100%;
}
}
diff --git a/src/styles/widgets/SelectFileWidget.less
b/src/styles/widgets/SelectFileWidget.less
index ea89d8f..a7dcb73 100644
--- a/src/styles/widgets/SelectFileWidget.less
+++ b/src/styles/widgets/SelectFileWidget.less
@@ -46,6 +46,8 @@
> .oo-ui-indicatorElement-indicator,
> .oo-ui-iconElement-icon {
position: absolute;
+ top: 0;
+ height: 100%;
}
.oo-ui-widget-disabled & {
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 78900ca..d0dbda3 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -122,6 +122,9 @@
> .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
{
margin-left: -0.5em;
margin-right: -0.5em;
+ // Vertical align text
+ display: inline-block;
+ vertical-align: middle;
}
&.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index b4b1576..e55e627 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -111,21 +111,19 @@
border-color: rgba( 0, 0, 0, 0.2 );
}
- .oo-ui-indicatorElement-indicator {
- top: 0;
- right: 0;
- margin: 0.775em;
- }
-
.oo-ui-iconElement-icon {
- top: 0;
left: 0.25em;
- margin: 0.3em;
+ margin: 0 0.3em;
}
.oo-ui-labelElement-label {
line-height: 2.5em;
margin: 0 0.5em;
+ }
+
+ .oo-ui-indicatorElement-indicator {
+ right: 0;
+ margin: 0 0.775em;
}
}
@@ -173,16 +171,12 @@
border-width: 1px 0 1px 1px;
> .oo-ui-iconElement-icon {
- top: 0;
left: 0;
- height: 2.3em;
margin-left: 0.3em;
}
> .oo-ui-indicatorElement-indicator {
- top: 0;
right: 0;
- height: 2.3em;
margin-right: 0.775em;
}
}
@@ -517,11 +511,6 @@
.oo-ui-box-sizing(border-box);
- > .oo-ui-indicatorElement-indicator,
- > .oo-ui-iconElement-icon {
- position: absolute;
- }
-
> .oo-ui-capsuleMultiselectWidget-content {
> input {
border: 0;
@@ -545,23 +534,21 @@
}
}
- &.oo-ui-indicatorElement &-handle {
- padding-right: @size-indicator + 2 * 0.775em;
-
- > .oo-ui-indicatorElement-indicator {
- right: 0;
- top: 0;
- margin: 0.775em;
- }
- }
-
&.oo-ui-iconElement &-handle {
padding-left: @size-icon + 2 * 0.3em;
> .oo-ui-iconElement-icon {
left: 0;
- top: 0;
- margin: 0.3em;
+ margin: 0 0.3em;
+ }
+ }
+
+ &.oo-ui-indicatorElement &-handle {
+ padding-right: @size-indicator + 2 * 0.775em;
+
+ > .oo-ui-indicatorElement-indicator {
+ right: 0;
+ margin: 0 0.775em;
}
}
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 560a25a..6732f3c 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -79,6 +79,8 @@
@width-button-combo-widget: @min-width-button-combo-widget;
+@height-icon-element: 100%;
+
@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;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index dc40e1e..962e5d3 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -19,10 +19,6 @@
}
&.oo-ui-iconElement > .oo-ui-buttonElement-button {
- > .oo-ui-iconElement-icon {
- margin-left: 0;
- }
-
> .oo-ui-indicatorElement-indicator {
margin-right: 0.25em;
margin-left: @size-indicator / 2;
@@ -190,9 +186,11 @@
&.oo-ui-iconElement {
> .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
{
+ display: block;
position: absolute;
- top: 0.2em;
- // This centers the icon in icon-only buttons
+ top: 0;
+ height: 100%;
+ // Horizontally center the icon in icon-only
buttons
left: 1.5em - @size-icon / 2;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 910d5a2..4c15b92 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -132,15 +132,13 @@
border-radius: @border-radius-default;
.oo-ui-indicatorElement-indicator {
- top: 0;
right: 0;
- margin: 0.775em;
+ margin: 0 0.775em;
}
.oo-ui-iconElement-icon {
- top: 0;
left: 0.25em;
- margin: 0.3em;
+ margin: 0 0.3em;
}
.oo-ui-labelElement-label {
@@ -246,15 +244,11 @@
> .oo-ui-iconElement-icon {
left: 0;
- top: 0;
- height: 2.3em;
margin-left: 0.5em;
}
> .oo-ui-indicatorElement-indicator {
- top: 0;
right: 0;
- height: 2.3em;
margin-right: 0.775em;
}
}
@@ -832,7 +826,6 @@
.oo-ui-iconElement-icon {
left: 0;
- height: 100%;
max-height: 2.375em;
margin-left: 0.5em;
background-position: right center;
@@ -925,11 +918,6 @@
border-radius: @border-radius-default;
.oo-ui-box-sizing( border-box );
- > .oo-ui-indicatorElement-indicator,
- > .oo-ui-iconElement-icon {
- position: absolute;
- }
-
> .oo-ui-capsuleMultiselectWidget-content {
> input {
border: 0;
@@ -952,23 +940,21 @@
}
}
- &.oo-ui-indicatorElement &-handle {
- padding-right: @size-indicator + 2 * 0.775em;
-
- > .oo-ui-indicatorElement-indicator {
- right: 0;
- top: 0;
- margin: 0.775em;
- }
- }
-
&.oo-ui-iconElement &-handle {
padding-left: @size-icon + 2 * 0.3em;
> .oo-ui-iconElement-icon {
left: 0;
- top: 0;
- margin: 0.3em;
+ margin: 0 0.3em;
+ }
+ }
+
+ &.oo-ui-indicatorElement &-handle {
+ padding-right: @size-indicator + 2 * 0.775em;
+
+ > .oo-ui-indicatorElement-indicator {
+ right: 0;
+ margin: 0 0.775em;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/338542
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie3598034b484e9ecf1fe42abbbc547c4b80a4e0d
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
