Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/283181
Change subject: Apex theme: Change variable names to match MediaWiki theme
......................................................................
Apex theme: Change variable names to match MediaWiki theme
It's annoying to switch these around mentally when writing styles for
different themes.
* @icon-size -> @size-icon
* @indicator-size -> @size-indicator
Change-Id: I2bc62eeb2ccc1f7b84321375f09a8919bb3708f4
---
M src/themes/apex/common.less
M src/themes/apex/elements.less
M src/themes/apex/layouts.less
M src/themes/apex/widgets.less
M src/themes/apex/windows.less
5 files changed, 50 insertions(+), 50 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/81/283181/1
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 2f4a8c9..659fdbd 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -17,8 +17,8 @@
@oo-ui-default-image-path: 'themes/apex/images';
-@icon-size: unit(24 / 16 / 0.8, em);
-@indicator-size: unit(12 / 16 / 0.8, em);
+@size-icon: unit(24 / 16 / 0.8, em);
+@size-indicator: unit(12 / 16 / 0.8, em);
// Theme animation variables
@quick-ease: 100ms ease;
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 5fa7323..b85ce7c 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -15,18 +15,18 @@
&.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
> .oo-ui-indicatorElement-indicator {
- width: @indicator-size;
- height: @indicator-size;
- margin: @indicator-size / 2;
+ width: @size-indicator;
+ height: @size-indicator;
+ margin: @size-indicator / 2;
}
}
&.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- margin-left: @indicator-size / 2;
+ margin-left: @size-indicator / 2;
}
&.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
- width: @icon-size;
- height: @icon-size;
+ width: @size-icon;
+ height: @size-icon;
}
&-frameless {
@@ -115,7 +115,7 @@
// 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: @size-icon;
}
&.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
@@ -146,7 +146,7 @@
&.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator,
&.oo-ui-iconElement:not( .oo-ui-labelElement ) >
.oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
- margin-left: @indicator-size / 2;
+ margin-left: @size-indicator / 2;
margin-right: -0.275em;
}
}
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index df81a67..e055733 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -126,8 +126,8 @@
&.oo-ui-iconElement > .oo-ui-iconElement-icon {
left: 0;
top: 0.25em;
- width: @icon-size;
- height: @icon-size;
+ width: @size-icon;
+ height: @size-icon;
}
> .oo-ui-popupButtonWidget {
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 0894619..185ce8e 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -66,14 +66,14 @@
&.oo-ui-buttonElement-frameless > .oo-ui-popupWidget {
// Compensate for icon being inset
/* @noflip */
- left: @icon-size / 2;
+ left: @size-icon / 2;
}
&.oo-ui-buttonElement-framed > .oo-ui-popupWidget {
// Compensate for icon being inset
// Button has padding-left: 0.8em;, icon has margin-left:
-0.5em;
/* @noflip */
- left: @icon-size / 2 + 0.8em - 0.5em;
+ left: @size-icon / 2 + 0.8em - 0.5em;
}
}
@@ -83,8 +83,8 @@
.theme-oo-ui-iconWidget () {
line-height: 2.5em;
- height: @icon-size;
- width: @icon-size;
+ height: @size-icon;
+ width: @size-icon;
&.oo-ui-widget-disabled {
opacity: 0.2;
@@ -93,9 +93,9 @@
.theme-oo-ui-indicatorWidget () {
line-height: 2.5em;
- height: @indicator-size;
- width: @indicator-size;
- margin: @indicator-size / 2;
+ height: @size-indicator;
+ width: @size-indicator;
+ margin: @size-indicator / 2;
&.oo-ui-widget-disabled {
opacity: 0.2;
@@ -133,15 +133,15 @@
.oo-ui-indicatorElement-indicator {
top: 0;
- width: @indicator-size;
- height: @indicator-size;
+ width: @size-indicator;
+ height: @size-indicator;
margin: 0.775em;
}
.oo-ui-iconElement-icon {
top: 0;
- width: @icon-size;
- height: @icon-size;
+ width: @size-icon;
+ height: @size-icon;
margin: 0.3em;
}
}
@@ -214,7 +214,7 @@
> .oo-ui-selectFileWidget-clearButton {
top: 0;
- width: @icon-size;
+ width: @size-icon;
margin-right: 0;
.oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
height: 2.3em;
@@ -223,14 +223,14 @@
> .oo-ui-indicatorElement-indicator {
top: 0;
- width: @indicator-size;
+ width: @size-indicator;
height: 2.3em;
margin-right: 0.775em;
}
> .oo-ui-iconElement-icon {
top: 0;
- width: @icon-size;
+ width: @size-icon;
height: 2.3em;
margin-left: 0.3em;
}
@@ -258,14 +258,14 @@
&.oo-ui-iconElement .oo-ui-selectFileWidget-info {
.oo-ui-selectFileWidget-label {
- left: @icon-size + 0.6em;
+ left: @size-icon + 0.6em;
}
}
// With close, no indicator:
& .oo-ui-selectFileWidget-info {
.oo-ui-selectFileWidget-label {
- right: @icon-size + 0.3em;
+ right: @size-icon + 0.3em;
}
.oo-ui-selectFileWidget-clearButton {
@@ -276,11 +276,11 @@
// With close, with indicator:
&.oo-ui-indicatorElement .oo-ui-selectFileWidget-info {
.oo-ui-selectFileWidget-label {
- right: @indicator-size + 1.55em - 0.4em + @icon-size +
0.3em;
+ right: @size-indicator + 1.55em - 0.4em + @size-icon +
0.3em;
}
.oo-ui-selectFileWidget-clearButton {
- right: @indicator-size + 1.55em - 0.4em;
+ right: @size-indicator + 1.55em - 0.4em;
}
}
@@ -449,11 +449,11 @@
&.oo-ui-iconElement {
input,
textarea {
- padding-left: @icon-size + 0.6em;
+ padding-left: @size-icon + 0.6em;
}
.oo-ui-iconElement-icon {
- width: @icon-size;
+ width: @size-icon;
max-height: 2.375em;
margin-left: 0.3em;
}
@@ -462,11 +462,11 @@
&.oo-ui-indicatorElement {
input,
textarea {
- padding-right: @indicator-size + 1.55em;
+ padding-right: @size-indicator + 1.55em;
}
.oo-ui-indicatorElement-indicator {
- width: @indicator-size;
+ width: @size-indicator;
max-height: 2.375em;
margin-right: 0.775em;
}
@@ -480,13 +480,13 @@
&-labelPosition-after {
&.oo-ui-indicatorElement > .oo-ui-labelElement-label {
- margin-right: @indicator-size + 1.55em - 0.4em;
+ margin-right: @size-indicator + 1.55em - 0.4em;
}
}
&-labelPosition-before {
&.oo-ui-iconElement > .oo-ui-labelElement-label {
- margin-left: @icon-size + 0.6em - 0.4em;
+ margin-left: @size-icon + 0.6em - 0.4em;
}
}
}
@@ -552,25 +552,25 @@
}
&.oo-ui-indicatorElement &-handle {
- padding-right: @indicator-size + 2 * 0.775em;
+ padding-right: @size-indicator + 2 * 0.775em;
> .oo-ui-indicatorElement-indicator {
right: 0;
top: 0;
- width: @indicator-size;
- height: @indicator-size;
+ width: @size-indicator;
+ height: @size-indicator;
margin: 0.775em;
}
}
&.oo-ui-iconElement &-handle {
- padding-left: @icon-size + 2 * 0.3em;
+ padding-left: @size-icon + 2 * 0.3em;
> .oo-ui-iconElement-icon {
left: 0;
top: 0;
- width: @icon-size;
- height: @icon-size;
+ width: @size-icon;
+ height: @size-icon;
margin: 0.3em;
}
}
@@ -669,12 +669,12 @@
}
&.oo-ui-iconElement .oo-ui-iconElement-icon {
- width: @icon-size;
+ width: @size-icon;
left: 0.5em;
}
&.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- width: @indicator-size;
+ width: @size-indicator;
right: 0.5em;
}
@@ -691,7 +691,7 @@
background-color: transparent;
.oo-ui-buttonElement-button {
- height: @icon-size;
+ height: @size-icon;
}
&.oo-ui-iconElement .oo-ui-iconElement-icon {
diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less
index 164ac22..28db43c 100644
--- a/src/themes/apex/windows.less
+++ b/src/themes/apex/windows.less
@@ -145,14 +145,14 @@
&-location {
padding: 0.75em 0;
- height: @icon-size;
+ height: @size-icon;
cursor: default;
text-align: center;
}
&-title {
font-weight: bold;
- line-height: @icon-size;
+ line-height: @size-icon;
}
&-actions {
@@ -161,12 +161,12 @@
&-other {
.oo-ui-actionWidget {
.oo-ui-buttonElement-button {
- min-width: @icon-size;
- min-height: @icon-size;
+ min-width: @size-icon;
+ min-height: @size-icon;
}
.oo-ui-labelElement-label {
- line-height: @icon-size;
+ line-height: @size-icon;
}
&.oo-ui-iconElement .oo-ui-iconElement-icon {
--
To view, visit https://gerrit.wikimedia.org/r/283181
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2bc62eeb2ccc1f7b84321375f09a8919bb3708f4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
