jenkins-bot has submitted this change and it was merged.
Change subject: styles: Give icons, indicators `min-width/-height` for
cross-browser support
......................................................................
styles: Give icons, indicators `min-width/-height` for cross-browser support
This fixes the appearance of icon and indicator elements in IE 11,
Edge 12+, and Firefox 31.5.0ESR at normal zoom level, by adding
`min-width` and `min-height` properties to them.
Also nesting child elements under a single Less selector as minor improvement.
Bug: T93636
Bug: T94494
Change-Id: I8987dade5ed627007d953c67be3f4e45c5164f58
---
M src/styles/elements/IconElement.less
M src/styles/elements/IndicatorElement.less
M src/themes/apex/common.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
6 files changed, 20 insertions(+), 5 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/styles/elements/IconElement.less
b/src/styles/elements/IconElement.less
index 69fde3e..4a76b4f 100644
--- a/src/styles/elements/IconElement.less
+++ b/src/styles/elements/IconElement.less
@@ -6,7 +6,11 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ // Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
+ min-width: @size-icon-min;
width: @size-icon;
+ // Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
+ min-height: @size-icon-min;
height: @size-icon;
}
diff --git a/src/styles/elements/IndicatorElement.less
b/src/styles/elements/IndicatorElement.less
index 7fef7b2..5584dbd 100644
--- a/src/styles/elements/IndicatorElement.less
+++ b/src/styles/elements/IndicatorElement.less
@@ -6,7 +6,11 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ // Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
+ min-width: @size-indicator-min;
width: @size-indicator;
+ // Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
+ min-height: @size-indicator-min;
height: @size-indicator;
}
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 659fdbd..03253e1 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -17,6 +17,8 @@
@oo-ui-default-image-path: 'themes/apex/images';
+@size-icon-min: 24px;
+@size-indicator-min: 12px;
@size-icon: unit(24 / 16 / 0.8, em);
@size-indicator: unit(12 / 16 / 0.8, em);
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 3e18dda..4eb51a6 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -34,6 +34,8 @@
// Invalid Widget (validation error feedback)
@color-invalid: #f00;
+@size-icon-min: 24px;
+@size-indicator-min: 12px;
@size-icon: unit( 24 / 16 / 0.8, em );
@size-indicator: unit( 12 / 16 / 0.8, em );
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index d3cd859..df2ff5a 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -8,12 +8,14 @@
text-decoration: none;
}
- &.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
- margin-left: 0;
- }
+ &.oo-ui-iconElement > .oo-ui-buttonElement-button {
+ > .oo-ui-iconElement-icon {
+ margin-left: 0;
+ }
- &.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- margin-left: @size-indicator / 2;
+ > .oo-ui-indicatorElement-indicator {
+ margin-left: @size-indicator / 2;
+ }
}
&-frameless {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index b523a41..351e2bd 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -210,6 +210,7 @@
> .oo-ui-selectFileWidget-clearButton {
top: 0;
+ min-width: @size-icon-min;
width: @size-icon;
margin-right: 0;
--
To view, visit https://gerrit.wikimedia.org/r/282855
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8987dade5ed627007d953c67be3f4e45c5164f58
Gerrit-PatchSet: 7
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: GOIII <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Mattflaschen <[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
