# 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)
'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(
--- /dev/null
+@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;
+ }
+ }
+}
vertical-align: middle;
}
- label {
+ > label {
display: block;
.box-sizing(border-box);
.agora-label-styling();
}
// Override input styling just for checkboxes and radio inputs.
- input[type="checkbox"],
input[type="radio"] {
display: inline;
.box-sizing(content-box);
.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();
}