X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fbuttons.less;h=71febe3a452d603fc95f4802ac9c1b3406ebf7e0;hb=05c3114029bf9a8a000fc92272f4c5b1acfc12d1;hp=77b3f9d8826cb1cebe50b5d645a56c325f3af24c;hpb=9c0a43600e9eff4a1a8e24ef0604ab6c0d69c0e8;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 77b3f9d882..71febe3a45 100644
--- 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 {
@@ -243,6 +239,12 @@ a.mw-ui-button {
 	&: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
@@ -268,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{