[MediaWiki-commits] [Gerrit] oojs/ui[master]: Generalize icon and indicator positioning & visibility
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/382353 )
Change subject: Generalize icon and indicator positioning & visibility
..
Generalize icon and indicator positioning & visibility
Generalizing icon and indicator positioning & visibility
foremost in WikimediaUI theme. This results in much cleaner
and simpler output, easier debuggability and saves about
2% output CSS.
Bug: T161177
Change-Id: I9d0cbf5d069ae0ecdb56501fb6f352ba68d29c1f
---
M src/styles/elements/ButtonElement.less
M src/styles/elements/IconElement.less
M src/styles/elements/IndicatorElement.less
M src/styles/layouts/FieldsetLayout.less
M src/styles/toolgroups/BarToolGroup.less
M src/styles/toolgroups/PopupToolGroup.less
M src/styles/widgets/ButtonOptionWidget.less
M src/styles/widgets/CapsuleMultiselectWidget.less
M src/styles/widgets/DecoratedOptionWidget.less
M src/styles/widgets/DropdownWidget.less
M src/styles/widgets/SelectFileWidget.less
M src/styles/widgets/TextInputWidget.less
M src/themes/apex/elements.less
M src/themes/apex/layouts.less
M src/themes/apex/tools.less
M src/themes/apex/widgets.less
M src/themes/wikimediaui/elements.less
M src/themes/wikimediaui/layouts.less
M src/themes/wikimediaui/tools.less
M src/themes/wikimediaui/widgets.less
20 files changed, 152 insertions(+), 154 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/src/styles/elements/ButtonElement.less
b/src/styles/elements/ButtonElement.less
index 67524b9..c89263b 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -20,23 +20,10 @@
border-color: transparent;
padding: 0;
}
-
- > .oo-ui-iconElement-icon,
- > .oo-ui-indicatorElement-indicator {
- display: none;
- }
}
&.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
cursor: default;
- }
-
- &.oo-ui-indicatorElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator,
- &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label,
- &-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
- // Vertical align text
- display: inline-block;
- vertical-align: middle;
}
&-frameless {
diff --git a/src/styles/elements/IconElement.less
b/src/styles/elements/IconElement.less
index 120454b..a7bdc13 100644
--- a/src/styles/elements/IconElement.less
+++ b/src/styles/elements/IconElement.less
@@ -6,12 +6,15 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ display: none;
+ position: absolute;
+ top: 0;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-width: @min-size-icon;
width: @size-icon;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-height: @min-size-icon;
- height: @size-icon;
+ height: 100%;
}
.theme-oo-ui-iconElement();
diff --git a/src/styles/elements/IndicatorElement.less
b/src/styles/elements/IndicatorElement.less
index b4a6a6d..9819345 100644
--- a/src/styles/elements/IndicatorElement.less
+++ b/src/styles/elements/IndicatorElement.less
@@ -6,12 +6,15 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ display: none;
+ position: absolute;
+ top: 0;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-width: @min-size-indicator;
width: @size-indicator;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-height: @min-size-indicator;
- height: @size-indicator;
+ height: 100%;
}
.theme-oo-ui-indicatorElement();
diff --git a/src/styles/layouts/FieldsetLayout.less
b/src/styles/layouts/FieldsetLayout.less
index aaee46b..8d8e8e1 100644
--- a/src/styles/layouts/FieldsetLayout.less
+++ b/src/styles/layouts/FieldsetLayout.less
@@ -11,11 +11,6 @@
display: table-cell; // Prevent overflowing content in Firefox
(responsive layouts)
}
- &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-iconElement-icon {
- display: block;
- position: absolute;
- }
-
&.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
color: inherit; // Correct the color inheritance from
`fieldset` elements in IE
display: inline-table; // Correct the
[MediaWiki-commits] [Gerrit] oojs/ui[master]: Generalize icon and indicator positioning & visibility
VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/382353 )
Change subject: Generalize icon and indicator positioning & visibility
..
Generalize icon and indicator positioning & visibility
Generalizing icon and indicator positioning & visibility
foremost in WikimediaUI theme.
Bug: T161177
Change-Id: I9d0cbf5d069ae0ecdb56501fb6f352ba68d29c1f
---
M src/styles/elements/ButtonElement.less
M src/styles/elements/IconElement.less
M src/styles/elements/IndicatorElement.less
M src/styles/layouts/FieldsetLayout.less
M src/styles/toolgroups/BarToolGroup.less
M src/styles/toolgroups/PopupToolGroup.less
M src/styles/widgets/ButtonOptionWidget.less
M src/styles/widgets/CapsuleMultiselectWidget.less
M src/styles/widgets/DecoratedOptionWidget.less
M src/styles/widgets/DropdownWidget.less
M src/styles/widgets/SelectFileWidget.less
M src/styles/widgets/TextInputWidget.less
M src/themes/apex/elements.less
M src/themes/apex/layouts.less
M src/themes/apex/tools.less
M src/themes/apex/widgets.less
M src/themes/wikimediaui/elements.less
M src/themes/wikimediaui/layouts.less
M src/themes/wikimediaui/tools.less
M src/themes/wikimediaui/widgets.less
20 files changed, 127 insertions(+), 154 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/53/382353/1
diff --git a/src/styles/elements/ButtonElement.less
b/src/styles/elements/ButtonElement.less
index 67524b9..c89263b 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -20,23 +20,10 @@
border-color: transparent;
padding: 0;
}
-
- > .oo-ui-iconElement-icon,
- > .oo-ui-indicatorElement-indicator {
- display: none;
- }
}
&.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
cursor: default;
- }
-
- &.oo-ui-indicatorElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator,
- &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label,
- &-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
- // Vertical align text
- display: inline-block;
- vertical-align: middle;
}
&-frameless {
diff --git a/src/styles/elements/IconElement.less
b/src/styles/elements/IconElement.less
index 120454b..a7bdc13 100644
--- a/src/styles/elements/IconElement.less
+++ b/src/styles/elements/IconElement.less
@@ -6,12 +6,15 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ display: none;
+ position: absolute;
+ top: 0;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-width: @min-size-icon;
width: @size-icon;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-height: @min-size-icon;
- height: @size-icon;
+ height: 100%;
}
.theme-oo-ui-iconElement();
diff --git a/src/styles/elements/IndicatorElement.less
b/src/styles/elements/IndicatorElement.less
index b4a6a6d..9819345 100644
--- a/src/styles/elements/IndicatorElement.less
+++ b/src/styles/elements/IndicatorElement.less
@@ -6,12 +6,15 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ display: none;
+ position: absolute;
+ top: 0;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-width: @min-size-indicator;
width: @size-indicator;
// Support: IE11, Edge 12+ (T94494), Firefox 31.5 (T93636)
min-height: @min-size-indicator;
- height: @size-indicator;
+ height: 100%;
}
.theme-oo-ui-indicatorElement();
diff --git a/src/styles/layouts/FieldsetLayout.less
b/src/styles/layouts/FieldsetLayout.less
index aaee46b..8d8e8e1 100644
--- a/src/styles/layouts/FieldsetLayout.less
+++ b/src/styles/layouts/FieldsetLayout.less
@@ -11,11 +11,6 @@
display: table-cell; // Prevent overflowing content in Firefox
(responsive layouts)
}
- &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-iconElement-icon {
- display: block;
- position: absolute;
- }
-
&.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
color: inherit; // Correct the color inheritance from
`fieldset` elements in IE
display: inline-table; // Correct the text wrapping in Edge and
IE
diff --git a/src/styles/toolgroups/BarToolGroup.less
