mediawiki.ui: Button group active buttons unchanged on user interaction

Applying default cursor and making active button's hover state behave same
as normal state for improved user experience.

Bug: T77916
Depends-On: Ib89500d70b3e79edcf9ba989f05a311e0edec82b
Change-Id: I8fd74c28ccb89df1e257aa3d63d362697c4542ed

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 1b31956..93b7265 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -53,6 +53,7 @@
        }
 
        &:active,
+       &.is-on,
        &.mw-ui-checked {
                background: @activeColor;
                box-shadow: none;

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 71febe3..40a67c5 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -253,29 +253,35 @@ a.mw-ui-button {
 //
 // Markup:
 // <div class="mw-ui-button-group">
-//   <div class="mw-ui-button">A</div>
+//   <div class="mw-ui-button is-on">A</div>
 //   <div class="mw-ui-button">B</div>
 //   <div class="mw-ui-button">C</div>
 //   <div class="mw-ui-button">D</div>
 // </div><div style="clear:both"></div>
 //
 // Styleguide 2.2.
-.mw-ui-button-group > * {
-       min-width: 48px;
-       border-radius: 0;
-       float: left;
+.mw-ui-button-group {
+       & > * {
+               min-width: 48px;
+               border-radius: 0;
+               float: left;
 
-       &:first-child {
-               border-top-left-radius: @borderRadius;
-               border-bottom-left-radius: @borderRadius;
-       }
+               &:first-child {
+                       border-top-left-radius: @borderRadius;
+                       border-bottom-left-radius: @borderRadius;
+               }
+
+               &:not( :first-child ) {
+                       border-left: 0;
+               }
 
-       &:not( :first-child ) {
-               border-left: 0;
+               &:last-child {
+                       border-top-right-radius: @borderRadius;
+                       border-bottom-right-radius: @borderRadius;
+               }
        }
 
-       &:last-child{
-               border-top-right-radius: @borderRadius;
-               border-bottom-right-radius: @borderRadius;
+       & .is-on .button {
+               cursor: default;
        }
 }