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 73b5dc4..54d1608 100644 (file)
--- 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 eb8c203..9daad74 100644 (file)
--- 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%);