From 612594d25b76d5a2853526295a0a14ccbca4f8f6 Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Wed, 7 Jan 2015 05:16:28 +0530 Subject: [PATCH] mw.ui: checkbox: Add state change transition Bug: T78372 Change-Id: If7141e8be250bfb14cbee7bfc6e56730de317312 --- resources/src/mediawiki.ui/components/checkbox.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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 { -- 2.20.1