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 c096ef3..1be5e5c 100644 (file)
--- 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 ab0ab1f..bcdc8ef 100644 (file)
--- 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 (file)
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 (file)
--- 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 (file)
index 0000000..ce4e6b9
Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/checked.png 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 (file)
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 (file)
--- 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";