//
// 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.
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;
cursor: default;
}
- .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
-
// Styling for specific button types
// -----------------------------------------
&.mw-ui-block {
display: block;
width: 100%;
+ margin-left: auto;
+ margin-right: auto;
}
// Progressive buttons
// 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 );
}
}
//
// 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 );
}
}
//
// 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 );
}
}
// 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 {
&: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
border-bottom-left-radius: @borderRadius;
}
- &:not(:first-child) {
- border-left: none;
+ &:not( :first-child ) {
+ border-left: 0;
}
&:last-child{