From 7c2404c88b08d187085b522957d8163cd62562f4 Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 11 Nov 2014 16:11:13 +0530
Subject: [PATCH] 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
---
 .../src/mediawiki.ui/components/checkbox.less |  33 +++++++++++++-----
 .../components/images/checked_disabled.png    | Bin 0 -> 356 bytes
 .../components/images/checked_disabled.svg    |   1 +
 3 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 resources/src/mediawiki.ui/components/images/checked_disabled.png
 create mode 100644 resources/src/mediawiki.ui/components/images/checked_disabled.svg

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 0000000000000000000000000000000000000000..7566a06b7fb1a3327ad76df3969ae226a876603c
GIT binary patch
literal 356
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEX7WqAsj$Z!;#Vf<Z~8yL>2?p
zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4<ivthz5Jr|+3#$mfQlY^x;Tb-
zbiTc^(91bd=GeozCl58v;8i<lw1;(exIzW9x7h6O3z9uu%_MbhoH?et`k?lP2$qAP
zf+hW_59;M-zj>j~eDn4>%Q?@>4;^0_GVQmxbECG*|Ih_bv!Abcc7)&eos{;@4{C0V
z`yF+~_qBg-xW8x~_x*#}2i|X-#-0B_^+Ep)4dyuu?BA*+aGz(aKlE%*L1S4(rBYL=
zP0MrVoasM5G0lB)BDUxK`bT<q>JPuWQz7(HZ6Y7r!(Yt5mwr?!%KXMx*P}l1vgVJA
x>p$izt<9+rvUKKm{dT}2XzJ_#o9;M$<ILylJG+hZOa{=i44$rjF6*2UngDPjl>-0(

literal 0
HcmV?d00001

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>
-- 
2.20.1