Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/149121
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) Change-Id: I6a0db7c8ce33d242120f1cba9222db4e2154696c --- M docs/kss/Makefile M resources/Resources.php A resources/src/mediawiki.ui/components/checkbox.less A resources/src/mediawiki.ui/components/images/checked.png A resources/src/mediawiki.ui/components/images/checked.svg 5 files changed, 73 insertions(+), 1 deletion(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/21/149121/1 diff --git a/docs/kss/Makefile b/docs/kss/Makefile index 374bab2..5d707fd 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.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP) + @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button|mediawiki.ui.checkbox&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 09e64c2..38b473e 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1452,6 +1452,15 @@ 'position' => 'top', 'targets' => array( 'desktop', 'mobile' ), ), + + // Lightweight module for button styles + 'mediawiki.ui.checkbox' => array( + 'styles' => array( + 'resources/src/mediawiki.ui/components/checkbox.less', + ), + '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..ea8dbfe --- /dev/null +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -0,0 +1,62 @@ +@import "mediawiki.mixins"; + +// Checkbox +// +// Styling checkboxes in a way that works cross browser is a tricky problem to solve. +// In MediaWiki UI we wrap the checkbox in a div element, and use JavaScript to enhance it. +// +// Markup: +// <div> +// <div class="client-js"> +// <div class='mw-ui-checkbox'> +// <input type='checkbox'> +// </div> +// <div class='mw-ui-checkbox mw-ui-checked'> +// <input type='checkbox'> +// </div> +// The same styles can be achieved in IE < 9 using JavaScript. +// They will look and function like normal checkboxes on IE6-8 without JavaScript. +// </div> +// </div> +// <div> +// <div class="mw-ui-checkbox"> <input type='checkbox'> </div> +// Without JavaScript we use native controls. +// </div> +// +// Styleguide 5. +.mw-ui-checkbox { + display: inline-block; + border-radius: 2px; + margin-right: 18px; + width: 24px; + height: 24px; + + &.mw-ui-checked { + .background-image-svg('images/checked.svg', 'images/checked.png'); + background-repeat: no-repeat; + background-position: center center; + -moz-background-position: -9999px -9999px!important; + } + + &:disabled, + &.mw-ui-disabled { + background-color: lightgrey; + } +} + +// With JavaScript +.client-js { + .mw-ui-checkbox { + background-color: #fff; + cursor: pointer; + border: 1px solid grey; + input { + width: 24px; + height: 24px; + /* Hide visually, keep accessible */ + position: absolute; + clip: rect(1px 1px 1px 1px); + clip: rect(1px,1px,1px,1px); + } + } +} 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 -- To view, visit https://gerrit.wikimedia.org/r/149121 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: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
