mediawiki.UI: Align buttons to design guidelines and OOjs UI

[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 5931efb..18fdb2f 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -50,13 +50,28 @@
        vertical-align: middle;
 
        // Content styling
-       .button-colors( #fff, @colorGray12, @colorGray7 );
+       .button-colors( @colorGray15, #fff, #d9d9d9 );
        text-align: center;
        font-weight: bold;
 
        // Interaction styling
        cursor: pointer;
 
+       &:focus {
+               outline-width: 0;
+
+               // Remove the inner border and padding in Firefox.
+               &::-moz-focus-inner {
+                       border-color: transparent;
+                       padding: 0;
+               }
+       }
+
+       // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
+       &:not( :disabled ) {
+               .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
+       }
+
        &:disabled {
                text-shadow: none;
                cursor: default;
@@ -118,6 +133,7 @@
        // Progressive buttons
        //
        // Use progressive buttons for actions which lead to a next step in the process.
+       // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555
        // .mw-ui-primary is deprecated, kept for compatibility.
        //
        // Markup:
@@ -130,31 +146,9 @@
        //
        // Styleguide 2.1.1.
        &.mw-ui-progressive,
+       &.mw-ui-constructive,
        &.mw-ui-primary {
-               .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
-
-               &.mw-ui-quiet {
-                       .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
-               }
-       }
-
-       // Constructive buttons (deprecated, consolidated with `progressive` – see T110555)
-       //
-       // Use constructive buttons for actions which result in a final action in the process that results
-       // in a change of state.
-       // e.g. save changes button
-       //
-       // Markup:
-       // <div>
-       //   <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
-       // </div>
-       // <div>
-       //   <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
-       // </div>
-       //
-       // Styleguide 2.1.2.
-       &.mw-ui-constructive {
-               .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+               .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 
                &.mw-ui-quiet {
                        .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
@@ -174,9 +168,9 @@
        //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
        // </div>
        //
-       // Styleguide 2.1.3.
+       // Styleguide 2.1.2.
        &.mw-ui-destructive {
-               .button-colors( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
+               .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 
                &.mw-ui-quiet {
                        .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
@@ -211,7 +205,7 @@
        //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
        // </div>
        //
-       // Styleguide 2.1.4.
+       // Styleguide 2.1.3.
        &.mw-ui-quiet {
                background: transparent;
                border: 0;