Breaking: (Fixes #380) Button Monospaced use button size line-height

liferay · Nov 27, 2017 · 12018ca · 12018ca
1 parent a93a644
commit 12018ca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/scss/atlas/variables/_buttons.scss b/src/scss/atlas/variables/_buttons.scss
@@ -16,8 +16,9 @@ $btn-padding-x-lg: 1.25rem !default; // 20px
 $btn-padding-y-lg: 0.5rem !default; // 8px
 
 $btn-font-size-sm: 0.875rem !default; // 14px
+$btn-line-height-sm: 1 !default;
 $btn-padding-x-sm: 0.6875rem !default; // 11px
-$btn-padding-y-sm: 0.28125rem !default; // 4.5px
+$btn-padding-y-sm: 0.5rem !default; // 8px
 
 // Button Monospaced
 

diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
@@ -76,31 +76,36 @@
 // Button Monospaced
 
 .btn-monospaced {
-	@include clay-monospace($btn-monospaced-size);
-
+	height: $btn-monospaced-size;
 	overflow: hidden;
 	padding: 0;
 	text-align: center;
 	white-space: normal;
+	width: $btn-monospaced-size;
 	word-wrap: break-word;
 
 	@include clay-scale-component {
-		@include clay-monospace($btn-monospaced-size-mobile);
+		height: $btn-monospaced-size-mobile;
+		width: $btn-monospaced-size-mobile;
 	}
 
 	&.btn-lg {
-		@include clay-monospace($btn-monospaced-size-lg);
+		height: $btn-monospaced-size-lg;
+		width: $btn-monospaced-size-lg;
 
 		@include clay-scale-component {
-			@include clay-monospace($btn-monospaced-size-lg-mobile);
+			height: $btn-monospaced-size-lg-mobile;
+			width: $btn-monospaced-size-lg-mobile;
 		}
 	}
 
 	&.btn-sm {
-		@include clay-monospace($btn-monospaced-size-sm);
+		height: $btn-monospaced-size-sm;
+		width: $btn-monospaced-size-sm;
 
 		@include clay-scale-component {
-			@include clay-monospace($btn-monospaced-size-sm-mobile);
+			height: $btn-monospaced-size-sm-mobile;
+			width: $btn-monospaced-size-sm-mobile;
 		}
 	}