jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/346216 )
Change subject: MediaWiki theme: Unify `padding` on ButtonElement
......................................................................
MediaWiki theme: Unify `padding` on ButtonElement
Unifying `padding` & positioning of labels/icons/indicators on
ButtonElement and derived widgets.
Also:
- fixing IE 9 issue with `min-width` of framed icon-only buttons
and removing corresponding hack,
- bringing frameless `:focus` state closer to framed button.
Bug: T161177
Change-Id: Ice3e3dc8e1c492934d44ab7d98fe3c31e600be35
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 130 insertions(+), 58 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, but someone else must approve
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index d3ba9b5..1eadeb9 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -78,6 +78,10 @@
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.4375em`≈`44px`
+@start-framed-icon-only: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`; HACK: We have to break
with `@padding-start-input-text-icon` to perfectly center in
`@min-width-button-default`
+@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-default`
+@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.703125em`≈`9px`
+
@width-button-combo-widget: @min-width-button-combo-widget;
@height-icon-element: 100%;
@@ -89,6 +93,7 @@
@border-disabled-filled: @border-width-default solid
@border-color-disabled-filled;
@border-dialog: @border-default;
@border-dialog-bar: @border-width-default solid @border-color-dialog-bar;
+@border-frameless: @border-width-default solid @color-default-light;
@border-menu: @border-default;
@border-color-default: #a2a9b1;
@@ -106,11 +111,13 @@
@border-color-dialog-bar: #c8ccd1;
@border-radius-default: 2px;
+@border-radius-frameless: 1px; // Together with `@box-shadow-frameless` it
results in well rounded border
@border-width-default: 1px;
@border-width-medium: 2px;
@padding-default: @padding-top-default @padding-horizontal-default
@padding-bottom-default;
+@padding-frameless: @padding-vertical-label 0;
@padding-input-text: @padding-top-default @padding-horizontal-input-text
@padding-bottom-default;
@padding-menu: @padding-top-menu @padding-horizontal-default
@padding-bottom-menu;
@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-default (
@padding-bottom-menu * 1.5 );
@@ -122,6 +129,10 @@
@padding-bottom-default: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`
@padding-bottom-menu: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // As long as we have whitespace in icon canvas, we
need reduced `padding-left`.
+@padding-start-icon: @size-icon;
+@padding-start-icon-only: 26 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `2.03125em`≈`26px`;
@min-width-button-default - @padding-horizontal-default - 2 *
@border-width-default;
+@padding-start-indicator-only: @padding-start-icon-only;
+@padding-start-indicator-plus: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@@ -131,6 +142,7 @@
@box-shadow-widget: inset 0 0 0 1px @background-color-default;
@box-shadow-widget-focus: inset 0 0 0 1px @color-progressive;
@box-shadow-progressive-focus: inset 0 0 0 1px @color-progressive, inset 0 0 0
2px @color-default-light;
+@box-shadow-frameless-focus: 0 0 0 2px @color-progressive;
@box-shadow-input-binary-active: inset 0 0 0 1px @color-progressive-active;
@box-shadow-readonly-focus: inset 0 0 0 1px #c8ccd1;
@box-shadow-erroneous-focus: inset 0 0 0 1px @color-erroneous;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index eabe88c..738291b 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -4,18 +4,68 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
+ position: relative;
font-weight: bold;
text-decoration: none;
&:focus {
- border-radius: @border-radius-default;
outline: 0;
+ }
+
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ position: absolute;
+ top: 0;
+ height: 100%;
}
}
- &.oo-ui-iconElement > .oo-ui-buttonElement-button {
- > .oo-ui-indicatorElement-indicator {
- margin-left: @size-indicator / 2;
+ &.oo-ui-iconElement {
+ > .oo-ui-buttonElement-button {
+ > .oo-ui-iconElement-icon {
+ display: block;
+ }
+ }
+ }
+
+ &.oo-ui-labelElement > .oo-ui-buttonElement-button,
+ // Support `<input>` from ButtonInputWidget
+ > input.oo-ui-buttonElement-button {
+ line-height: @line-height-reset;
+ }
+
+ &.oo-ui-labelElement {
+ > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
+ line-height: @line-height-widget-singleline;
+ }
+
+ &.oo-ui-iconElement {
+ > .oo-ui-buttonElement-button {
+ padding-left: @padding-start-icon-only;
+ }
+ }
+
+ &.oo-ui-indicatorElement {
+ > .oo-ui-buttonElement-button {
+ padding-right: @padding-start-indicator-plus;
+ }
+ }
+ }
+
+ &.oo-ui-indicatorElement {
+ // Indicator (-only)
+ > .oo-ui-buttonElement-button {
+ > .oo-ui-indicatorElement-indicator {
+ display: block;
+ }
+ }
+
+ // Indicator and label/icon
+ &.oo-ui-labelElement,
+ &.oo-ui-iconElement {
+ > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
+ right: @padding-horizontal-default;
+ }
}
}
@@ -64,24 +114,34 @@
&-frameless {
> .oo-ui-buttonElement-button {
- .oo-ui-indicatorElement-indicator {
- margin-right: 0;
+ border-radius: @border-radius-frameless;
+ }
+
+ &.oo-ui-iconElement {
+ // Icon (-only) framed
+ > .oo-ui-buttonElement-button {
+ min-width: @size-icon;
+ min-height: @size-icon;
+
+ > .oo-ui-iconElement-icon {
+ left: 0;
+ }
}
}
&.oo-ui-labelElement {
> .oo-ui-buttonElement-button {
- > .oo-ui-labelElement-label {
- margin-left: 0.25em;
- margin-right: 0.25em;
- }
+ margin-left: -@border-width-default; // Address
`border` below
+ border: @border-frameless;
+ padding: @padding-frameless;
}
}
- // Support `<input>` from ButtonInputWidget
- > input.oo-ui-buttonElement-button {
- padding-left: 0.25em;
- padding-right: 0.25em;
+ &.oo-ui-indicatorElement {
+ > .oo-ui-buttonElement-button {
+ min-width: @size-indicator;
+ min-height: @size-indicator;
+ }
}
&.oo-ui-widget-enabled {
@@ -92,7 +152,7 @@
color: @color-default-hover;
}
&:focus {
- box-shadow: @box-shadow-widget-focus, 0
0 0 1px @color-progressive-focus;
+ box-shadow: @box-shadow-frameless-focus;
}
}
@@ -147,57 +207,50 @@
}
&-framed {
- &.oo-ui-iconElement.oo-ui-labelElement,
- &.oo-ui-iconElement.oo-ui-indicatorElement {
- > .oo-ui-buttonElement-button {
- padding-left:
@padding-start-input-text-icon-label;
- }
- }
-
> .oo-ui-buttonElement-button {
- position: relative;
min-height: @min-height-button-default;
border-radius: @border-radius-default;
padding: @padding-default;
}
- &.oo-ui-iconElement > .oo-ui-buttonElement-button {
- min-width: @min-width-button-default;
- }
-
- // Support: IE9
- // Indirectly please IE9 as it doesn't like `min-width` on all
kinds of buttons (T158728)
- &.oo-ui-labelElement > .oo-ui-buttonElement-button,
- &.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
- min-width: 0;
- }
-
- // Support `<input>` from ButtonInputWidget
- > input.oo-ui-buttonElement-button,
- &.oo-ui-labelElement > .oo-ui-buttonElement-button {
- line-height: @line-height-reset;
- }
-
- &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
- line-height: @line-height-widget-singleline;
- }
-
&.oo-ui-iconElement {
- > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
{
- display: block;
- position: absolute;
- top: 0;
- height: 100%;
- // Horizontally center the icon in icon-only
buttons
- left: @padding-start-input-text-icon;
+ // Icon (-only) framed
+ > .oo-ui-buttonElement-button {
+ padding-left: @padding-start-icon-only;
+
+ > .oo-ui-iconElement-icon {
+ left: @start-framed-icon-only;
+ }
+ }
+
+ // Icon and label/indicator framed
+ &.oo-ui-labelElement,
+ &.oo-ui-indicatorElement {
+ > .oo-ui-buttonElement-button {
+ padding-left:
@padding-start-input-text-icon-label;
+
+ > .oo-ui-iconElement-icon {
+ left:
@padding-start-input-text-icon;
+ }
+ }
}
}
&.oo-ui-indicatorElement {
- &.oo-ui-labelElement {
- > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- position: relative;
- left: 0.275em;
+ // Indicator (-only) framed
+ > .oo-ui-buttonElement-button {
+ padding-right: @padding-start-indicator-only;
+
+ > .oo-ui-indicatorElement-indicator {
+ right: @start-framed-indicator-only;
+ }
+ }
+
+ // Indicator and label/icon framed
+ &.oo-ui-labelElement,
+ &.oo-ui-iconElement {
+ > .oo-ui-buttonElement-button {
+ padding-right:
@padding-start-indicator-plus;
}
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index a2dec1e..c3dfee7 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -81,7 +81,7 @@
.oo-ui-buttonOptionWidget {
.oo-ui-buttonElement-button {
border-radius: 0;
- margin-left: -1px;
+ margin-left: -@border-width-default;
}
&:first-child .oo-ui-buttonElement-button {
@@ -95,6 +95,10 @@
border-top-right-radius: @border-radius-default;
}
+ &.oo-ui-iconElement .oo-ui-iconElement-icon,
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ position: absolute; // FIXME: Remove from
ButtonOptionWidget after cleaning up when T161177 is resolved
+ }
}
&.oo-ui-widget-enabled {
@@ -455,14 +459,17 @@
border-right-width: @border-width-default;
}
- &-dropdownButton {
+ &-dropdownButton.oo-ui-indicatorElement {
width: @width-button-combo-widget;
.oo-ui-buttonElement-button {
min-width: @min-width-button-combo-widget;
min-height: @min-height-button-default;
padding-left: 0;
- padding-right: 0;
+
+ > .oo-ui-indicatorElement-indicator {
+ right: @start-framed-square-indicator-only;
+ }
}
.oo-ui-buttonElement-button,
--
To view, visit https://gerrit.wikimedia.org/r/346216
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ice3e3dc8e1c492934d44ab7d98fe3c31e600be35
Gerrit-PatchSet: 3
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: 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
