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