From 1ca34e455f4f74288d14fc11bce1cf3ec5e295d2 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 3 Feb 2020 16:52:18 -0800
Subject: [PATCH] fix(clay-css): Buttons use `math-sign` function for
 calculating negative margins on `.btn .c-inner` to prevent invalid CSS output
 like `margin: - -;`

issue #2763
---
 .../clay-css/src/scss/components/_buttons.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/clay-css/src/scss/components/_buttons.scss b/packages/clay-css/src/scss/components/_buttons.scss
index e8d82f81fd..5bf3fd9dcb 100644
--- a/packages/clay-css/src/scss/components/_buttons.scss
+++ b/packages/clay-css/src/scss/components/_buttons.scss
@@ -228,11 +228,11 @@
 @if ($enable-c-inner) {
 	.btn .c-inner {
 		display: block;
-		margin: -#{$btn-padding-y} -#{$btn-padding-x};
+		margin: #{math-sign($btn-padding-y)} #{math-sign($btn-padding-x)};
 		padding: $btn-padding-y $btn-padding-x;
 
 		@include clay-scale-component {
-			margin: -#{$btn-padding-y-mobile} -#{$btn-padding-x-mobile};
+			margin: #{math-sign($btn-padding-y-mobile)} #{math-sign($btn-padding-x-mobile)};
 			padding: $btn-padding-y-mobile $btn-padding-x-mobile;
 		}
 	}
@@ -248,42 +248,42 @@
 		flex-direction: column;
 		height: calc(100% + #{$btn-monospaced-padding-y * 2});
 		justify-content: center;
-		margin: -#{$btn-monospaced-padding-y} 0;
+		margin: #{math-sign($btn-monospaced-padding-y)} 0;
 		padding: 0;
 	}
 
 	.btn-sm {
 		.c-inner {
-			margin: -#{$btn-padding-y-sm} -#{$btn-padding-x-sm};
+			margin: #{math-sign($btn-padding-y-sm)} #{math-sign($btn-padding-x-sm)};
 			padding: $btn-padding-y-sm $btn-padding-x-sm;
 
 			@include clay-scale-component {
-				margin: -#{$btn-padding-y-sm-mobile} -#{$btn-padding-x-sm-mobile};
+				margin: #{math-sign($btn-padding-y-sm-mobile)} #{math-sign($btn-padding-x-sm-mobile)};
 				padding: $btn-padding-y-sm-mobile $btn-padding-x-sm-mobile;
 			}
 		}
 
 		&.btn-monospaced .c-inner {
 			height: calc(100% + #{$btn-monospaced-padding-y-sm * 2});
-			margin: -#{$btn-monospaced-padding-y-sm} 0;
+			margin: #{math-sign($btn-monospaced-padding-y-sm)} 0;
 			padding: 0;
 		}
 	}
 
 	.btn-lg {
 		.c-inner {
-			margin: -#{$btn-padding-y-lg} -#{$btn-padding-x-lg};
+			margin: #{math-sign($btn-padding-y-lg)} #{math-sign($btn-padding-x-lg)};
 			padding: $btn-padding-y-lg $btn-padding-x-lg;
 
 			@include clay-scale-component {
-				margin: -#{$btn-padding-y-lg-mobile} -#{$btn-padding-x-lg-mobile};
+				margin: #{math-sign($btn-padding-y-lg-mobile)} #{math-sign($btn-padding-x-lg-mobile)};
 				padding: $btn-padding-y-lg-mobile $btn-padding-x-lg-mobile;
 			}
 		}
 
 		&.btn-monospaced .c-inner {
 			height: calc(100% + #{$btn-monospaced-padding-y-lg * 2});
-			margin: -#{$btn-monospaced-padding-y-lg} 0;
+			margin: #{math-sign($btn-monospaced-padding-y-lg)} 0;
 			padding: 0;
 		}
 	}