jenkins-bot has submitted this change and it was merged. Change subject: TextInputWidget/MediaWiki theme: Improve Less code and align labels ......................................................................
TextInputWidget/MediaWiki theme: Improve Less code and align labels Following-up I1ecbf767a598704c3913d8853a458f0fe526f5d1 to align labels with new `padding` in MediaWiki theme. Also: * simplifying selectors by concatenating, * relying on `left` and `right` only instead of mixing them with `margin` and `padding` * introducing new variables instead of fixed values, * increasing `textarea`'s `line-height` for better readability, * removing superfluos properties, that were either not applied or duplicated in theme, or just setting default UA value (`margin: 0`) and * putting `-enabled` & `-disabled` selectors at the bottom as with other widgets. Change-Id: Ib0db2c1233600006ca443bcaa718d7ee1c4c4759 --- M src/styles/widgets/TextInputWidget.less M src/themes/mediawiki/common.less M src/themes/mediawiki/widgets.less 3 files changed, 85 insertions(+), 82 deletions(-) Approvals: Jforrester: Looks good to me, approved jenkins-bot: Verified diff --git a/src/styles/widgets/TextInputWidget.less b/src/styles/widgets/TextInputWidget.less index 534c0be..76b3556 100644 --- a/src/styles/widgets/TextInputWidget.less +++ b/src/styles/widgets/TextInputWidget.less @@ -56,40 +56,17 @@ } &.oo-ui-iconElement > .oo-ui-iconElement-icon, - &.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator { + &.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator, + > .oo-ui-labelElement-label { display: block; position: absolute; top: 0; + } + + &.oo-ui-iconElement > .oo-ui-iconElement-icon, + &.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator { height: 100%; - .oo-ui-unselectable(); - } - - &.oo-ui-widget-enabled { - > .oo-ui-iconElement-icon, - > .oo-ui-indicatorElement-indicator { - cursor: text; - } - - &.oo-ui-textInputWidget-type-search { - > .oo-ui-indicatorElement-indicator { - cursor: pointer; - } - } - } - - &.oo-ui-widget-disabled { - input, - textarea { - .oo-ui-unselectable(); - } - & .oo-ui-labelElement-label { - .oo-ui-unselectable(); - } - } - - &.oo-ui-labelElement > .oo-ui-labelElement-label { - display: block; } > .oo-ui-iconElement-icon, @@ -102,9 +79,26 @@ right: 0; } - > .oo-ui-labelElement-label { - position: absolute; - top: 0; + &.oo-ui-widget-enabled { + > .oo-ui-iconElement-icon, + > .oo-ui-indicatorElement-indicator, + > .oo-ui-labelElement-label { + cursor: text; + } + + &.oo-ui-textInputWidget-type-search { + > .oo-ui-indicatorElement-indicator { + cursor: pointer; + } + } + } + + &.oo-ui-widget-disabled { + input, + textarea, + & .oo-ui-labelElement-label { + .oo-ui-unselectable(); + } } .theme-oo-ui-textInputWidget(); diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less index ec7d6a7..47369de 100644 --- a/src/themes/mediawiki/common.less +++ b/src/themes/mediawiki/common.less @@ -60,6 +60,8 @@ @min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min + 4px*2 distance top/bottom + 1px*2 border top/bottom @max-width-default: 50em; @max-width-input: @max-width-default; +@max-height-icon: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default; // equals `2.5em`≈`32px` at base `font-size: 12.8px` +@max-height-indicator: @max-height-icon; @size-default: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default; // equals `2.5em`≈`32px` at base `font-size: 12.8px` @size-button-default: @size-default; @@ -94,6 +96,13 @@ @padding-widget-default: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-default; // equals `0.547em`≈`7px` at base `font-size: 12.8px` @padding-top-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default; // equals `0.625em`≈`8px` at base `font-size: 12.8px` +@padding-top-textarea: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-default; // equals `0.625em`≈`8px` at base `font-size: 12.8px` +@padding-left-widget-icon: @size-icon + ( 10 / @oo-ui-font-size-browser / @oo-ui-font-size-default ); // equals `2.65625em`≈`34px` at base `font-size: 12.8px` +@left-icon: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-default; // equals `0.46875em`≈`6px` at base `font-size: 12.8px`; +@left-icon-label: @padding-left-widget-icon; +@right-indicator: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default; +@right-indicator-label: ( @right-indicator * 2 ) + @size-indicator; +@right-label: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default; @box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 ); @box-shadow-menu: @box-shadow-dialog; @@ -105,6 +114,7 @@ @box-shadow-light-inset: inset 0 0 0 1px @color-default-light; @line-height-default: 1.4; +@line-height-input: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px` @text-shadow-default: 0 1px 1px @color-default-light; // 'coined' effect @text-shadow-disabled: @text-shadow-default; diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index fa006bf..d3463f1 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -708,22 +708,22 @@ input, textarea { - margin: 0; font-size: inherit; font-family: inherit; background-color: @background-color-default; color: @color-emphasized; border: @border-default; border-radius: @border-radius-default; - padding: @padding-top-input-text @padding-widget-default @padding-widget-default; } input { - line-height: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px` + padding: @padding-top-input-text @padding-widget-default @padding-widget-default; + line-height: @line-height-input; } textarea { - line-height: 1.275; + padding: @padding-top-textarea @padding-widget-default @padding-widget-default; + line-height: @line-height-default; } .oo-ui-pendingElement-pending { @@ -801,6 +801,51 @@ } } + &.oo-ui-iconElement { + input, + textarea { + padding-left: @padding-left-widget-icon; + } + + .oo-ui-iconElement-icon { + max-height: @max-height-icon; + left: @left-icon; + } + } + + &.oo-ui-indicatorElement { + input, + textarea { + padding-right: @size-indicator + 1.55em; + } + + .oo-ui-indicatorElement-indicator { + max-height: @max-height-indicator; + right: @right-indicator; + } + } + + > .oo-ui-labelElement-label { + color: @color-subtle; + right: @right-label; + border: 1px solid transparent; // due to absolute positioning, imitating `input` + border-width: 1px 0; + padding: @padding-top-input-text 0 @padding-widget-default; + line-height: @line-height-input; + } + + &-labelPosition-after { + &.oo-ui-indicatorElement > .oo-ui-labelElement-label { + right: @right-indicator-label; + } + } + + &-labelPosition-before { + &.oo-ui-iconElement > .oo-ui-labelElement-label { + left: @left-icon-label; + } + } + &.oo-ui-widget-disabled { input, textarea { @@ -816,52 +861,6 @@ .oo-ui-labelElement-label { color: @color-disabled; text-shadow: @text-shadow-disabled; - } - } - - &.oo-ui-iconElement { - input, - textarea { - padding-left: @size-icon + 1em; - } - - .oo-ui-iconElement-icon { - left: 0; - height: 100%; - max-height: 2.375em; - margin-left: 0.5em; - background-position: right center; - } - } - - &.oo-ui-indicatorElement { - input, - textarea { - padding-right: @size-indicator + 1.55em; - } - - .oo-ui-indicatorElement-indicator { - height: 100%; - max-height: 2.375em; - margin: 0 0.775em; - } - } - - > .oo-ui-labelElement-label { - color: @color-subtle; - padding: 0.4em; - line-height: 1.5; - } - - &-labelPosition-after { - &.oo-ui-indicatorElement > .oo-ui-labelElement-label { - margin-right: @size-indicator + 1.55em - 0.4em; - } - } - - &-labelPosition-before { - &.oo-ui-iconElement > .oo-ui-labelElement-label { - margin-left: @size-icon + 1em - 0.4em; } } } -- To view, visit https://gerrit.wikimedia.org/r/323659 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ib0db2c1233600006ca443bcaa718d7ee1c4c4759 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Prtksxna <psax...@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