Prtksxna has uploaded a new change for review. https://gerrit.wikimedia.org/r/176397
Change subject: mediawiki.ui: checkbox: Fix states according to spec ...................................................................... mediawiki.ui: checkbox: Fix states according to spec * Color changes * Introduces hover state * Separates focus and active state * Removes need for inset border Design specification on Trello- https://trello.com/c/JETLmm7F/7-check-boxes Change-Id: Id31aa519fc26c710e4f2e0d7925d27cba2494af1 --- M src/themes/mediawiki/common.less M src/themes/mediawiki/widgets.less 2 files changed, 40 insertions(+), 26 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/97/176397/1 diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less index 70ff340..65f5acb 100644 --- a/src/themes/mediawiki/common.less +++ b/src/themes/mediawiki/common.less @@ -35,8 +35,14 @@ @oo-ui-default-image-path: 'themes/mediawiki/images'; -@checkbox-size: 1.6em; -@border-radius: 0.3em; +@input-border-color: #777; +@input-active-color: #ddd; +@input-disabled-color: #eee; +@input-hover-border-bottom-width: 3px; +@input-focus-border-width: 2px; +@input-size: 2em; +@border-radius: 2px; + // Theme mixins diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index b9a0672..2477752 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -139,9 +139,10 @@ .theme-oo-ui-checkboxInputWidget () { position: relative; - line-height: @checkbox-size; + line-height: @input-size; * { + font: inherit; vertical-align: middle; } @@ -149,13 +150,14 @@ // we hide the input element as instead we will style the span that follows // we use opacity so that VoiceOver software can still identify it opacity: 0; + // ensure the invisible checkbox takes up the required width - width: @checkbox-size; - height: @checkbox-size; + width: @input-size; + height: @input-size; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) max-width: none; - // the pseudo before element of the span after the checkbox now looks like a checkbox & + span { cursor: pointer; margin: 0 0.4em; @@ -163,40 +165,46 @@ & + span::before { content: ''; + .oo-ui-box-sizing( border-box ); position: absolute; left: 0; border-radius: @border-radius; - width: @checkbox-size; - height: @checkbox-size; - background-color: #fff; - border: 1px solid grey; + width: @input-size; + height: @input-size; + background-color: white; + border: 1px solid @input-border-color; } - // when the input is checked, style the span pseudo before element that followed as a checked checkbox &:checked + span::before { .oo-ui-background-image('@{oo-ui-default-image-path}/icons/check-constructive.svg'); - background-size: @checkbox-size, @checkbox-size; + background-size: @input-size, @input-size; background-repeat: no-repeat; - background-position: center top; + background-position: center center; + background-origin: border-box; } - @focus-bottom-border-size: 0.2em; - - &:active + span::after, - &:focus + span::after { - content: ''; - position: absolute; - width: @checkbox-size; - height: @checkbox-size - @focus-bottom-border-size + 0.1; // offset by bottom border - // offset from the checkbox by 1px to account for left border - left: 1px; - border-bottom: solid @focus-bottom-border-size lightgrey; + &:active + span::before { + background-color: @input-active-color; + border-color: @input-active-color; } - // disabled checked boxes have a gray background + &:focus + span::before { + border-width: @input-focus-border-width; + } + + &:focus:hover + span::before, + &:hover + span::before { + border-bottom-width: @input-hover-border-bottom-width; + } + &:disabled + span::before { cursor: default; - background-color: lightgrey; + background-color: @input-disabled-color; + border-color: @input-disabled-color; + } + + &:disabled:checked + span::before { + .oo-ui-background-image('@{oo-ui-default-image-path}/icons/check-invert.svg'); } } } -- To view, visit https://gerrit.wikimedia.org/r/176397 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Id31aa519fc26c710e4f2e0d7925d27cba2494af1 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Prtksxna <psax...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
