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 <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
