mediawiki.ui: checkbox: Fix states according to spec

 * Color changes
 * Introduces hover state
 * Separates focus and active state
 * Removes need for inset border
 * Adds white icon for disabled & checked state

Design specification on Trello-
https://trello.com/c/JETLmm7F/7-check-boxes

Change-Id: I891f05c8edd010b81bd5f35eeae5d5dd22169933

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 0735a80..5a72efe 100644 (file)
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -29,8 +29,7 @@
        vertical-align: middle;
 }
 
-@checkboxSize: 1.6em;
-@focusBottomBorderSize: 0.2em;
+@checkboxSize: 2em;
 
 // We use the not selector to cancel out styling on IE 8 and below
 .mw-ui-checkbox:not(#noop) {
@@ -63,26 +62,42 @@
                        width: @checkboxSize;
                        height: @checkboxSize;
                        background-color: #fff;
-                       border: 1px solid grey;
+                       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
                &:checked + label::before {
                        .background-image-svg('images/checked.svg', 'images/checked.png');
-                       .background-size( @checkboxSize, @checkboxSize );
+                       .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em );
                        background-repeat: no-repeat;
-                       background-position: center top;
+                       background-position: center center;
+                       background-origin: border-box;
+               }
+
+               &:active + label::before {
+                       background-color: @colorGray13;
+                       border-color: @colorGray13;
                }
 
-               &:active + label::before,
                &:focus + label::before {
-                       box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey;
+                       border-width: 2px;
+               }
+
+               &:hover + label::before {
+                       border-bottom-width: 3px;
                }
 
-               // disabled checked boxes have a gray background
+               // disabled checkboxes have a gray background
                &:disabled + label::before {
                        cursor: default;
-                       background-color: lightgrey;
+                       background-color: @colorGray14;
+                       border-color: @colorGray14;
+               }
+
+               // disabled and checked checkboxes have a white circle
+               &:disabled:checked + label::before {
+                       .background-image-svg('images/checked_disabled.svg', 'images/checked_disabled.png');
                }
        }
 }

diff --git a/resources/src/mediawiki.ui/components/images/checked_disabled.png b/resources/src/mediawiki.ui/components/images/checked_disabled.png
new file mode 100644 (file)
index 0000000..7566a06
Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/checked_disabled.png differ

diff --git a/resources/src/mediawiki.ui/components/images/checked_disabled.svg b/resources/src/mediawiki.ui/components/images/checked_disabled.svg
new file mode 100644 (file)
index 0000000..a7257f2
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/images/checked_disabled.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 12l5 5 11-12" stroke="#FFFFFF" stroke-width="3" fill="none"/></svg>