mediawiki.ui: Buttons should receive `max-width`

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / buttons.less

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index d66973a..71febe3 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -12,9 +12,6 @@
 //
 // Styleguide 2.
 
-@transitionDuration: .1s;
-@transitionFunction: ease-in-out;
-
 // Neutral button styling
 //
 // These are the main actions on the page/workflow. The page should have only one of progressive, constructive and desctructive buttons, the rest being quiet.
@@ -34,27 +31,26 @@
        font-size: 1em;
        // Container layout
        display: inline-block;
+       min-width: 4em;
+       max-width: 28.75em; // equivalent to 460px, @see T95367
        padding: .5em 1em;
        margin: 0;
-       .box-sizing(border-box);
+       border-radius: @borderRadius;
+       .box-sizing( border-box );
 
        // Disable weird iOS styling
        -webkit-appearance: none;
 
-       // IE6/IE7 hack
-       // http://stackoverflow.com/a/5838575/365238
+       // IE 6 & 7 hack
+       // https://stackoverflow.com/a/5838575/365238
        *display: inline;
        zoom: 1;
 
-       // Container styling
-       .button-colors(#FFF, #CCC, #777);
-       border-radius: @borderRadius;
-       min-width: 4em;
-
        // Ensure that buttons and inputs are nicely aligned when they have differing heights
        vertical-align: middle;
 
        // Content styling
+       .button-colors( #fff, @colorGray12, @colorGray7 );
        text-align: center;
        font-weight: bold;
 
@@ -66,8 +62,6 @@
                cursor: default;
        }
 
-       .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
-
        // Styling for specific button types
        // -----------------------------------------
 
@@ -117,6 +111,8 @@
        &.mw-ui-block {
                display: block;
                width: 100%;
+               margin-left: auto;
+               margin-right: auto;
        }
 
        // Progressive buttons
@@ -135,10 +131,10 @@
        // Styleguide 2.1.1.
        &.mw-ui-progressive,
        &.mw-ui-primary {
-               .button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
+               .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
+                       .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
                }
        }
 
@@ -158,10 +154,10 @@
        //
        // Styleguide 2.1.2.
        &.mw-ui-constructive {
-               .button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
+               .button-colors( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
+                       .button-colors-quiet( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
                }
        }
 
@@ -180,10 +176,10 @@
        //
        // Styleguide 2.1.3.
        &.mw-ui-destructive {
-               .button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
+               .button-colors( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
+                       .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
                }
        }
 
@@ -218,9 +214,9 @@
        // Styleguide 2.1.4.
        &.mw-ui-quiet {
                background: transparent;
-               border: none;
+               border: 0;
                text-shadow: none;
-               .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive);
+               .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
 
                &:hover,
                &:focus {
@@ -274,8 +270,8 @@ a.mw-ui-button {
                border-bottom-left-radius: @borderRadius;
        }
 
-       &:not(:first-child) {
-               border-left: none;
+       &:not( :first-child ) {
+               border-left: 0;
        }
 
        &:last-child{