From 3cce825a2b40222cfbde26b0d0ad07e7b008ebe9 Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Fri, 2 Jan 2015 16:08:33 +0530 Subject: [PATCH] mw.ui: radio: Add state transition to radio buttons Bug: T78370 Change-Id: Icaac128c7d1e2424a8bed30e28f148bb1e720c5a --- resources/src/mediawiki.ui/components/radio.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less index 425ec1b865..bb012ebe97 100644 --- a/resources/src/mediawiki.ui/components/radio.less +++ b/resources/src/mediawiki.ui/components/radio.less @@ -60,6 +60,7 @@ // the pseudo before element of the label after the radio now looks like a radio & + label::before { + .transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ); content: ''; cursor: pointer; .box-sizing(border-box); @@ -70,15 +71,17 @@ height: @radioSize; background-color: #fff; border: 1px solid @colorGray7; - } - - // when the input is checked, style the label pseudo before element that followed as a checked radio - &:checked + label::before { .background-image-svg('images/radio_checked.svg', 'images/radio_checked.png'); .background-size( @radioSize, @radioSize ); 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 radio + &:checked + label::before { + background-size: 100% 100%; } &:active + label::before { -- 2.20.1