From: jdlrobson Date: Thu, 24 Jul 2014 20:01:35 +0000 (-0700) Subject: Add mw-ui-checkbox X-Git-Tag: 1.31.0-rc.0~14638^2 X-Git-Url: http://git.cyclocoop.org/%28?a=commitdiff_plain;h=0ea24459f3e0b83b02cfabd40da2205e4601b9f9;p=lhc%2Fweb%2Fwiklou.git 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 --- diff --git a/docs/kss/Makefile b/docs/kss/Makefile index c096ef339a..1be5e5ca32 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -6,7 +6,7 @@ kss: nodecheck # 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 ab0ab1f946..bcdc8efb72 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1428,6 +1428,13 @@ return array( '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 0000000000..eced8cfa24 --- /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: +//
+// +//
+//
+// +//
+// +// 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 0b1e02795a..7c01350192 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. -//