VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/244838
Change subject: Get CheckboxInputWidget to MediaWiki theme's design specs
......................................................................
Get CheckboxInputWidget to MediaWiki theme's design specs
Getting CheckboxInputWidget to latest design specifications in
corresponding mockup M30 for MediaWiki theme.
Bug: T114049
Change-Id: Id0b51b0028243d936298a11c76932b148f559d91
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
2 files changed, 55 insertions(+), 29 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/38/244838/1
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 27b9dd3..032b156 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -42,6 +42,9 @@
@input-size: 1.6em;
@border-radius: 2px;
+@border-width-small: 1px;
+@border-width-medium: 2px;
+
@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 1dacae4..3602467 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -369,51 +369,74 @@
max-width: none;
& + span {
- cursor: pointer;
- .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;
+ cursor: pointer;
+ .oo-ui-transition(
+ background-color @medium-ease-out-back,
+ background-size @medium-ease-out-back,
+ border-color @medium-ease-out-back,
+ border-width @medium-ease-out-back
+ );
}
-
- &:checked + span {
- background-size: 100% 100%;
+ &:hover + span,
+ &:focus:hover + span {
+ border-color: @progressive;
+ border-width: @border-width-medium;
}
-
- &: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 + span {
- cursor: default;
- 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');
+ &:disabled {
+ & + 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;
+ }
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/244838
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id0b51b0028243d936298a11c76932b148f559d91
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <ve...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
