mediawiki.ui: Synchronise checkbox and radio code

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / checkbox.less

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index a177940..67f8a21 100644 (file)
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -11,16 +11,20 @@
 //
 // 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">
-//   <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">
-//   <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">
-//   <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.
@@ -29,7 +33,7 @@
        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) {
@@ -38,6 +42,8 @@
        line-height: @checkboxSize;
 
        * {
+               // reset font sizes (see bug 72727)
+               font: inherit;
                vertical-align: middle;
        }
 
@@ -48,61 +54,57 @@
                // ensure the invisible checkbox takes up the required width
                width: @checkboxSize;
                height: @checkboxSize;
+               // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
+               max-width: none;
+               margin-right: 0.4em;
 
                // the pseudo before element of the label after the checkbox now looks like a checkbox
-               & + label {
+               & + label::before {
+                       content: '';
                        cursor: pointer;
-                       margin: 0 .4em;
-
-                       &::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;
-                                       }
+                       .box-sizing(border-box);
+                       position: absolute;
+                       left: 0;
+                       border-radius: @borderRadius;
+                       width: @checkboxSize;
+                       height: @checkboxSize;
+                       background-color: #fff;
+                       border: 1px solid @colorGray7;
                }
 
                // 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-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;
+               }
+
+               &:active + label::before {
+                       background-color: @colorGray13;
+                       border-color: @colorGray13;
                }
 
-               @focusBottomBorderSize: 0.2em;
-               &:active,
-               &:focus {
-                       + label {
-                               &::after {
-                                       content: '';
-                                       position: absolute;
-                                       width: @checkboxSize;
-                                       height: @checkboxSize - @focusBottomBorderSize + 0.08; // offset by bottom border
-                                       // offset from the checkbox by 1px to account for left border
-                                       left: 1px;
-                                       border-bottom: solid @focusBottomBorderSize 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');
                }
        }
 }