jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/360328 )
Change subject: themes: Align variable names to WikimediaUI Base scheme
......................................................................
themes: Align variable names to WikimediaUI Base scheme
Align variable names to WikimediaUI Base scheme, renaming
`*-default` to `*-base` with exception of `@oo-ui-default-image-path`.
Bug: T165650
Change-Id: Ie798a2808a7069b5b9b9ef0bf44574d4940b5f92
---
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/blank/common.less
M src/themes/wikimediaui/common.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
M src/themes/wikimediaui/windows.less
11 files changed, 341 insertions(+), 341 deletions(-)
Approvals:
Prtksxna: Looks good to me, but someone else must approve
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 6ce1441..5f4cbd3 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -3,7 +3,7 @@
@background-color-main: #fff;
-@color-default: #333;
+@color-base: #333;
@progressive: #087ecc;
@constructive: #76ab36;
@@ -29,8 +29,8 @@
@min-width-icon-numberinput: 20px;
@min-size-indicator: 12px;
@min-size-tagitem-close: 20px;
-@max-width-default: 50em;
-@max-width-input-default: @max-width-default;
+@max-width-base: 50em;
+@max-width-input-base: @max-width-base;
@size-anchor: 6px;
@size-icon: unit( 24 / 16 / 0.8, em );
@@ -40,21 +40,21 @@
@start-frameless: -@padding-horizontal-frameless;
-@border-radius-default: 0.25em;
+@border-radius-base: 0.25em;
@border-radius-button: 0.3em;
@border-radius-taboption: 0.5em;
-@padding-default: @padding-vertical-default @padding-horizontal-default;
+@padding-base: @padding-vertical-base @padding-horizontal-base;
@padding-frameless: @padding-vertical-frameless @padding-horizontal-frameless;
-@padding-vertical-default: unit( 3 / 16 / 0.8, em );
-@padding-horizontal-default: unit( 10 / 16 / 0.8, em );
+@padding-vertical-base: unit( 3 / 16 / 0.8, em );
+@padding-horizontal-base: unit( 10 / 16 / 0.8, em );
@padding-horizontal-frameless: unit( 4 / 16 / 0.8, em );
@padding-vertical-frameless: unit( 4 / 16 / 0.8, em );
@padding-top-textinput: unit( 7 / 16 / 0.8, em );
@padding-start-frameless-icon-only: unit( 32 / 16 / 0.8, em );
@padding-bottom-textinput: unit( 8 / 16 / 0.8, em );
-@line-height-default: 1.4;
+@line-height-base: 1.4;
// Theme animation variables
// Some of these values are duplicated in OO.ui.ApexTheme
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index dd85330..f33458d 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -4,7 +4,7 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
- color: @color-default;
+ color: @color-base;
border-radius: @border-radius-button;
&:focus {
@@ -51,7 +51,7 @@
}
> .oo-ui-labelElement-label {
- color: @color-default;
+ color: @color-base;
}
}
@@ -65,7 +65,7 @@
padding: @padding-frameless;
> .oo-ui-labelElement-label {
- color: @color-default;
+ color: @color-base;
margin-left: 0.25em;
}
}
@@ -86,7 +86,7 @@
// Support `<input>` from ButtonInputWidget
> input.oo-ui-buttonElement-button {
padding-left: 0.25em;
- color: @color-default;
+ color: @color-base;
&:hover,
&:focus {
@@ -121,7 +121,7 @@
&-framed {
> .oo-ui-buttonElement-button {
- padding: @padding-default;
+ padding: @padding-base;
text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.5 );
border: 1px #c9c9c9 solid;
.oo-ui-transition( border-color @quick-ease );
@@ -227,7 +227,7 @@
// Opacity causes 1px measurement errors in
Chrome, so force GPU rendering
.oo-ui-force-gpu-composite-layer();
box-shadow: none;
- color: @color-default;
+ color: @color-base;
background: #eee;
border-color: #ccc;
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index 0287550..1ac5ddf 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -59,7 +59,7 @@
margin-top: 1.25em;
& > .oo-ui-fieldLayout-body {
- max-width: @max-width-default;
+ max-width: @max-width-base;
}
&.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
@@ -73,7 +73,7 @@
&.oo-ui-fieldLayout-align-top {
&.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
- max-width: @max-width-default;
+ max-width: @max-width-base;
padding: 0.5em 0;
}
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index c335216..5ec7dfe 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -111,7 +111,7 @@
line-height: 1.7em;
.oo-ui-vertical-gradient(#fff, #ddd);
border: 1px solid #ccc;
- color: @color-default;
+ color: @color-base;
border-radius: 0.25em;
&:focus {
@@ -152,7 +152,7 @@
.theme-oo-ui-capsuleMultiselectWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
&-handle {
background-color: @background-color-main;
@@ -234,7 +234,7 @@
.theme-oo-ui-comboBoxInputWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
.oo-ui-inline-spacing( 0.5em );
&-dropdownButton {
@@ -297,7 +297,7 @@
.theme-oo-ui-dropdownWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
background-color: @background-color-main;
.oo-ui-inline-spacing( 0.5em );
@@ -353,7 +353,7 @@
.theme-oo-ui-dropdownInputWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
select {
background-color: @background-color-main;
@@ -470,7 +470,7 @@
.theme-oo-ui-multiselectWidget () {}
.theme-oo-ui-numberInputWidget () {
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
&-field > .oo-ui-buttonWidget {
width: 2.25em;
@@ -732,7 +732,7 @@
}
.theme-oo-ui-progressBarWidget () {
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
background-color: @background-color-main;
border: 1px solid #ccc;
border-radius: 0.25em;
@@ -826,12 +826,12 @@
.theme-oo-ui-selectFileWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
.oo-ui-inline-spacing( 0.5em );
&-selectButton {
> .oo-ui-buttonElement-button {
- border-radius: 0 @border-radius-default
@border-radius-default 0;
+ border-radius: 0 @border-radius-base
@border-radius-base 0;
}
}
@@ -839,7 +839,7 @@
height: 2.4em;
background-color: @background-color-main;
border: 1px solid rgba( 0, 0, 0, 0.1 );
- border-radius: @border-radius-default 0 0
@border-radius-default;
+ border-radius: @border-radius-base 0 0 @border-radius-base;
border-width: 1px 0 1px 1px;
> .oo-ui-iconElement-icon {
@@ -930,16 +930,16 @@
background-color: @background-color-main;
border: 1px solid #aaa;
vertical-align: middle;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
.oo-ui-selectFileWidget-selectButton {
> .oo-ui-buttonElement-button {
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
}
}
.oo-ui-selectFileWidget-label {
- line-height: @line-height-default;
+ line-height: @line-height-base;
overflow: inherit;
white-space: normal;
}
@@ -1029,7 +1029,7 @@
line-height: 1.7em;
.oo-ui-vertical-gradient(#fff, #ddd);
border: 1px solid #ccc;
- color: @color-default;
+ color: @color-base;
border-radius: 0.25em;
&:focus {
@@ -1070,7 +1070,7 @@
.theme-oo-ui-tagMultiselectWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
&-handle {
background-color: @background-color-main;
@@ -1152,7 +1152,7 @@
.theme-oo-ui-textInputWidget () {
width: 100%;
- max-width: @max-width-input-default;
+ max-width: @max-width-input-base;
input,
textarea {
diff --git a/src/themes/blank/common.less b/src/themes/blank/common.less
index e76d596..f6cf2a4 100644
--- a/src/themes/blank/common.less
+++ b/src/themes/blank/common.less
@@ -3,13 +3,13 @@
@oo-ui-default-image-path: 'themes/blank/images';
@oo-ui-font-size-browser: 16; // assumed browser default of `16px`
-@oo-ui-font-size-default: 0.8em; // equals `12.8px` at browser default of
`16px`
+@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`
// `@*size` variables are used for `*width` & `*height` properties
@min-size-icon: 24px; // values used for `min-height` are defined in `px`, see
T130691
@min-size-indicator: 12px;
-@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `1.875em`≈`24px` at base `font-size: 12.8px`
-@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.9375em`≈`12px` at base `font-size: 12.8px`
+@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals
`1.875em`≈`24px` at base `font-size: 12.8px`
+@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `0.9375em`≈`12px` at base `font-size: 12.8px`
// Theme mixins
diff --git a/src/themes/wikimediaui/common.less
b/src/themes/wikimediaui/common.less
index 532d14a..ecfc126 100644
--- a/src/themes/wikimediaui/common.less
+++ b/src/themes/wikimediaui/common.less
@@ -2,17 +2,17 @@
@oo-ui-default-image-path: 'themes/wikimediaui/images';
@oo-ui-font-size-browser: 16; // assumed browser default of `16px`
-@oo-ui-font-size-default: 0.8em; // equals `12.8px` at browser default of
`16px`
+@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`
-@background-color-default: #fff;
-@background-color-default-hover: #eaecf0;
+@background-color-base: #fff;
+@background-color-base-hover: #eaecf0;
@background-color-readonly: #f8f9fa;
-@color-default: #222;
-@color-default-hover: #444;
-@color-default-active: #000;
-@color-default-light: #fff;
-@color-emphasized: @color-default-active;
+@color-base: #222;
+@color-base-hover: #444;
+@color-base-active: #000;
+@color-base-light: #fff;
+@color-emphasized: @color-base-active;
@color-placeholder: #72777d; // equals HSB 210°/9%/49%, aligns to WCAG 2.0
level AA at 4.52:1 contrast ratio
@color-subtle: #72777d;
@@ -36,7 +36,7 @@
@background-color-disabled: #eaecf0;
@background-color-disabled-filled: #c8ccd1;
@color-disabled: #72777d;
-@color-disabled-filled: @color-default-light;
+@color-disabled-filled: @color-base-light;
@opacity-disabled: 0.51; // `0.51` equals `#7d7d7d` on background-color
`#fff`, HSB 0°/0%/49%
@opacity-disabled-filled: 1;
@opacity-disabled-indicator: 0.15; // equals `#c7c8cc` on background-color
`#fff`
@@ -47,130 +47,130 @@
// "Framed" Widgets (Framed ButtonWidget, ToggleSwitchWidget...)
@background-color-framed: #f8f9fa;
-@background-color-framed-hover: @background-color-default; // equals `lighten(
#f8f9fa, 10% )`, although `2%` is already resulting in `#fff`
+@background-color-framed-hover: @background-color-base; // equals `lighten(
#f8f9fa, 10% )`, although `2%` is already resulting in `#fff`
@background-color-framed-active: #c8ccd1;
// Tabbed Navigation
@background-color-tabs: #eaecf0;
// Toolbar, Tools & Menus
-@background-color-toolbar: @background-color-default;
-@background-color-tool-hover: @background-color-default-hover;
+@background-color-toolbar: @background-color-base;
+@background-color-tool-hover: @background-color-base-hover;
@background-color-tool-active: @background-color-progressive;
@background-color-tool-active-hover: @background-color-progressive-hover;
@color-tool-active: @color-progressive;
-@border-toolbar: @border-width-default solid #c8ccd1;
+@border-toolbar: @border-width-base solid #c8ccd1;
// Box Sizes
// `@*size` variables are used for `*width` & `*height` properties
-@size-default: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `2.5em`≈`32px`
+@size-base: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals
`2.5em`≈`32px`
@min-size-icon: 24px; // values used for `min-height` are defined in `px`, see
T130691
@min-size-indicator: 12px;
@min-size-tagitem-close: 20px;
-@min-width-button-default: 40 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.125em`≈`40px` at base `font-size: 12.8px`
-@min-width-button-combo-widget: @size-default;
+@min-width-button-base: 40 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `3.125em`≈`40px` at base `font-size: 12.8px`
+@min-width-button-combo-widget: @size-base;
@min-width-icon-numberinput: 20px;
-@min-height-widget-default: @size-default;
+@min-height-widget-base: @size-base;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min +
4px*2 distance top/bottom + 1px*2 border top/bottom
-@max-width-default: 50em;
-@max-width-input: @max-width-default;
+@max-width-base: 50em;
+@max-width-input: @max-width-base;
@size-anchor: 9px;
-@size-button-default: @size-default;
-@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `1.875em`≈`24px`
-@size-icon-numberinput: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.5625em`≈`20px`
-@size-icon-tagitem-close: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.9375em`≈`12px`
+@size-button-base: @size-base;
+@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals
`1.875em`≈`24px`
+@size-icon-numberinput: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `1.5625em`≈`20px`
+@size-icon-tagitem-close: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
-@size-dialog-bar-top: 44 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.4375em`≈`44px`
-@size-fieldlayout-help-icon: 22 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@size-dialog-bar-top: 44 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `3.4375em`≈`44px`
+@size-fieldlayout-help-icon: 22 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
-@start-framed-icon-only: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`; HACK: We have to break
with `@padding-start-input-text-icon` to perfectly center in
`@min-width-button-default`
-@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
-@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-default`
-@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.703125em`≈`9px`
+@start-framed-icon-only: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `0.547em`≈`7px`; HACK: We have to break with
`@padding-start-input-text-icon` to perfectly center in `@min-width-button-base`
+@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.46875em`≈`6px`
+@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-base`
+@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.703125em`≈`9px`
@start-frameless: -@start-frameless-icon;
-@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
-@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.390625em`≈`5px`;
`@padding-horizontal-tagitem` + `@border-width-default`
-@end-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.3125em`≈`4px`
+@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.390625em`≈`5px`;
`@padding-horizontal-tagitem` + `@border-width-base`
+@end-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals
`0.3125em`≈`4px`
@width-button-combo-widget: @min-width-button-combo-widget;
@height-icon-element: 100%;
-@height-search: 56 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `4.375em`≈`56px`; `height: 32px` + 2 * `margin: 12px`
-@height-tagitem: 22 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `1.71875em`≈`22px`;
+@height-search: 56 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `4.375em`≈`56px`; `height: 32px` + 2 * `margin: 12px`
+@height-tagitem: 22 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `1.71875em`≈`22px`;
-@margin-dialog-bar-button-framed: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@margin-search: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
+@margin-dialog-bar-button-framed: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@margin-search: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-taboption: @margin-dialog-bar-button-framed;
-@margin-button-close: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
-@margin-top-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
-@margin-top-tagmultiselect-input: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@margin-top-fieldlayout-help: -( 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default );
-@margin-top-fieldsetlayout-help: -( 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default ) / 2;
-@margin-bottom-fieldset-header: 8 / @oo-ui-font-size-browser / (
@oo-ui-font-size-default * @font-size-fieldset-header );
+@margin-button-close: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@margin-top-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@margin-top-tagmultiselect-input: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@margin-top-fieldlayout-help: -( 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base );
+@margin-top-fieldsetlayout-help: -( 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base ) / 2;
+@margin-bottom-fieldset-header: 8 / @oo-ui-font-size-browser / (
@oo-ui-font-size-base * @font-size-fieldset-header );
-@border-default: @border-width-default solid @border-color-default;
-@border-disabled: @border-width-default solid @border-color-disabled;
-@border-disabled-filled: @border-width-default solid
@border-color-disabled-filled;
-@border-dialog: @border-default;
-@border-dialog-bar: @border-width-default solid @border-color-dialog-bar;
-@border-menu: @border-default;
+@border-base: @border-width-base solid @border-color-base;
+@border-disabled: @border-width-base solid @border-color-disabled;
+@border-disabled-filled: @border-width-base solid
@border-color-disabled-filled;
+@border-dialog: @border-base;
+@border-dialog-bar: @border-width-base solid @border-color-dialog-bar;
+@border-menu: @border-base;
-@border-color-default: #a2a9b1;
-@border-color-default-hover: #a2a9b1;
-@border-color-default-active: #72777d;
-@border-color-default-focus: @color-progressive-focus;
+@border-color-base: #a2a9b1;
+@border-color-base-hover: #a2a9b1;
+@border-color-base-active: #72777d;
+@border-color-base-focus: @color-progressive-focus;
@border-color-disabled: #c8ccd1;
@border-color-disabled-filled: @color-disabled-filled;
@border-color-framed-progressive-hover: @color-progressive-hover;
@border-color-framed-destructive-hover: @color-destructive-hover;
@border-color-frameless: transparent;
-@border-color-frameless-fallback: @color-default-light; // Support IE 6:
`transparent` is not rendered correctly
+@border-color-frameless-fallback: @color-base-light; // Support IE 6:
`transparent` is not rendered correctly
-@border-color-focus-inset: @color-default-light;
+@border-color-focus-inset: @color-base-light;
@border-color-erroneous: @color-erroneous;
@border-color-readonly: #c8ccd1;
-@border-color-input-hover: @border-color-default-active;
+@border-color-input-hover: @border-color-base-active;
@border-color-dialog-bar: #c8ccd1;
-@border-radius-default: 2px;
+@border-radius-base: 2px;
@border-radius-frameless-indicator: 1px; // Together with
`@box-shadow-frameless-indicator-focus` it results in well rounded border
-@border-style-default: solid;
+@border-style-base: solid;
-@border-width-default: 1px;
+@border-width-base: 1px;
-@padding-default: @padding-top-default @padding-horizontal-default
@padding-bottom-default;
-@padding-frameless: @padding-top-default @padding-horizontal-frameless
@padding-bottom-default @padding-horizontal-frameless;
-@padding-input-text: @padding-top-default @padding-horizontal-input-text
@padding-bottom-default;
-@padding-menu: @padding-top-menu @padding-horizontal-default
@padding-bottom-menu;
-@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-default (
@padding-bottom-menu * 1.5 );
-@padding-search: 16 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.625em`≈`16px`
-@padding-taboption: @padding-top-default @padding-horizontal-taboption
@padding-bottom-default;
-@padding-horizontal-default: 12 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`12px`
-@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.3125em`≈`4px`
-@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`13px`;
@padding-horizontal-default = @border-width-default
-@padding-horizontal-tagitem: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-vertical-label: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-top-default: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
// equals `0.625em`≈`8px`
-@padding-top-icon-indicator: 30 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-top-menu: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
-@padding-bottom-default: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`
-@padding-bottom-menu: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
-@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // As long as we have whitespace in icon canvas, we
need reduced `padding-left`.
+@padding-base: @padding-top-base @padding-horizontal-base @padding-bottom-base;
+@padding-frameless: @padding-top-base @padding-horizontal-frameless
@padding-bottom-base @padding-horizontal-frameless;
+@padding-input-text: @padding-top-base @padding-horizontal-input-text
@padding-bottom-base;
+@padding-menu: @padding-top-menu @padding-horizontal-base @padding-bottom-menu;
+@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-base (
@padding-bottom-menu * 1.5 );
+@padding-search: 16 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `0.625em`≈`16px`
+@padding-taboption: @padding-top-base @padding-horizontal-taboption
@padding-bottom-base;
+@padding-horizontal-base: 12 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.9375em`≈`12px`
+@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.3125em`≈`4px`
+@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.9375em`≈`13px`; @padding-horizontal-base =
@border-width-base
+@padding-horizontal-tagitem: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-vertical-label: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `0.625em`≈`8px`
+@padding-top-icon-indicator: 30 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-top-menu: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `0.547em`≈`7px`
+@padding-bottom-menu: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // As long as we have whitespace in icon canvas, we need
reduced `padding-left`.
@padding-start-icon: @size-icon;
-@padding-start-icon-only: 26 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `2.03125em`≈`26px`;
@min-width-button-default - @padding-horizontal-default - 2 *
@border-width-default;
-@padding-start-fieldset-header-iconized: 26 / @oo-ui-font-size-browser / (
@oo-ui-font-size-default * @font-size-fieldset-header );
+@padding-start-icon-only: 26 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `2.03125em`≈`26px`; @min-width-button-base -
@padding-horizontal-base - 2 * @border-width-base;
+@padding-start-fieldset-header-iconized: 26 / @oo-ui-font-size-browser / (
@oo-ui-font-size-base * @font-size-fieldset-header );
@padding-start-indicator-only: @padding-start-icon-only;
-@padding-start-indicator-plus: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-start-frameless-icon-only: 30 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-start-menu-icon-label: 38 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
-@padding-end-tagitem-close: 21 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.640625em`≈`21px`;
+@padding-start-indicator-plus: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-start-frameless-icon-only: 30 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-start-menu-icon-label: 38 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@padding-end-tagitem-close: 21 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `1.640625em`≈`21px`;
@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@box-shadow-menu: @box-shadow-dialog;
@@ -178,7 +178,7 @@
@box-shadow-toolbar-bottom: 0 -1px 1px 0 rgba( 0, 0, 0, 0.1 );
@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-widget-focus: inset 0 0 0 1px @color-progressive;
-@box-shadow-progressive-focus: inset 0 0 0 1px @color-progressive, inset 0 0 0
2px @color-default-light;
+@box-shadow-progressive-focus: inset 0 0 0 1px @color-progressive, inset 0 0 0
2px @color-base-light;
@box-shadow-frameless-indicator-focus: 0 0 0 2px @color-progressive;
@box-shadow-action-focus: @box-shadow-widget-focus, 0 0 0 1px
@color-progressive;
@box-shadow-input-binary-active: inset 0 0 0 1px @color-progressive-active;
@@ -187,22 +187,22 @@
@font-size-fieldset-header: 1.15em; // equals `16.1px` at base `font-size:
12.8px`. Todo: Not able to get unified `16px` due to T
-@line-height-default: 1.6; // same as Vector
+@line-height-base: 1.6; // same as Vector
@line-height-reset: 1; // Support: Safari, reset `line-height` in order to
normalize it in a follow-up rule across browsers.
@line-height-message: 1.4;
-@line-height-fieldset-header-iconized: 24 / @oo-ui-font-size-browser / (
@oo-ui-font-size-default * @font-size-fieldset-header );
+@line-height-fieldset-header-iconized: 24 / @oo-ui-font-size-browser / (
@oo-ui-font-size-base * @font-size-fieldset-header );
@line-height-form-element: 1.4;
@line-height-input-binary-label: 1.5; // Checkboxes, Radios and
ToggleSwitchWidget labels need a tad more for increased vertical click area
@line-height-widget-multiline: 1.275;
@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the
unit; equals `15px` at base `font-size: 12.8px`
@line-height-tagmultiselect-input: 1.563em; // equals `20px` at base
`font-size: 12.8px`
-@text-shadow-default: 0 1px 1px @color-default-light; // 'coined' effect
-@text-shadow-disabled: @text-shadow-default;
+@text-shadow-base: 0 1px 1px @color-base-light; // 'coined' effect
+@text-shadow-disabled: @text-shadow-base;
-@opacity-icon-default: 0.87; // equals `#222` on background-color `#fff`
-@opacity-icon-default-hover: 0.73; // equals `#454545` on background-color
`#fff`, closest to `#444`
-@opacity-icon-default-selected: 1;
+@opacity-icon-base: 0.87; // equals `#222` on background-color `#fff`
+@opacity-icon-base-hover: 0.73; // equals `#454545` on background-color
`#fff`, closest to `#444`
+@opacity-icon-base-selected: 1;
// Transition variables
// Some of these values are duplicated in OO.ui.WikimediaUITheme
@@ -214,14 +214,14 @@
// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
@background-color-input-binary-active: @color-progressive-active;
@background-color-input-binary-on: @color-progressive;
-@size-input-binary: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
-@border-input-binary: @border-width-default solid @border-color-input-binary;
-@border-color-input-binary: @border-color-default-active;
+@size-input-binary: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@border-input-binary: @border-width-base solid @border-color-input-binary;
+@border-color-input-binary: @border-color-base-active;
@border-color-input-binary-active: @color-progressive-active;
@border-color-input-binary-on: @color-progressive;
-@padding-start-input-binary-label: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@padding-start-input-binary-label: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
@box-shadow-input-binary: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
-@border-width-radio-on: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@border-width-radio-on: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// Theme mixins
@@ -288,7 +288,7 @@
.mw-framed-primary-button-colored( @child, @link, @hover, @active, @focus ) {
> @{child} {
- color: @color-default-light;
+ color: @color-base-light;
background-color: @link;
border-color: @link;
}
@@ -303,7 +303,7 @@
&.oo-ui-buttonElement-pressed > @{child},
&.oo-ui-buttonElement-active > @{child},
&.oo-ui-popupToolGroup-active > @{child} {
- color: @color-default-light;
+ color: @color-base-light;
background-color: @active;
border-color: @active;
box-shadow: none;
@@ -311,7 +311,7 @@
> @{child}:focus {
border-color: @focus;
- box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px
@color-default-light;
+ box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px
@color-base-light;
outline: 0;
}
}
diff --git a/src/themes/wikimediaui/elements.less
b/src/themes/wikimediaui/elements.less
index d23e54f..61703da 100644
--- a/src/themes/wikimediaui/elements.less
+++ b/src/themes/wikimediaui/elements.less
@@ -5,7 +5,7 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
position: relative;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
font-weight: bold;
text-decoration: none;
@@ -63,7 +63,7 @@
&.oo-ui-labelElement,
&.oo-ui-iconElement {
> .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- right: @padding-horizontal-default;
+ right: @padding-horizontal-base;
}
}
}
@@ -79,23 +79,23 @@
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
- opacity: @opacity-icon-default;
+ opacity: @opacity-icon-base;
.oo-ui-transition(
opacity @transition-ease-quick
);
&.oo-ui-image-invert {
- opacity: @opacity-icon-default-selected;
+ opacity: @opacity-icon-base-selected;
}
}
&:hover {
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
- opacity: @opacity-icon-default-hover;
+ opacity: @opacity-icon-base-hover;
&.oo-ui-image-invert {
- opacity:
@opacity-icon-default-selected;
+ opacity:
@opacity-icon-base-selected;
}
}
}
@@ -105,7 +105,7 @@
> .oo-ui-buttonElement-button {
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
- opacity: @opacity-icon-default-selected;
+ opacity: @opacity-icon-base-selected;
}
}
}
@@ -123,8 +123,8 @@
min-height: @size-icon;
border-color: @border-color-frameless-fallback;
// Support IE 6: `transparent` is not rendered correctly
border-color: @border-color-frameless;
- border-style: @border-style-default;
- border-width: @border-width-default;
+ border-style: @border-style-base;
+ border-width: @border-width-base;
padding-top: @padding-top-icon-indicator; //
Support IE 7: Acts as `min-width`
padding-left:
@padding-start-frameless-icon-only;
@@ -152,8 +152,8 @@
> .oo-ui-buttonElement-button {
border-color: @border-color-frameless-fallback;
// Support IE 6: `transparent` is not rendered correctly
border-color: @border-color-frameless;
- border-style: @border-style-default;
- border-width: @border-width-default;
+ border-style: @border-style-base;
+ border-width: @border-width-base;
padding: @padding-frameless;
}
}
@@ -167,17 +167,17 @@
&.oo-ui-widget-enabled {
> .oo-ui-buttonElement-button {
- color: @color-default;
+ color: @color-base;
&:hover {
- color: @color-default-hover;
+ color: @color-base-hover;
}
}
&.oo-ui-iconElement,
&.oo-ui-labelElement {
> .oo-ui-buttonElement-button:focus {
- border-color:
@border-color-default-focus;
+ border-color: @border-color-base-focus;
box-shadow: @box-shadow-widget-focus;
&:active {
@@ -204,7 +204,7 @@
&.oo-ui-buttonElement-pressed >
input.oo-ui-buttonElement-button,
& > .oo-ui-buttonElement-button:active {
- color: @color-default-active;
+ color: @color-base-active;
border-color: @border-color-frameless-fallback;
// Support IE 6: `transparent` is not rendered correctly
border-color: @border-color-frameless;
box-shadow: none;
@@ -229,14 +229,14 @@
> .oo-ui-buttonElement-button {
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
- opacity:
@opacity-icon-default-selected;
+ opacity:
@opacity-icon-base-selected;
}
}
> .oo-ui-buttonElement-button:hover {
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
- opacity:
@opacity-icon-default-hover;
+ opacity:
@opacity-icon-base-hover;
}
}
}
@@ -256,11 +256,11 @@
&-framed {
> .oo-ui-buttonElement-button {
- border-style: @border-style-default;
- border-width: @border-width-default;
- border-radius: @border-radius-default;
- padding-left: @padding-horizontal-default;
- padding-right: @padding-horizontal-default;
+ border-style: @border-style-base;
+ border-width: @border-width-base;
+ border-radius: @border-radius-base;
+ padding-left: @padding-horizontal-base;
+ padding-right: @padding-horizontal-base;
}
&.oo-ui-iconElement {
@@ -311,8 +311,8 @@
&.oo-ui-labelElement {
> .oo-ui-buttonElement-button {
- padding-top: @padding-top-default;
- padding-bottom: @padding-bottom-default;
+ padding-top: @padding-top-base;
+ padding-bottom: @padding-bottom-base;
}
}
@@ -327,17 +327,17 @@
&.oo-ui-widget-enabled {
> .oo-ui-buttonElement-button {
background-color: @background-color-framed;
- color: @color-default;
- border-color: @border-color-default;
+ color: @color-base;
+ border-color: @border-color-base;
&:hover {
background-color:
@background-color-framed-hover;
- color: @color-default-hover;
- border-color:
@border-color-default-hover;
+ color: @color-base-hover;
+ border-color: @border-color-base-hover;
}
&:focus {
- border-color:
@border-color-default-focus;
+ border-color: @border-color-base-focus;
box-shadow: @box-shadow-widget-focus;
}
}
@@ -346,14 +346,14 @@
> .oo-ui-buttonElement-button:active:focus,
&.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
background-color:
@background-color-framed-active;
- color: @color-default-active;
- border-color: @border-color-default-active;
+ color: @color-base-active;
+ border-color: @border-color-base-active;
box-shadow: none;
}
&.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button {
background-color: @color-progressive-active;
- color: @color-default-light;
+ color: @color-base-light;
border-color: @border-color-input-binary-active;
&:focus {
@@ -396,7 +396,7 @@
> .oo-ui-buttonElement-button {
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
- opacity:
@opacity-icon-default-selected;
+ opacity:
@opacity-icon-base-selected;
}
}
}
diff --git a/src/themes/wikimediaui/layouts.less
b/src/themes/wikimediaui/layouts.less
index 51d54ed..f81da15 100644
--- a/src/themes/wikimediaui/layouts.less
+++ b/src/themes/wikimediaui/layouts.less
@@ -62,7 +62,7 @@
&.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header,
&.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
- max-width: @max-width-default;
+ max-width: @max-width-base;
}
&.oo-ui-fieldLayout-align-left,
@@ -153,7 +153,7 @@
.theme-oo-ui-actionFieldLayout () {
&.oo-ui-fieldLayout-align-top {
- max-width: @max-width-default;
+ max-width: @max-width-base;
}
.oo-ui-actionFieldLayout-button .oo-ui-buttonElement-frameless {
@@ -234,7 +234,7 @@
&-framed {
border: @border-dialog;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
}
&-padded&-framed {
diff --git a/src/themes/wikimediaui/tools.less
b/src/themes/wikimediaui/tools.less
index e7f6d67..fd5c7d6 100644
--- a/src/themes/wikimediaui/tools.less
+++ b/src/themes/wikimediaui/tools.less
@@ -3,7 +3,7 @@
.theme-oo-ui-toolbar () {
&-bar {
background-color: @background-color-toolbar;
- color: @color-default;
+ color: @color-base;
.oo-ui-toolbar-position-top > & {
border-bottom: @border-toolbar;
@@ -139,7 +139,7 @@
}
> .oo-ui-tool-link .oo-ui-tool-title {
- color: @color-default;
+ color: @color-base;
.oo-ui-transition( color
@transition-ease-quick );
}
}
@@ -333,7 +333,7 @@
width: 0.9375em;
height: 100%;
margin: 0 0.5em;
- opacity: @opacity-icon-default;
+ opacity: @opacity-icon-base;
.oo-ui-toolbar-narrow & {
right: -0.3125em;
@@ -387,7 +387,7 @@
.oo-ui-tool-title {
padding-left: 0.5em;
- color: @color-default;
+ color: @color-base;
}
.oo-ui-tool-accel {
diff --git a/src/themes/wikimediaui/widgets.less
b/src/themes/wikimediaui/widgets.less
index ae4c8e6..4084d44 100644
--- a/src/themes/wikimediaui/widgets.less
+++ b/src/themes/wikimediaui/widgets.less
@@ -11,7 +11,7 @@
.theme-oo-ui-buttonGroupWidget () {
display: inline-block;
white-space: nowrap;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
.oo-ui-inline-spacing( 0.5em );
// Create a stacking context, so that we can use `z-index` below
without leaking out
z-index: 0;
@@ -24,19 +24,19 @@
.oo-ui-buttonElement-framed {
.oo-ui-buttonElement-button {
- margin-left: -@border-width-default;
+ margin-left: -@border-width-base;
border-radius: 0;
}
&:first-child .oo-ui-buttonElement-button {
margin-left: 0;
- border-bottom-left-radius: @border-radius-default;
- border-top-left-radius: @border-radius-default;
+ border-bottom-left-radius: @border-radius-base;
+ border-top-left-radius: @border-radius-base;
}
&:last-child .oo-ui-buttonElement-button {
- border-bottom-right-radius: @border-radius-default;
- border-top-right-radius: @border-radius-default;
+ border-bottom-right-radius: @border-radius-base;
+ border-top-right-radius: @border-radius-base;
}
&.oo-ui-widget-disabled + .oo-ui-widget-disabled {
@@ -69,7 +69,7 @@
&.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on {
> .oo-ui-buttonElement-button,
> .oo-ui-buttonElement-button:active {
- border-left-color:
@border-color-default;
+ border-left-color: @border-color-base;
z-index: 3;
}
}
@@ -82,7 +82,7 @@
.theme-oo-ui-buttonOptionWidget () {}
.theme-oo-ui-buttonSelectWidget () {
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
.oo-ui-inline-spacing( 0.5em );
// Create a stacking context, so that we can use `z-index` below
without leaking out
z-index: 0;
@@ -94,19 +94,19 @@
.oo-ui-buttonOptionWidget {
.oo-ui-buttonElement-button {
- margin-left: -@border-width-default;
+ margin-left: -@border-width-base;
border-radius: 0;
}
&:first-child .oo-ui-buttonElement-button {
margin-left: 0;
- border-bottom-left-radius: @border-radius-default;
- border-top-left-radius: @border-radius-default;
+ border-bottom-left-radius: @border-radius-base;
+ border-top-left-radius: @border-radius-base;
}
&:last-child .oo-ui-buttonElement-button {
- border-bottom-right-radius: @border-radius-default;
- border-top-right-radius: @border-radius-default;
+ border-bottom-right-radius: @border-radius-base;
+ border-top-right-radius: @border-radius-base;
}
&.oo-ui-iconElement .oo-ui-iconElement-icon,
@@ -125,7 +125,7 @@
&:focus {
.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
.oo-ui-buttonElement-button {
- border-color:
@border-color-default-focus;
+ border-color: @border-color-base-focus;
box-shadow:
@box-shadow-progressive-focus;
}
}
@@ -156,15 +156,15 @@
max-width: 100%;
height: @height-tagitem;
margin: @margin-top-tagitem @end-tagitem 0 0;
- border: @border-default;
- border-radius: @border-radius-default;
+ border: @border-base;
+ border-radius: @border-radius-base;
padding: 0 @padding-horizontal-tagitem;
line-height: @height-tagitem;
vertical-align: middle;
&.oo-ui-widget-enabled {
background-color: @background-color-framed;
- color: @color-default;
+ color: @color-base;
padding-right: @padding-end-tagitem-close;
.oo-ui-transition(
background-color @transition-ease-quick,
@@ -175,12 +175,12 @@
&:hover {
background-color: @background-color-framed-hover;
- color: @color-default-hover;
- border-color: @border-color-default-hover;
+ color: @color-base-hover;
+ border-color: @border-color-base-hover;
}
&:focus {
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
box-shadow: @box-shadow-widget-focus;
outline: 0;
}
@@ -233,10 +233,10 @@
&-handle {
.oo-ui-box-sizing( border-box );
- min-height: @min-height-widget-default;
+ min-height: @min-height-widget-base;
.oo-ui-inline-spacing( 0.5em );
- border: @border-default;
- border-radius: @border-radius-default;
+ border: @border-base;
+ border-radius: @border-radius-base;
padding: 0 @padding-horizontal-input-text
@padding-vertical-label;
line-height: @line-height-reset;
@@ -274,15 +274,15 @@
}
&.oo-ui-indicatorElement &-handle {
- padding-right: @size-indicator + 2 *
@padding-horizontal-default;
+ padding-right: @size-indicator + 2 * @padding-horizontal-base;
> .oo-ui-indicatorElement-indicator {
- right: @padding-horizontal-default; // Use `@padding…`
as `right` value
+ right: @padding-horizontal-base; // Use `@padding…` as
`right` value
}
}
&-popup {
- margin-top: -@border-width-default;
+ margin-top: -@border-width-base;
> .oo-ui-popupWidget-popup {
border: 0;
@@ -290,7 +290,7 @@
}
&.oo-ui-widget-enabled &-handle {
- background-color: @background-color-default;
+ background-color: @background-color-base;
cursor: text;
.oo-ui-transition(
border-color @transition-ease-out-sine-medium,
@@ -301,7 +301,7 @@
border-color: @border-color-input-hover;
}
&.oo-ui-widget-enabled.oo-ui-capsuleMultiselectWidget-open &-handle {
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
outline: 0;
box-shadow: @box-shadow-widget-focus;
}
@@ -350,7 +350,7 @@
z-index: 1;
& + span {
- background-color: @background-color-default;
+ background-color: @background-color-base;
background-origin: border-box;
background-position: center center;
background-repeat: no-repeat;
@@ -361,7 +361,7 @@
width: @size-input-binary;
height: @size-input-binary;
border: @border-input-binary;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
}
&:checked {
@@ -475,7 +475,7 @@
// inherits from `inputWidget` & `textInputWidget`
input {
- height: @size-default;
+ height: @size-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
@@ -485,9 +485,9 @@
// if the menu is empty, or if this is the PHP version
&.oo-ui-comboBoxInputWidget-empty input,
&-php input {
- border-top-right-radius: @border-radius-default;
- border-bottom-right-radius: @border-radius-default;
- border-right-width: @border-width-default;
+ border-top-right-radius: @border-radius-base;
+ border-bottom-right-radius: @border-radius-base;
+ border-right-width: @border-width-base;
}
&-dropdownButton.oo-ui-indicatorElement {
@@ -495,7 +495,7 @@
.oo-ui-buttonElement-button {
min-width: @min-width-button-combo-widget;
- min-height: @min-height-widget-default;
+ min-height: @min-height-widget-base;
padding-left: 0;
> .oo-ui-indicatorElement-indicator {
@@ -511,7 +511,7 @@
}
&-php .oo-ui-indicatorWidget {
- right: @padding-horizontal-default;
+ right: @padding-horizontal-base;
margin: 0;
}
@@ -536,7 +536,7 @@
padding-left: @padding-start-menu-icon-label;
.oo-ui-iconElement-icon {
- left: @padding-horizontal-default;
+ left: @padding-horizontal-base;
}
}
@@ -548,7 +548,7 @@
padding-right: @padding-start-indicator-plus;
.oo-ui-indicatorElement-indicator {
- right: @padding-horizontal-default;
+ right: @padding-horizontal-base;
}
}
@@ -566,10 +566,10 @@
.oo-ui-inline-spacing( 0.5em );
&-handle {
- min-height: @min-height-widget-default; // Address label-less
widgets
- border: @border-default;
- border-radius: @border-radius-default;
- padding: @padding-default;
+ min-height: @min-height-widget-base; // Address label-less
widgets
+ border: @border-base;
+ border-radius: @border-radius-base;
+ padding: @padding-base;
line-height: @line-height-reset;
.oo-ui-iconElement-icon {
@@ -577,7 +577,7 @@
}
.oo-ui-indicatorElement-indicator {
- right: @padding-horizontal-default;
+ right: @padding-horizontal-base;
}
.oo-ui-labelElement-label {
@@ -590,13 +590,13 @@
}
&.oo-ui-indicatorElement .oo-ui-dropdownWidget-handle {
- padding-right: @size-indicator + @padding-horizontal-default;
+ padding-right: @size-indicator + @padding-horizontal-base;
}
&.oo-ui-widget-enabled {
.oo-ui-dropdownWidget-handle {
background-color: @background-color-framed;
- color: @color-default;
+ color: @color-base;
.oo-ui-transition(
background-color @transition-ease-quick,
border-color @transition-ease-quick,
@@ -605,29 +605,29 @@
&:hover {
background-color:
@background-color-framed-hover;
- color: @color-default-hover;
- border-color: @border-color-default-hover;
+ color: @color-base-hover;
+ border-color: @border-color-base-hover;
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
- opacity: @opacity-icon-default-hover;
+ opacity: @opacity-icon-base-hover;
}
}
&:active {
- color: @color-default-active;
- border-color: @border-color-default-active;
+ color: @color-base-active;
+ border-color: @border-color-base-active;
}
&:focus {
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
outline: 0;
box-shadow: @box-shadow-widget-focus;
}
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
- opacity: @opacity-icon-default;
+ opacity: @opacity-icon-base;
.oo-ui-transition(
opacity @transition-ease-quick
);
@@ -640,7 +640,7 @@
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
- opacity: @opacity-icon-default-selected;
+ opacity: @opacity-icon-base-selected;
}
}
}
@@ -668,8 +668,8 @@
max-width: @max-width-input;
&-php {
- border-right: @border-default;
- border-radius: @border-radius-default;
+ border-right: @border-base;
+ border-radius: @border-radius-base;
overflow-x: hidden;
}
@@ -678,9 +678,9 @@
-webkit-appearance: none;
-moz-appearance: none;
.oo-ui-box-sizing( border-box );
- border: @border-default;
- border-radius: @border-radius-default;
- padding: @padding-default;
+ border: @border-base;
+ border-radius: @border-radius-base;
+ padding: @padding-base;
font-size: inherit;
font-family: inherit;
vertical-align: middle;
@@ -695,8 +695,8 @@
&:not( [no-ie] ) {
background-position: right 1.75em center;
width: e( 'calc( 100% + 1em )' );
- height: @size-default;
- padding: 0 0 0 @padding-horizontal-default;
+ height: @size-base;
+ padding: 0 0 0 @padding-horizontal-base;
}
}
@@ -704,13 +704,13 @@
font-size: inherit;
font-family: inherit;
height: 1.5em;
- padding: @padding-bottom-menu @padding-horizontal-default; //
`@padding-bottom-menu` used as vertical `padding` here as we don't have a lot
of layout leverage on `option`
+ padding: @padding-bottom-menu @padding-horizontal-base; //
`@padding-bottom-menu` used as vertical `padding` here as we don't have a lot
of layout leverage on `option`
}
&.oo-ui-widget-enabled {
select {
background-color: @background-color-framed;
- color: @color-default;
+ color: @color-base;
.oo-ui-transition(
background-color @transition-ease-quick,
border-color @transition-ease-quick,
@@ -719,17 +719,17 @@
&:hover {
background-color:
@background-color-framed-hover;
- color: @color-default-hover;
- border-color: @border-color-default-hover;
+ color: @color-base-hover;
+ border-color: @border-color-base-hover;
}
&:active {
- color: @color-default-active;
- border-color: @border-color-default-active;
+ color: @color-base-active;
+ border-color: @border-color-base-active;
}
&:focus {
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
outline: 0;
box-shadow: @box-shadow-widget-focus;
}
@@ -778,7 +778,7 @@
&.oo-ui-optionWidget {
&-highlighted {
- background-color: @background-color-default-hover;
+ background-color: @background-color-base-hover;
color: @color-emphasized;
}
&-selected {
@@ -795,15 +795,15 @@
.theme-oo-ui-menuSectionOptionWidget () {
color: @color-subtle;
- padding: @padding-top-menu @padding-horizontal-default
@padding-vertical-label;
+ padding: @padding-top-menu @padding-horizontal-base
@padding-vertical-label;
font-weight: bold;
}
.theme-oo-ui-menuSelectWidget () {
- background-color: @background-color-default;
+ background-color: @background-color-base;
margin-top: -1px;
border: @border-menu;
- border-radius: 0 0 @border-radius-default @border-radius-default;
+ border-radius: 0 0 @border-radius-base @border-radius-base;
box-shadow: @box-shadow-menu;
}
@@ -825,7 +825,7 @@
.oo-ui-buttonElement-button {
display: block;
min-width: @min-width-button-combo-widget;
- min-height: @min-height-widget-default;
+ min-height: @min-height-widget-base;
padding-left: 0;
padding-right: 0;
@@ -863,14 +863,14 @@
.theme-oo-ui-optionWidget () {
.oo-ui-labelElement-label {
- line-height: @line-height-default;
+ line-height: @line-height-base;
}
// Don't add `highlighted` or `selected` modifications here
// as it inherits to various visually opposite widgets.
&-selected .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
- opacity: @opacity-icon-default-selected;
+ opacity: @opacity-icon-base-selected;
}
&.oo-ui-widget-disabled {
@@ -879,20 +879,20 @@
}
.theme-oo-ui-outlineControlsWidget () {
- background-color: @background-color-default;
+ background-color: @background-color-base;
&-items,
&-movers {
> .oo-ui-buttonWidget {
- height: @size-default;
- width: @size-default;
+ height: @size-base;
+ width: @size-base;
// There's a lot of weird specific margins with weird
specific selectors
margin: 0 !important; /* stylelint-disable-line
declaration-no-important */
}
}
> .oo-ui-iconElement-icon {
- height: @size-default;
+ height: @size-base;
opacity: 0.2;
}
}
@@ -905,7 +905,7 @@
);
&.oo-ui-optionWidget-highlighted {
- background-color: @background-color-default-hover;
+ background-color: @background-color-base-hover;
color: @color-emphasized;
}
@@ -968,9 +968,9 @@
.theme-oo-ui-popupWidget () {
&-popup {
- background-color: @background-color-default;
+ background-color: @background-color-base;
border: @border-menu;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
box-shadow: @box-shadow-menu;
}
@@ -983,14 +983,14 @@
&:before {
bottom: -@size-anchor - 1px;
left: -@size-anchor;
- border-bottom-color: @border-color-default;
+ border-bottom-color: @border-color-base;
border-width: @size-anchor + 1px;
}
&:after {
bottom: -@size-anchor - 1px;
left: -@size-anchor + 1px;
- border-bottom-color: @background-color-default;
// Using `@background-color-default` var here as `border*-color` is
`background-color` subsitute
+ border-bottom-color: @background-color-base; //
Using `@background-color-base` var here as `border*-color` is
`background-color` subsitute
border-width: @size-anchor;
}
}
@@ -1005,14 +1005,14 @@
&:before {
top: -@size-anchor - 1px;
left: -@size-anchor;
- border-top-color: @border-color-default;
+ border-top-color: @border-color-base;
border-width: @size-anchor + 1px;
}
&:after {
top: -@size-anchor - 1px;
left: -@size-anchor + 1px;
- border-top-color: @background-color-default; //
Using `@background-color-default` var here as `border*-color` is
`background-color` subsitute
+ border-top-color: @background-color-base; //
Using `@background-color-base` var here as `border*-color` is
`background-color` subsitute
border-width: @size-anchor;
}
}
@@ -1027,14 +1027,14 @@
&:before {
right: -@size-anchor - 1px;
top: -@size-anchor;
- border-right-color: @border-color-default;
+ border-right-color: @border-color-base;
border-width: @size-anchor + 1px;
}
&:after {
right: -@size-anchor - 1px;
top: -@size-anchor + 1px;
- border-right-color: @background-color-default;
// Using `@background-color-default` var here as `border*-color` is
`background-color` subsitute
+ border-right-color: @background-color-base; //
Using `@background-color-base` var here as `border*-color` is
`background-color` subsitute
border-width: @size-anchor;
}
}
@@ -1049,14 +1049,14 @@
&:before {
left: -@size-anchor - 1px;
top: -@size-anchor;
- border-left-color: @border-color-default;
+ border-left-color: @border-color-base;
border-width: @size-anchor + 1px;
}
&:after {
left: -@size-anchor - 1px;
top: -@size-anchor + 1px;
- border-left-color: @background-color-default;
// Using `@background-color-default` var here as `border*-color` is
`background-color` subsitute
+ border-left-color: @background-color-base; //
Using `@background-color-base` var here as `border*-color` is
`background-color` subsitute
border-width: @size-anchor;
}
}
@@ -1098,10 +1098,10 @@
}
.theme-oo-ui-progressBarWidget () {
- max-width: @max-width-default;
- background-color: @background-color-default;
- border: @border-default;
- border-radius: @border-radius-default;
+ max-width: @max-width-base;
+ background-color: @background-color-base;
+ border: @border-base;
+ border-radius: @border-radius-base;
overflow: hidden;
&-bar {
@@ -1113,7 +1113,7 @@
.oo-ui-animation( oo-ui-progressBarWidget-slide 2s
infinite linear );
width: 40%;
.oo-ui-transform( translate( -25% ) );
- border-left-width: @border-width-default;
+ border-left-width: @border-width-base;
}
}
&.oo-ui-widget-enabled {
@@ -1174,7 +1174,7 @@
z-index: 1;
& + span {
- background-color: @background-color-default;
+ background-color: @background-color-base;
position: absolute;
left: 0;
.oo-ui-box-sizing( border-box );
@@ -1191,7 +1191,7 @@
left: -4px;
right: -4px;
bottom: -4px;
- border: @border-width-default solid transparent;
+ border: @border-width-base solid transparent;
border-radius: 100%;
}
}
@@ -1211,7 +1211,7 @@
}
&:checked + span {
- background-color: @background-color-default;
+ background-color: @background-color-base;
}
}
}
@@ -1259,7 +1259,7 @@
&:focus + span {
&:before {
- border-color: @background-color-default;
+ border-color: @background-color-base;
}
}
}
@@ -1283,7 +1283,7 @@
outline: 0;
[type='radio']:checked + span:before {
- border-color: @background-color-default;
+ border-color: @background-color-base;
}
}
}
@@ -1330,27 +1330,27 @@
&-selectButton {
> .oo-ui-buttonElement-button {
- border-radius: 0 @border-radius-default
@border-radius-default 0;
+ border-radius: 0 @border-radius-base
@border-radius-base 0;
}
}
&-info {
- background-color: @background-color-default;
- border: @border-default;
- border-radius: @border-radius-default 0 0
@border-radius-default;
+ background-color: @background-color-base;
+ border: @border-base;
+ border-radius: @border-radius-base 0 0 @border-radius-base;
border-right-width: 0;
> .oo-ui-iconElement-icon {
- top: -@border-width-default; // Address `border-top` of
parent element
+ top: -@border-width-base; // Address `border-top` of
parent element
left: @padding-start-input-text-icon;
- min-height: @min-height-widget-default;
- margin-left: -@border-width-default; // Address extra
`border-left` pixel above
+ min-height: @min-height-widget-base;
+ margin-left: -@border-width-base; // Address extra
`border-left` pixel above
}
> .oo-ui-indicatorElement-indicator {
- top: -@border-width-default; // Address `border-top` of
parent element
- right: @padding-horizontal-default;
- min-height: @min-height-widget-default;
+ top: -@border-width-base; // Address `border-top` of
parent element
+ right: @padding-horizontal-base;
+ min-height: @min-height-widget-base;
}
}
@@ -1358,9 +1358,9 @@
.oo-ui-box-sizing( border-box );
display: block;
right: @size-icon + 0.5em; // With close, no indicator
- padding-top: @padding-top-default;
+ padding-top: @padding-top-base;
padding-left: @padding-horizontal-input-text;
- padding-bottom: @padding-bottom-default;
+ padding-bottom: @padding-bottom-base;
line-height: @line-height-widget-singleline;
white-space: nowrap;
}
@@ -1380,7 +1380,7 @@
margin-right: 0;
.oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
- height: @size-default;
+ height: @size-base;
}
}
@@ -1399,7 +1399,7 @@
// With close, with indicator:
&.oo-ui-indicatorElement {
.oo-ui-selectFileWidget-label {
- right: @size-icon + @size-indicator +
@padding-horizontal-default;
+ right: @size-icon + @size-indicator +
@padding-horizontal-base;
padding-left: 0;
}
@@ -1419,15 +1419,15 @@
}
&-dropTarget {
- background-color: @background-color-default;
- border: @border-default;
- border-radius: @border-radius-default;
+ background-color: @background-color-base;
+ border: @border-base;
+ border-radius: @border-radius-base;
vertical-align: middle;
overflow: hidden;
.oo-ui-selectFileWidget-selectButton {
> .oo-ui-buttonElement-button {
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
}
}
@@ -1448,7 +1448,7 @@
&-empty.oo-ui-widget-enabled {
&.oo-ui-selectFileWidget-dropTarget {
- background-color: @background-color-default;
+ background-color: @background-color-base;
border-style: dashed;
.oo-ui-transition(
background-color
@transition-ease-out-sine-medium,
@@ -1495,7 +1495,7 @@
&-notsupported {
.oo-ui-selectFileWidget-info {
background-color: @background-color-disabled;
- color: @color-default;
+ color: @color-base;
border-color: @border-color-disabled;
}
@@ -1504,7 +1504,7 @@
border-color: @border-color-disabled;
.oo-ui-selectFileWidget-label {
- padding: 1em @padding-horizontal-default;
+ padding: 1em @padding-horizontal-base;
}
}
}
@@ -1515,13 +1515,13 @@
}
.theme-oo-ui-tabOptionWidget () {
- color: @color-default;
+ color: @color-base;
margin: @margin-taboption 0 0 @margin-taboption;
border-color: transparent;
- border-style: @border-style-default;
- border-width: @border-width-default @border-width-default 0
@border-width-default;
- border-top-left-radius: @border-radius-default;
- border-top-right-radius: @border-radius-default;
+ border-style: @border-style-base;
+ border-width: @border-width-base @border-width-base 0
@border-width-base;
+ border-top-left-radius: @border-radius-base;
+ border-top-right-radius: @border-radius-base;
padding: @padding-taboption;
font-weight: bold;
line-height: @line-height-reset;
@@ -1531,8 +1531,8 @@
);
&.oo-ui-optionWidget-selected {
- background-color: @background-color-default;
- color: @color-default-active;
+ background-color: @background-color-base;
+ color: @color-base-active;
}
.oo-ui-labelElement-label {
@@ -1549,7 +1549,7 @@
}
&.oo-ui-optionWidget-selected:hover {
- background-color: @background-color-default;
+ background-color: @background-color-base;
}
}
}
@@ -1564,15 +1564,15 @@
max-width: 100%;
height: @height-tagitem;
margin: @margin-top-tagitem @end-tagitem 0 0;
- border: @border-default;
- border-radius: @border-radius-default;
+ border: @border-base;
+ border-radius: @border-radius-base;
padding: 0 @padding-horizontal-tagitem;
line-height: @height-tagitem;
vertical-align: middle;
&.oo-ui-widget-enabled {
background-color: @background-color-framed;
- color: @color-default;
+ color: @color-base;
padding-right: @padding-end-tagitem-close;
.oo-ui-transition(
background-color @transition-ease-quick,
@@ -1583,12 +1583,12 @@
&:hover {
background-color: @background-color-framed-hover;
- color: @color-default-hover;
- border-color: @border-color-default-hover;
+ color: @color-base-hover;
+ border-color: @border-color-base-hover;
}
&:focus {
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
box-shadow: @box-shadow-widget-focus;
outline: 0;
}
@@ -1658,10 +1658,10 @@
&-handle {
.oo-ui-box-sizing( border-box );
- min-height: @min-height-widget-default;
+ min-height: @min-height-widget-base;
.oo-ui-inline-spacing( 0.5em );
- border: @border-default;
- border-radius: @border-radius-default;
+ border: @border-base;
+ border-radius: @border-radius-base;
padding: 0 @padding-horizontal-input-text
@padding-vertical-label;
line-height: @line-height-reset;
@@ -1710,7 +1710,7 @@
&.oo-ui-widget-enabled {
.oo-ui-tagMultiselectWidget-handle {
- background-color: @background-color-default;
+ background-color: @background-color-base;
.oo-ui-transition(
border-color @transition-ease-out-sine-medium,
box-shadow @transition-ease-out-sine-medium
@@ -1723,7 +1723,7 @@
}
&.oo-ui-tagMultiselectWidget-focus
.oo-ui-tagMultiselectWidget-handle {
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
outline: 0;
box-shadow: @box-shadow-widget-focus;
}
@@ -1738,7 +1738,7 @@
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
- background-color: @background-color-default;
+ background-color: @background-color-base;
}
.oo-ui-inputWidget-input {
@@ -1774,10 +1774,10 @@
margin: 0;
font-size: inherit;
font-family: inherit;
- background-color: @background-color-default;
+ background-color: @background-color-base;
color: @color-emphasized;
- border: @border-default;
- border-radius: @border-radius-default;
+ border: @border-base;
+ border-radius: @border-radius-base;
padding: @padding-input-text;
}
@@ -1807,7 +1807,7 @@
}
&:focus {
outline: 0;
- border-color: @border-color-default-focus;
+ border-color: @border-color-base-focus;
box-shadow: @box-shadow-widget-focus;
}
@@ -1818,7 +1818,7 @@
border-color: @border-color-readonly;
}
&:focus {
- border-color:
@border-color-default-focus;
+ border-color: @border-color-base-focus;
}
}
@@ -1885,14 +1885,14 @@
}
textarea + .oo-ui-iconElement-icon {
- max-height: @size-default; // Use `@size-default` as
`max-height` for multiline TextInputWidgets
+ max-height: @size-base; // Use `@size-base` as
`max-height` for multiline TextInputWidgets
}
}
> .oo-ui-labelElement-label {
color: @color-subtle;
- margin-top: @border-width-default; // Address `border` on
`input`
- padding: @padding-top-default @padding-horizontal-default
@padding-bottom-default @padding-horizontal-input-text;
+ margin-top: @border-width-base; // Address `border` on `input`
+ padding: @padding-top-base @padding-horizontal-base
@padding-bottom-base @padding-horizontal-input-text;
line-height: @line-height-widget-singleline;
}
@@ -1907,14 +1907,14 @@
}
.oo-ui-indicatorElement-indicator {
- max-height: @size-default;
- margin-right: @padding-horizontal-default;
+ max-height: @size-base;
+ margin-right: @padding-horizontal-base;
}
}
&-labelPosition-after {
&.oo-ui-indicatorElement > .oo-ui-labelElement-label {
- margin-right: @size-indicator +
@padding-horizontal-default + @padding-horizontal-input-text;
+ margin-right: @size-indicator +
@padding-horizontal-base + @padding-horizontal-input-text;
}
}
@@ -2017,8 +2017,8 @@
box-shadow: @box-shadow-input-binary-active;
.oo-ui-toggleSwitchWidget-grip {
- background-color: @background-color-default;
- border-color: @background-color-default;
+ background-color: @background-color-base;
+ border-color: @background-color-base;
box-shadow: @box-shadow-input-binary;
}
}
@@ -2037,8 +2037,8 @@
border-color: @border-color-input-binary-on;
.oo-ui-toggleSwitchWidget-grip {
- background-color: @background-color-default;
- border-color: @background-color-default;
+ background-color: @background-color-base;
+ border-color: @background-color-base;
box-shadow: @box-shadow-input-binary;
}
@@ -2055,7 +2055,7 @@
border-color: @border-color-input-binary-on;
&:before {
- border-color: @color-default-light;
+ border-color: @color-base-light;
}
}
}
@@ -2072,7 +2072,7 @@
}
&.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
- background-color: @background-color-default;
+ background-color: @background-color-base;
}
}
}
diff --git a/src/themes/wikimediaui/windows.less
b/src/themes/wikimediaui/windows.less
index a2f98aa..e4aa15e 100644
--- a/src/themes/wikimediaui/windows.less
+++ b/src/themes/wikimediaui/windows.less
@@ -31,14 +31,14 @@
&-message {
font-size: 1.1em;
line-height: @line-height-message;
- color: @color-default;
+ color: @color-base;
text-align: left;
}
&-actions {
&-horizontal {
.oo-ui-actionWidget {
- border-right: @border-default;
+ border-right: @border-base;
margin: 0;
&:last-child {
@@ -49,7 +49,7 @@
&-vertical {
.oo-ui-actionWidget {
- border-bottom: @border-default;
+ border-bottom: @border-base;
margin: 0;
&:last-child {
@@ -281,9 +281,9 @@
text-align: left;
margin: 1em;
padding: 1em;
- border: @border-width-default solid @border-color-erroneous;
+ border: @border-width-base solid @border-color-erroneous;
background-color: #fff7f7;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
}
}
@@ -294,7 +294,7 @@
.oo-ui-transition( opacity @transition-ease-medium );
> .oo-ui-window-frame {
- background-color: @background-color-default;
+ background-color: @background-color-base;
opacity: 0;
.oo-ui-transform( scale( 0.5 ) );
.oo-ui-transition( all @transition-ease-medium );
@@ -320,7 +320,7 @@
max-height: 100%;
max-height: e( 'calc( 100% - 2em )' );
border: @border-dialog;
- border-radius: @border-radius-default;
+ border-radius: @border-radius-base;
box-shadow: @box-shadow-dialog;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/360328
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie798a2808a7069b5b9b9ef0bf44574d4940b5f92
Gerrit-PatchSet: 5
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jforrester <[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
