Get rid of tiny meaningless differences.
Change-Id: I78b3bf378bae1fce11b6ef4f85f7449421211721
//
// Markup:
// <div class="mw-ui-checkbox">
//
// 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-5">
+// <label for="kss-example-5">Standard checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
// </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-5-checked" checked>
+// <label for="kss-example-5-checked">Standard checked checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
// </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-5-disabled" disabled>
+// <label for="kss-example-5-disabled">Disabled checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
// </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-5-disabled-checked" disabled checked>
+// <label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
// </div>
//
// Styleguide 5.
// </div>
//
// Styleguide 5.
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
max-width: none;
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
max-width: none;
// the pseudo before element of the label after the checkbox now looks like a checkbox
& + label::before {
content: '';
cursor: pointer;
// the pseudo before element of the label after the checkbox now looks like a checkbox
& + label::before {
content: '';
cursor: pointer;
+ .box-sizing(border-box);
position: absolute;
left: 0;
border-radius: @borderRadius;
position: absolute;
left: 0;
border-radius: @borderRadius;
height: @checkboxSize;
background-color: #fff;
border: 1px solid @colorGray7;
height: @checkboxSize;
background-color: #fff;
border: 1px solid @colorGray7;
- .box-sizing(border-box);
}
// when the input is checked, style the label pseudo before element that followed as a checked checkbox
}
// when the input is checked, style the label pseudo before element that followed as a checked checkbox
+ &:focus:hover + label::before,
&:hover + label::before {
border-bottom-width: 3px;
}
&:hover + label::before {
border-bottom-width: 3px;
}
line-height: @radioSize;
* {
line-height: @radioSize;
* {
+ // reset font sizes (see bug 72727)
font: inherit;
vertical-align: middle;
}
font: inherit;
vertical-align: middle;
}
// the pseudo before element of the label after the radio now looks like a radio
& + label::before {
// the pseudo before element of the label after the radio now looks like a radio
& + label::before {
.box-sizing(border-box);
position: absolute;
left: 0;
.box-sizing(border-box);
position: absolute;
left: 0;
background-origin: border-box;
}
background-origin: border-box;
}
+ &:active + label::before {
+ background-color: @colorGray13;
+ border-color: @colorGray13;
+ }
+
&:focus + label::before {
border-width: 2px;
}
&:focus + label::before {
border-width: 2px;
}
border-bottom-width: 3px;
}
border-bottom-width: 3px;
}
- &:active + label::before {
- background-color: @colorGray13;
- border-color: @colorGray13;
- }
-
- // disabled checked boxes have a gray background
+ // disabled radios have a gray background
&:disabled + label::before {
cursor: default;
&:disabled + label::before {
cursor: default;
- border-color: @colorGray14;
background-color: @colorGray14;
background-color: @colorGray14;
+ border-color: @colorGray14;
- // disabled and checked boxes have a white circle
+ // disabled and checked radios have a white circle
&:disabled:checked + label::before {
.background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png');
}
&:disabled:checked + label::before {
.background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png');
}