jenkins-bot has submitted this change and it was merged.
Change subject: MediaWiki theme: Align `@input-*` vars to coding guidelines
......................................................................
MediaWiki theme: Align `@input-*` vars to coding guidelines
Aligning `@input-*` vars to coding guidelines and clarifying usage of
variables by renaming it to `*-input-binary`.
Change-Id: Ic90c11727104c2ab539c19ef8a94e09dd4f2ef4d
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
2 files changed, 32 insertions(+), 31 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 0133a7b..ef02568 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -42,23 +42,16 @@
// Invalid Widget (validation error feedback)
@color-invalid: #f00;
+@size-icon: unit( 24 / 16 / 0.8, em );
+@size-indicator: unit( 12 / 16 / 0.8, em );
+
@border-default: 1px solid #ccc;
-
-@input-border-color: #777;
-@input-active-color: #ccc;
-@input-hover-border-bottom-width: 3px;
-@input-focus-border-width: 2px;
-@input-size: 1.6em;
-
@border-radius-default: 2px;
@box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
@box-shadow-menu: @box-shadow-dialog;
@box-shadow-popup: @box-shadow-dialog;
@box-shadow-light-inset: inset 0 0 0 1px @color-default-light;
-
-@size-icon: unit( 24 / 16 / 0.8, em );
-@size-indicator: unit( 12 / 16 / 0.8, em );
@text-shadow-default: 0 1px 1px #fff; // 'coined' effect
@text-shadow-disabled: @text-shadow-default;
@@ -69,6 +62,14 @@
@transition-ease-out-back-medium: 200ms cubic-bezier( 0.175, 0.885, 0.32,
1.275 );
@transition-ease-out-sine-medium: 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 );
+// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
+@background-color-input-binary-active: #ccc;
+@size-input-binary: 1.6em;
+@border-input-binary: 1px solid #777;
+@border-color-input-binary-active: @background-color-input-binary-active;
+@border-bottom-width-input-binary-hover: 3px;
+@border-width-input-binary-focus: 2px;
+
// Theme mixins
// Workaround for Safari 8 bug. Combining a selector like
`input[type="checkbox"]:checked + span`
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 70b6e7b..12d7ab6 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -343,7 +343,7 @@
.theme-oo-ui-checkboxInputWidget () {
position: relative;
- line-height: @input-size;
+ line-height: @size-input-binary;
// Prevent the fake span from jumping to the next line of text
white-space: nowrap;
@@ -366,8 +366,8 @@
margin: 0;
// Ensure the invisible input takes up the required width
- width: @input-size;
- height: @input-size;
+ width: @size-input-binary;
+ height: @size-input-binary;
// Needed for Firefox mobile (See bug 71750 to workaround
default Firefox stylesheet)
max-width: none;
@@ -378,10 +378,10 @@
position: absolute;
left: 0;
border-radius: @border-radius-default;
- width: @input-size;
- height: @input-size;
+ width: @size-input-binary;
+ height: @size-input-binary;
background-color: white;
- border: 1px solid @input-border-color;
+ border: @border-input-binary;
.oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/check-constructive' );
.oo-ui-background-image-safari(
'@{oo-ui-default-image-path}/icons/check-constructive' );
background-repeat: no-repeat;
@@ -395,17 +395,17 @@
}
&:active + span {
- background-color: @input-active-color;
- border-color: @input-active-color;
+ background-color: @background-color-input-binary-active;
+ border-color: @border-color-input-binary-active;
}
&:focus + span {
- border-width: @input-focus-border-width;
+ border-width: @border-width-input-binary-focus;
}
&:focus:hover + span,
&:hover + span {
- border-bottom-width: @input-hover-border-bottom-width;
+ border-bottom-width:
@border-bottom-width-input-binary-hover;
}
&:disabled {
@@ -459,7 +459,7 @@
.theme-oo-ui-radioInputWidget () {
position: relative;
- line-height: @input-size;
+ line-height: @size-input-binary;
// Prevent the fake span from jumping to the next line of text
white-space: nowrap;
@@ -482,8 +482,8 @@
margin: 0;
// Ensure the invisible input takes up the required width
- width: @input-size;
- height: @input-size;
+ width: @size-input-binary;
+ height: @size-input-binary;
// Needed for Firefox mobile (See bug 71750 to workaround
default Firefox stylesheet)
max-width: none;
@@ -494,10 +494,10 @@
position: absolute;
left: 0;
border-radius: 100%;
- width: @input-size;
- height: @input-size;
+ width: @size-input-binary;
+ height: @size-input-binary;
background: white;
- border: 1px solid @input-border-color;
+ border: @border-input-binary;
.oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/circle-constructive' );
.oo-ui-background-image-safari(
'@{oo-ui-default-image-path}/icons/circle-constructive' );
background-repeat: no-repeat;
@@ -511,17 +511,17 @@
}
&:active + span {
- background-color: @input-active-color;
- border-color: @input-active-color;
+ background-color: @background-color-input-binary-active;
+ border-color: @border-color-input-binary-active;
}
&:focus + span {
- border-width: @input-focus-border-width;
+ border-width: @border-width-input-binary-focus;
}
&:focus:hover + span,
&:hover + span {
- border-bottom-width: @input-hover-border-bottom-width;
+ border-bottom-width:
@border-bottom-width-input-binary-hover;
}
&:disabled {
@@ -1193,7 +1193,7 @@
@travelDistance: 1.5em;
height: 2em;
width: @travelDistance + 2em;
- border: 1px solid @input-border-color;
+ border: @border-input-binary;
border-radius: 1em;
background-color: @background-color-default;
.oo-ui-inline-spacing( 0.5em );
--
To view, visit https://gerrit.wikimedia.org/r/266460
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic90c11727104c2ab539c19ef8a94e09dd4f2ef4d
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
