1 files changed, 100 insertions, 0 deletions
diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
new file mode 100644
index 00000000..e39646bc
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -0,0 +1,100 @@
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+
+// Checkbox
+//
+// Styling checkboxes in a way that works cross browser is a tricky problem to solve.
+// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
+// 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.
+// You should give the checkbox and label matching "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 {
+			cursor: pointer;
+
+			&::before {
+						content: '';
+						position: absolute;
+						left: 0;
+						display: inline-block;
+						border-radius: @borderRadius;
+						margin-right: 18px;
+						width: @checkboxSize;
+						height: @checkboxSize;
+						background-color: #fff;
+						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 {
+			cursor: default;
+
+			&::before {
+				background-color: lightgrey;
+			}
+		}
+	}
+}