//
// 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.
zoom: 1;
// Container styling
- .button-colors(#FFF, #CCC);
+ .button-colors(#FFF, #CCC, #777);
border-radius: @borderRadius;
min-width: 4em;
cursor: default;
}
- .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
-
// Styling for specific button types
// -----------------------------------------
// Styleguide 2.1.1.
&.mw-ui-progressive,
&.mw-ui-primary {
- .button-colors(@colorProgressive, @colorProgressiveHighlight);
+ .button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
&.mw-ui-quiet {
- .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight);
+ .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
}
}
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
- .button-colors(@colorConstructive, @colorConstructiveHighlight);
+ .button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
&.mw-ui-quiet {
- .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight);
+ .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
}
}
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
- .button-colors(@colorDestructive, @colorDestructiveHighlight);
+ .button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
&.mw-ui-quiet {
- .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight);
+ .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
}
}
background: transparent;
border: none;
text-shadow: none;
- .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight);
+ .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive);
&:hover,
&:focus {
&:focus {
text-decoration: none;
}
+
+ // a-tags behave different to inputs if the line-height attribute is inherited
+ // from another element (e.g. mw-body-content). They appear bigger as input
+ // tags. See Bug T116427. To fix that, apply the correct line-height (used
+ // for inputs) to a-tags, too.
+ line-height: normal;
}
// Button groups