From: Pau Giner <pau.giner@gmail.com>
Date: Fri, 28 Feb 2014 10:52:15 +0000 (+0100)
Subject: Button group adjustments
X-Git-Tag: 1.31.0-rc.0~16532^2
X-Git-Url: http://git.cyclocoop.org/url?a=commitdiff_plain;h=5d6fb04bf928a517609a5b5cf525d94e88ed5cb6;p=lhc%2Fweb%2Fwiklou.git

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

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%);