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;
&.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 {
border-bottom-left-radius: @borderRadius;
}
- &:not(:first-child) {
- border-left: none;
+ &:not( :first-child ) {
+ border-left: 0;
}
&:last-child{