jenkins-bot has submitted this change and it was merged.
Change subject: MediaWiki theme: Adjust CheckboxInputWidget to match M30 design
......................................................................
MediaWiki theme: Adjust CheckboxInputWidget to match M30 design
* Changed set state to be a progressive blue filled box with an inverted
check icon, not white with a constructive check.
* Adjusted border sizing slightly.
Bug: T114049
Change-Id: Id0b51b0028243d936298a11c76932b148f559d91
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
2 files changed, 54 insertions(+), 28 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index dd76ce2..34b09ff 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -42,6 +42,8 @@
@input-size: 1.6em;
@border-radius: 2px;
+@border-width-small: 1px;
+
@box-shadow-menu: 0 0.15em 0 0 rgba(0, 0, 0, 0.15);
@box-shadow-popup: @box-shadow-menu;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 6d95dae..660173d 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -370,54 +370,78 @@
max-width: none;
& + span {
- .oo-ui-transition(background-size
@medium-ease-out-back);
.oo-ui-box-sizing( border-box );
position: absolute;
left: 0;
- border-radius: @border-radius;
width: @input-size;
height: @input-size;
- background-color: white;
- border: 1px solid @input-border-color;
-
.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-color: @background;
+ .oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/check-invert' );
+ .oo-ui-background-image-safari(
'@{oo-ui-default-image-path}/icons/check-invert' );
background-repeat: no-repeat;
background-position: center center;
background-origin: border-box;
background-size: 0 0;
+ border: @border-width-small solid @input-border-color;
+ border-radius: @border-radius;
+ box-shadow: inset 0 0 0 1px transparent;
+ cursor: pointer;
+ .oo-ui-transition(
+ background-color @medium-ease-out-back,
+ background-size @medium-ease-out-back,
+ border-color @medium-ease-out-back,
+ box-shadow @medium-ease-out-back
+ );
}
-
- &:checked + span {
- background-size: 100% 100%;
+ &:hover + span,
+ &:focus:hover + span {
+ border-color: @progressive;
+ box-shadow: inset 0 0 0 1px @progressive;
}
-
- &:active + span {
- background-color: @input-active-color;
- border-color: @input-active-color;
- }
-
&:focus + span {
- border-width: @input-focus-border-width;
+ border-width: @border-width-small;
+ }
+ &:active + span {
+ background-color: @progressive;
+ border-color: @progressive;
}
- &:focus:hover + span,
- &:hover + span {
- border-bottom-width: @input-hover-border-bottom-width;
+ &:checked {
+ & + span {
+ background-color: @progressive;
+ background-size: 90% 90%;
+ border-color: @progressive;
+ }
+ &:hover + span,
+ &:focus:hover + span {
+ background-color: @progressive-hover;
+ border-color: @progressive-hover;
+ border-width: @border-width-small;
+ }
+ &:focus + span {
+ background-color: @progressive;
+ border-color: @progressive;
+ box-shadow: inset 0 0 0 1px @background;
+ }
+ &:active + span {
+ background-color: @progressive-selected;
+ border-color: @progressive-selected;
+ }
}
&:disabled {
cursor: default;
+ & + span {
+ background-color: @input-disabled-color;
+ border-color: @input-disabled-color;
+ cursor: default;
+ }
+ &:hover + span {
+ background-color: @input-disabled-color;
+ border-color: @input-disabled-color;
+ }
}
- &:disabled + span {
- background-color: @input-disabled-color;
- border-color: @input-disabled-color;
- }
-
- &:disabled:checked + span {
-
.oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check-invert');
-
.oo-ui-background-image-safari('@{oo-ui-default-image-path}/icons/check-invert');
- }
}
}
--
To view, visit https://gerrit.wikimedia.org/r/244838
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id0b51b0028243d936298a11c76932b148f559d91
Gerrit-PatchSet: 4
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: Violetto <[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
