jenkins-bot has submitted this change and it was merged.
Change subject: MediaWiki theme: Alter buttons' padding and position icons
absolutely
......................................................................
MediaWiki theme: Alter buttons' padding and position icons absolutely
This aligns how button height is calculated to match MediaWiki UI.
Bug: T91473
Bug: T93290
Bug: T94750
Change-Id: I8d0604320dbbc6008797ff000e3b39e151915fbd
---
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/tools.less
M src/themes/mediawiki/widgets.less
M src/themes/mediawiki/windows.less
4 files changed, 35 insertions(+), 36 deletions(-)
Approvals:
Jforrester: Looks good to me, but someone else must approve
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index ee850fe..4e19190 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -5,6 +5,7 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
font-weight: bold;
+ text-decoration: none;
}
&.oo-ui-iconElement > .oo-ui-buttonElement-button {
@@ -17,7 +18,6 @@
> .oo-ui-indicatorElement-indicator {
width: @indicator-size;
height: @indicator-size;
- margin: @indicator-size / 2;
}
}
@@ -98,10 +98,19 @@
}
&-framed {
+ &.oo-ui-iconElement.oo-ui-labelElement,
&.oo-ui-iconElement.oo-ui-indicatorElement {
+ > .oo-ui-buttonElement-button{
+ padding-left: 2.4em;
+ }
+ }
+
> .oo-ui-buttonElement-button {
margin: 0.1em 0;
- padding: 0.2em 0.8em;
+ padding: 0.5em 1em;
+ min-height: 1.2em;
+ min-width: 1em;
border-radius: @border-radius;
+ position: relative;
&:hover,
&:focus {
@@ -118,25 +127,26 @@
// Support <input/> from ButtonInputWidget
> input.oo-ui-buttonElement-button,
&.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
- line-height: @icon-size;
+ line-height: 1.2em;
+ display: inline-block; // For vertical alignment
}
&.oo-ui-iconElement {
> .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
{
- margin-left: -0.5em;
- margin-right: -0.5em;
+ position: absolute;
+ top: 0.2em;
+ // This centers the icon in icon-only buttons
+ left: 1.5em - @icon-size/2;
}
- &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
- margin-right: 0.3em;
+ &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
+ margin-left: 0.3em;
}
}
&.oo-ui-indicatorElement {
> .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- /* -0.5 - 0.475 */
- margin-left: -0.005em;
- margin-right: -0.005em;
+ display: inline-block; // For vertical alignment
}
&.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator,
@@ -144,6 +154,13 @@
margin-left: @indicator-size / 2;
margin-right: -0.275em;
}
+
+ &.oo-ui-labelElement {
+ > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
+ position: relative;
+ left: 0.2em;
+ }
+ }
}
&.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
index 8031432..3645714 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -30,7 +30,7 @@
border: 0;
border-radius: 0;
margin: 0;
- padding: 0 0.3125em;
+ padding: 0 1.25em;
> .oo-ui-labelElement-label {
margin: 0 1em;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index ef46ed7..1d953c5 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -890,10 +890,6 @@
padding: 0;
background-color: transparent;
- .oo-ui-buttonElement-button {
- height: @icon-size;
- }
-
&.oo-ui-iconElement .oo-ui-iconElement-icon {
margin-top: 0;
}
diff --git a/src/themes/mediawiki/windows.less
b/src/themes/mediawiki/windows.less
index a00ef38..5efe2d3 100644
--- a/src/themes/mediawiki/windows.less
+++ b/src/themes/mediawiki/windows.less
@@ -151,34 +151,20 @@
&-primary,
&-other {
.oo-ui-actionWidget {
- .oo-ui-buttonElement-button {
- min-width: @icon-size;
- min-height: @icon-size;
- }
-
- .oo-ui-labelElement-label {
- line-height: @icon-size;
- }
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- margin-top: -0.125em;
- }
-
&.oo-ui-buttonElement-framed {
- margin: 0.75em;
- .oo-ui-buttonElement-button {
- padding: 0 1em;
- vertical-align: middle;
- /* Adjust for border so text
aligns with title */
- margin: -1px;
- }
+ margin: 0.5em;
}
&.oo-ui-buttonElement-frameless {
margin: 0;
+
.oo-ui-buttonElement-button {
padding: 0.75em 1em;
vertical-align: middle;
+ }
+
+ .oo-ui-labelElement-label {
+ line-height: @icon-size;
}
}
}
@@ -186,7 +172,7 @@
&-safe,
&-primary {
- .oo-ui-actionWidget {
+ .oo-ui-actionWidget.oo-ui-buttonElement-frameless {
&:hover {
background-color: rgba(0,0,0,0.05);
}
--
To view, visit https://gerrit.wikimedia.org/r/216864
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8d0604320dbbc6008797ff000e3b39e151915fbd
Gerrit-PatchSet: 17
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Nirzar <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
