From 5d6fb04bf928a517609a5b5cf525d94e88ed5cb6 Mon Sep 17 00:00:00 2001 From: Pau Giner Date: Fri, 28 Feb 2014 11:52:15 +0100 Subject: [PATCH] Button group adjustments In order to support togglable button groups two changes are made: * Avoid buttons in the group to have two borders (improvement only for modern browsers). * Allow the active state to be settable using a class (mw-ui-checked) with the same style as :active but not depending on hover. Change-Id: I6152c963f15420f1dcb3086e077163d28d6c6e2d --- resources/mediawiki.ui/components/default/buttons.less | 6 +++++- resources/mediawiki.ui/mixins/effects.less | 9 ++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/resources/mediawiki.ui/components/default/buttons.less b/resources/mediawiki.ui/components/default/buttons.less index 73b5dc4260..54d160833c 100644 --- a/resources/mediawiki.ui/components/default/buttons.less +++ b/resources/mediawiki.ui/components/default/buttons.less @@ -208,11 +208,15 @@ a.mw-ui-button { border-radius: 0; float: left; - &:first-child{ + &:first-child { border-top-left-radius: @buttonBorderRadius; border-bottom-left-radius: @buttonBorderRadius; } + &:not(:first-child) { + border-left: none; + } + &:last-child{ border-top-right-radius: @buttonBorderRadius; border-bottom-right-radius: @buttonBorderRadius; diff --git a/resources/mediawiki.ui/mixins/effects.less b/resources/mediawiki.ui/mixins/effects.less index eb8c203358..9daad749c7 100644 --- a/resources/mediawiki.ui/mixins/effects.less +++ b/resources/mediawiki.ui/mixins/effects.less @@ -17,7 +17,8 @@ } } - &:active { + &:active, + &.mw-ui-checked { // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528); // it passes it through, then ResourceLoader drops it. // background: shade(@bgColor, 20%); @@ -51,7 +52,8 @@ // make sure disabled buttons don't have hover and active states &:hover, - &:active { + &:active, + &.mw-ui-checked { box-shadow: none; } } @@ -69,7 +71,8 @@ color: mix(#fff, @textColor, 20%); } - &:active { + &:active, + &.mw-ui-checked { // lessphp doesn't implement shade, see above // color: shade(@textColor, 20%); color: mix(#000, @textColor, 20%); -- 2.20.1