+@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;
+ }
+ }
+}