From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 11 Nov 2014 10:41:13 +0000 (+0530)
Subject: mediawiki.ui: checkbox: Fix states according to spec
X-Git-Tag: 1.31.0-rc.0~13212^2
X-Git-Url: http://git.heureux-cyclage.org/?a=commitdiff_plain;h=7c2404c88b08d187085b522957d8163cd62562f4;p=lhc%2Fweb%2Fwiklou.git

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 0735a80df4..5a72efebae 100644
--- 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
index 0000000000..7566a06b7f
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
index 0000000000..a7257f2681
--- /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>