//
// Markup:
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label>
+// <input type="checkbox" id="kss-example-3">
+// <label for="kss-example-3">Standard checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-checked" checked><label for="kss-example-5-checked">Standard checked checkbox</label>
+// <input type="checkbox" id="kss-example-3-checked" checked>
+// <label for="kss-example-3-checked">Standard checked checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-disabled" disabled><label for="kss-example-5-disabled">Disabled checkbox</label>
+// <input type="checkbox" id="kss-example-3-disabled" disabled>
+// <label for="kss-example-3-disabled">Disabled checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-disabled-checked" disabled checked><label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
+// <input type="checkbox" id="kss-example-3-disabled-checked" disabled checked>
+// <label for="kss-example-3-disabled-checked">Disabled checked checkbox</label>
// </div>
//
-// Styleguide 5.
+// Styleguide 3.
.mw-ui-checkbox {
display: inline-block;
vertical-align: middle;
}
-@checkboxSize: 1.6em;
+@checkboxSize: 2em;
// We use the not selector to cancel out styling on IE 8 and below
.mw-ui-checkbox:not(#noop) {
line-height: @checkboxSize;
* {
+ // reset font sizes (see bug 72727)
+ font: inherit;
vertical-align: middle;
}
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
max-width: none;
- margin-right: .4em;
+ margin: 0;
+ margin-right: 0.4em;
// the pseudo before element of the label after the checkbox now looks like a checkbox
- & + label {
+ & + label::before {
+ .transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) );
+ content: '';
cursor: pointer;
-
- &::before {
- content: '';
- position: absolute;
- left: 0;
- border-radius: @borderRadius;
- width: @checkboxSize;
- height: @checkboxSize;
- background-color: #fff;
- border: 1px solid grey;
- }
+ .box-sizing(border-box);
+ position: absolute;
+ left: 0;
+ border-radius: @borderRadius;
+ width: @checkboxSize;
+ height: @checkboxSize;
+ background-color: #fff;
+ border: 1px solid @colorGray7;
+ .background-image-svg('images/checked.svg', 'images/checked.png');
+ .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em );
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-origin: border-box;
+ background-size: 0 0;
}
// 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-size( @checkboxSize, @checkboxSize );
- background-repeat: no-repeat;
- background-position: center top;
- }
- }
+ &:checked + label::before {
+ background-size: 100% 100%;
+ }
+
+ &:active + label::before {
+ background-color: @colorGray13;
+ border-color: @colorGray13;
}
- @focusBottomBorderSize: 0.2em;
- &:active,
- &:focus {
- + label {
- &::before {
- box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey;
- }
- }
+ &:focus + label::before {
+ border-width: 2px;
}
- // disabled checked boxes have a gray background
- &:disabled + label {
+ &:focus:hover + label::before,
+ &:hover + label::before {
+ border-bottom-width: 3px;
+ }
+
+ // disabled checkboxes have a gray background
+ &:disabled + label::before {
cursor: default;
+ background-color: @colorGray14;
+ border-color: @colorGray14;
+ }
- &::before {
- background-color: lightgrey;
- }
+ // disabled and checked checkboxes have a white circle
+ &:disabled:checked + label::before {
+ .background-image-svg('images/checked_disabled.svg', 'images/checked_disabled.png');
}
}
}