Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/283182
Change subject: Centralise the width/height properties of icons and indicators
......................................................................
Centralise the width/height properties of icons and indicators
Change-Id: I981476a906ac01a865986d754f655c7ab2b91ca4
---
M src/styles/elements/IconElement.less
M src/styles/elements/IndicatorElement.less
M src/themes/apex/elements.less
M src/themes/apex/layouts.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/layouts.less
M src/themes/mediawiki/widgets.less
8 files changed, 30 insertions(+), 71 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/82/283182/1
diff --git a/src/styles/elements/IconElement.less
b/src/styles/elements/IconElement.less
index c3148a4..69fde3e 100644
--- a/src/styles/elements/IconElement.less
+++ b/src/styles/elements/IconElement.less
@@ -6,6 +6,8 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ width: @size-icon;
+ height: @size-icon;
}
.theme-oo-ui-iconElement();
diff --git a/src/styles/elements/IndicatorElement.less
b/src/styles/elements/IndicatorElement.less
index 321442f..7fef7b2 100644
--- a/src/styles/elements/IndicatorElement.less
+++ b/src/styles/elements/IndicatorElement.less
@@ -6,6 +6,8 @@
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
+ width: @size-indicator;
+ height: @size-indicator;
}
.theme-oo-ui-indicatorElement();
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index b85ce7c..70686f4 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -7,26 +7,16 @@
color: #333;
}
- &.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-indicatorElement > .oo-ui-buttonElement-button {
- > .oo-ui-indicatorElement-indicator {
- width: @size-indicator;
- height: @size-indicator;
- margin: @size-indicator / 2;
- }
+ &.oo-ui-indicatorElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
+ margin: @size-indicator / 2;
}
&.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 {
- width: @size-icon;
- height: @size-icon;
}
&-frameless {
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index e055733..60be239 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -126,8 +126,6 @@
&.oo-ui-iconElement > .oo-ui-iconElement-icon {
left: 0;
top: 0.25em;
- width: @size-icon;
- height: @size-icon;
}
> .oo-ui-popupButtonWidget {
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 185ce8e..c121df4 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -83,8 +83,6 @@
.theme-oo-ui-iconWidget () {
line-height: 2.5em;
- height: @size-icon;
- width: @size-icon;
&.oo-ui-widget-disabled {
opacity: 0.2;
@@ -93,8 +91,6 @@
.theme-oo-ui-indicatorWidget () {
line-height: 2.5em;
- height: @size-indicator;
- width: @size-indicator;
margin: @size-indicator / 2;
&.oo-ui-widget-disabled {
@@ -133,15 +129,11 @@
.oo-ui-indicatorElement-indicator {
top: 0;
- width: @size-indicator;
- height: @size-indicator;
margin: 0.775em;
}
.oo-ui-iconElement-icon {
top: 0;
- width: @size-icon;
- height: @size-icon;
margin: 0.3em;
}
}
@@ -223,14 +215,12 @@
> .oo-ui-indicatorElement-indicator {
top: 0;
- width: @size-indicator;
height: 2.3em;
margin-right: 0.775em;
}
> .oo-ui-iconElement-icon {
top: 0;
- width: @size-icon;
height: 2.3em;
margin-left: 0.3em;
}
@@ -453,7 +443,6 @@
}
.oo-ui-iconElement-icon {
- width: @size-icon;
max-height: 2.375em;
margin-left: 0.3em;
}
@@ -466,7 +455,6 @@
}
.oo-ui-indicatorElement-indicator {
- width: @size-indicator;
max-height: 2.375em;
margin-right: 0.775em;
}
@@ -557,8 +545,6 @@
> .oo-ui-indicatorElement-indicator {
right: 0;
top: 0;
- width: @size-indicator;
- height: @size-indicator;
margin: 0.775em;
}
}
@@ -569,8 +555,6 @@
> .oo-ui-iconElement-icon {
left: 0;
top: 0;
- width: @size-icon;
- height: @size-icon;
margin: 0.3em;
}
}
@@ -669,12 +653,10 @@
}
&.oo-ui-iconElement .oo-ui-iconElement-icon {
- width: @size-icon;
left: 0.5em;
}
&.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- width: @size-indicator;
right: 0.5em;
}
@@ -703,6 +685,15 @@
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
}
+
+ // Override DecoratedOptionWidget styles
+ &.oo-ui-iconElement .oo-ui-iconElement-icon {
+ height: @size-icon;
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ height: @size-indicator;
+ }
}
.theme-oo-ui-radioOptionWidget () {
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 869b8bc..d3cd859 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -8,25 +8,12 @@
text-decoration: none;
}
- &.oo-ui-iconElement > .oo-ui-buttonElement-button {
- > .oo-ui-iconElement-icon {
- margin-left: 0;
- }
- }
-
- &.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
- > .oo-ui-indicatorElement-indicator {
- width: @size-indicator;
- height: @size-indicator;
- }
+ &.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-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
- width: @size-icon;
- height: @size-icon;
}
&-frameless {
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
index efb63c9..fb027a3 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/layouts.less
@@ -131,8 +131,6 @@
&.oo-ui-iconElement > .oo-ui-iconElement-icon {
left: 0;
top: 0.25em;
- width: @size-icon;
- height: @size-icon;
}
> .oo-ui-popupButtonWidget {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index d437a28..63b0b40 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -80,8 +80,6 @@
.theme-oo-ui-iconWidget () {
line-height: 2.5em;
- width: @size-icon;
- height: @size-icon;
&.oo-ui-widget-disabled {
opacity: @opacity-disabled;
@@ -90,8 +88,6 @@
.theme-oo-ui-indicatorWidget () {
line-height: 2.5em;
- width: @size-indicator;
- height: @size-indicator;
margin: @size-indicator / 2;
&.oo-ui-widget-disabled {
@@ -127,15 +123,11 @@
.oo-ui-indicatorElement-indicator {
top: 0;
- width: @size-indicator;
- height: @size-indicator;
margin: 0.775em;
}
.oo-ui-iconElement-icon {
top: 0;
- width: @size-icon;
- height: @size-icon;
margin: 0.3em;
}
}
@@ -214,6 +206,7 @@
top: 0;
width: @size-icon;
margin-right: 0;
+
.oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
height: 2.3em;
}
@@ -221,14 +214,12 @@
> .oo-ui-indicatorElement-indicator {
top: 0;
- width: @size-indicator;
height: 2.3em;
margin-right: 0.775em;
}
> .oo-ui-iconElement-icon {
top: 0;
- width: @size-icon;
height: 2.3em;
margin-left: 0.5em;
}
@@ -652,10 +643,9 @@
.oo-ui-iconElement-icon {
left: 0;
- width: @size-icon;
+ height: 100%;
max-height: 2.375em;
margin-left: 0.5em;
- height: 100%;
background-position: right center;
}
}
@@ -667,10 +657,9 @@
}
.oo-ui-indicatorElement-indicator {
- width: @size-indicator;
+ height: 100%;
max-height: 2.375em;
margin: 0 0.775em;
- height: 100%;
}
}
@@ -753,8 +742,6 @@
> .oo-ui-indicatorElement-indicator {
right: 0;
top: 0;
- width: @size-indicator;
- height: @size-indicator;
margin: 0.775em;
}
}
@@ -765,8 +752,6 @@
> .oo-ui-iconElement-icon {
left: 0;
top: 0;
- width: @size-icon;
- height: @size-icon;
margin: 0.3em;
}
}
@@ -857,12 +842,10 @@
}
&.oo-ui-iconElement .oo-ui-iconElement-icon {
- width: @size-icon;
left: 0.5em;
}
&.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- width: @size-indicator;
right: 0.5em;
}
@@ -895,6 +878,14 @@
opacity: 1;
}
}
+
+ &.oo-ui-iconElement .oo-ui-iconElement-icon {
+ height: @size-icon;
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ height: @size-indicator;
+ }
}
.theme-oo-ui-radioOptionWidget () {
--
To view, visit https://gerrit.wikimedia.org/r/283182
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I981476a906ac01a865986d754f655c7ab2b91ca4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
