EBernhardson has uploaded a new change for review. https://gerrit.wikimedia.org/r/150979
Change subject: Add mw-ui-checkbox ...................................................................... Add mw-ui-checkbox Move checkbox styling from BetaFeatures extension to core. Drop vendor prefixed border radius support (http://caniuse.com/border-radius) Use adjacent selector which is supported IE 7 and greater Use not selector to filter out IE < 8 which do not support :checked Change-Id: I6a0db7c8ce33d242120f1cba9222db4e2154696c (cherry picked from commit 0ea24459f3e0b83b02cfabd40da2205e4601b9f9) --- M docs/kss/Makefile M resources/Resources.php A resources/src/mediawiki.ui/components/checkbox.less M resources/src/mediawiki.ui/components/forms.less A resources/src/mediawiki.ui/components/images/checked.png A resources/src/mediawiki.ui/components/images/checked.svg M resources/src/mediawiki.ui/default.less 7 files changed, 108 insertions(+), 8 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/79/150979/1 diff --git a/docs/kss/Makefile b/docs/kss/Makefile index c096ef3..1be5e5c 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -6,7 +6,7 @@ # Generates CSS of mediawiki.ui and mediawiki.ui.button using ResourceLoader, then applies it to the # KSS style guide $(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX)) - @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP) + @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.checkbox|mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP) @node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template @rm $(KSS_RL_TMP) diff --git a/resources/Resources.php b/resources/Resources.php index 53d0c31..c3aa864 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1429,6 +1429,13 @@ 'position' => 'top', 'targets' => array( 'desktop', 'mobile' ), ), + 'mediawiki.ui.checkbox' => array( + 'styles' => array( + 'resources/src/mediawiki.ui/components/checkbox.less', + ), + 'position' => 'top', + 'targets' => array( 'desktop', 'mobile' ), + ), // Lightweight module for button styles 'mediawiki.ui.button' => array( 'styles' => array( diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less new file mode 100644 index 0000000..eced8cf --- /dev/null +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -0,0 +1,94 @@ +@import "mediawiki.mixins"; + +// Checkbox +// +// Styling checkboxes in a way that works cross browser is a tricky problem to solve. +// In MediaWiki UI we wrap a checkbox and label inside mw-ui-checkbox +// This renders in all browsers except IE6-8 which do not support the :checked selector +// these are kept backwards compatible using the :not(#noop) selector +// Ensure to markup the checkbox and label with id and for attributes respectively +// +// Markup: +// <div class="mw-ui-checkbox"> +// <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label> +// </div> +// <div class="mw-ui-checkbox"> +// <input type="checkbox" id="kss-example-5-2" disabled><label for="kss-example-5-2">Disabled checkbox</label> +// </div> +// +// Styleguide 5. +.mw-ui-checkbox { + display: inline-block; + vertical-align: middle; +} + +@checkboxSize: 24px; + +// We use the not selector to cancel out styling on IE 8 and below +.mw-ui-checkbox:not(#noop) { + // Position relatively so we can make use of absolute pseudo elements + position: relative; + line-height: @checkboxSize; + + * { + vertical-align: middle; + } + + input[type="checkbox"] { + // we hide the input element as instead we will style the label 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: @checkboxSize; + height: @checkboxSize; + + // the pseudo before element of the label after the checkbox now looks like a checkbox + & + label { + &::before { + content: ''; + position: absolute; + left: 0; + display: inline-block; + border-radius: 2px; + margin-right: 18px; + width: @checkboxSize; + height: @checkboxSize; + background-color: #fff; + cursor: pointer; + border: 1px solid grey; + } + } + + // 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-repeat: no-repeat; + background-position: center top; + } + } + } + + @focusBottomBorderSize: 3px; + &:active, + &:focus { + + label { + &::after { + content: ''; + position: absolute; + width: @checkboxSize; + height: @checkboxSize - @focusBottomBorderSize + 1; // offset by bottom border + // offset from the checkbox by 1px to account for left border + left: 1px; + border-bottom: solid @focusBottomBorderSize lightgrey; + } + } + } + + // disabled checked boxes have a gray background + &:disabled + label::before { + background-color: lightgrey; + } + } +} diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less index 0b1e027..7c01350 100644 --- a/resources/src/mediawiki.ui/components/forms.less +++ b/resources/src/mediawiki.ui/components/forms.less @@ -56,7 +56,7 @@ vertical-align: middle; } - label { + > label { display: block; .box-sizing(border-box); .agora-label-styling(); @@ -66,7 +66,6 @@ } // Override input styling just for checkboxes and radio inputs. - input[type="checkbox"], input[type="radio"] { display: inline; .box-sizing(content-box); @@ -159,11 +158,11 @@ .agora-label-styling(); // mixins/forms.less } -// Nesting an input checkbox or radio button inside a label with this class +// Nesting an input inside a label with this class // improves alignment, e.g. -// <label class="mw-ui-checkbox-label"> -// <input type="checkbox">The label text +// <label class="mw-ui-radio-label"> +// <input type="radio">The label text // </label> -.mw-ui-checkbox-label, .mw-ui-radio-label { +.mw-ui-radio-label { .agora-inline-label-styling(); } diff --git a/resources/src/mediawiki.ui/components/images/checked.png b/resources/src/mediawiki.ui/components/images/checked.png new file mode 100644 index 0000000..ce4e6b9 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/checked.png Binary files differ diff --git a/resources/src/mediawiki.ui/components/images/checked.svg b/resources/src/mediawiki.ui/components/images/checked.svg new file mode 100644 index 0000000..aea69db --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/checked.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24"><path d="M4 12l5 5 11-12" stroke="#00B78C" stroke-width="3" fill="none"/></svg> \ No newline at end of file diff --git a/resources/src/mediawiki.ui/default.less b/resources/src/mediawiki.ui/default.less index d21b814..c9d6208 100644 --- a/resources/src/mediawiki.ui/default.less +++ b/resources/src/mediawiki.ui/default.less @@ -1,6 +1,5 @@ /** * Provide Agora appearance for mw-ui-* classes. */ - @import "components/forms"; @import "components/utilities"; -- To view, visit https://gerrit.wikimedia.org/r/150979 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I6a0db7c8ce33d242120f1cba9222db4e2154696c Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: wmf/1.24wmf16 Gerrit-Owner: EBernhardson <ebernhard...@wikimedia.org> Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
