Prtksxna has uploaded a new change for review. https://gerrit.wikimedia.org/r/172519
Change subject: [WIP] mediawiki.ui: checkbox: Fix states according to spec ...................................................................... [WIP] 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 Todo: 1. Get white check image 2. Make the checkbox bigger or the check image smaller (ask May) 3. Fix the shift being caused by the different states dues to the border-box box-sizing. Change-Id: I891f05c8edd010b81bd5f35eeae5d5dd22169933 --- M resources/src/mediawiki.ui/components/checkbox.less 1 file changed, 15 insertions(+), 6 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/19/172519/1 diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less index 0735a80..556d094 100644 --- a/resources/src/mediawiki.ui/components/checkbox.less +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -30,7 +30,6 @@ } @checkboxSize: 1.6em; -@focusBottomBorderSize: 0.2em; // We use the not selector to cancel out styling on IE 8 and below .mw-ui-checkbox:not(#noop) { @@ -63,26 +62,36 @@ width: @checkboxSize; height: @checkboxSize; background-color: #fff; - border: 1px solid grey; + border: 1px solid @colorGray7; + box-sizing: border-box; } // when the input is checked, style the label pseudo before element that followed as a checked checkbox &:checked + label::before { .background-image-svg('images/checked.svg', 'images/checked.png'); - .background-size( @checkboxSize, @checkboxSize ); + .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em ); background-repeat: no-repeat; background-position: center top; } - &:active + label::before, + &:active + label::before { + background-color: @colorGray13; + border-color: @colorGray13; + } + &:focus + label::before { - box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey; + border-width: 2px; + } + + &:hover + label::before { + border-bottom-width: 2px; } // disabled checked boxes have a gray background &:disabled + label::before { cursor: default; - background-color: lightgrey; + background-color: @colorGray14; + border-color: @colorGray14; } } } -- To view, visit https://gerrit.wikimedia.org/r/172519 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I891f05c8edd010b81bd5f35eeae5d5dd22169933 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Prtksxna <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
