From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 6 Jan 2015 23:46:28 +0000 (+0530)
Subject: mw.ui: checkbox: Add state change transition
X-Git-Tag: 1.31.0-rc.0~12744^2
X-Git-Url: http://git.cyclocoop.org/%24href?a=commitdiff_plain;h=612594d25b76d5a2853526295a0a14ccbca4f8f6;p=lhc%2Fweb%2Fwiklou.git

mw.ui: checkbox: Add state change transition

Bug: T78372
Change-Id: If7141e8be250bfb14cbee7bfc6e56730de317312
---

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 506dc118ed..be0c638aff 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -61,6 +61,7 @@
 
 		// the pseudo before element of the label after the checkbox now looks like a checkbox
 		& + label::before {
+			.transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) );
 			content: '';
 			cursor: pointer;
 			.box-sizing(border-box);
@@ -71,15 +72,17 @@
 			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 - 0.2em, @checkboxSize - 0.2em );
 			background-repeat: no-repeat;
 			background-position: center center;
 			background-origin: border-box;
+			background-size: 0 0;
+		}
+
+		// when the input is checked, style the label pseudo before element that followed as a checked checkbox
+		&:checked + label::before {
+			background-size: 100% 100%;
 		}
 
 		&:active + label::before {