fix(@clayui/css): Input Groups add btn-monospaced support for butto…

…ns inside `input-group-inset-item` fix(@clayui/css): Input Group adds Sass maps `$input-group-inset-item-btn-monospaced`, `$input-group-lg-inset-item-btn-monospaced`, `$input-group-sm-inset-item-btn-monospaced` fixes #4049
liferay · May 10, 2021 · 0d31b54 · 0d31b54
1 parent 6ee3286
commit 0d31b54
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 25 deletions.
diff --git a/packages/clay-css/src/scss/components/_input-groups.scss b/packages/clay-css/src/scss/components/_input-groups.scss
@@ -294,21 +294,27 @@
 			padding-right: $input-group-addon-padding-x-lg;
 			padding-top: $input-group-addon-padding-y-lg;
 		}
-	}
-
-	> .input-group-inset-item {
-		> .btn {
-			@include clay-button-size($input-group-lg-inset-item-btn);
-		}
 
-		> .form-file {
-			height: 75%;
+		> .input-group-inset-item {
+			> .btn {
+				@include clay-button-size($input-group-lg-inset-item-btn);
+			}
 
-			.btn {
-				@include clay-button-size(
-					$input-group-lg-inset-item-form-file-btn
+			> .btn-monospaced {
+				@include clay-button-variant(
+					$input-group-lg-inset-item-btn-monospaced
 				);
 			}
+
+			> .form-file {
+				height: 75%;
+
+				.btn {
+					@include clay-button-size(
+						$input-group-lg-inset-item-form-file-btn
+					);
+				}
+			}
 		}
 	}
 }
@@ -372,21 +378,27 @@
 			padding-right: $input-group-addon-padding-x-sm;
 			padding-top: $input-group-addon-padding-y-sm;
 		}
-	}
-
-	> .input-group-inset-item {
-		> .btn {
-			@include clay-button-size($input-group-sm-inset-item-btn);
-		}
 
-		> .form-file {
-			height: 75%;
+		> .input-group-inset-item {
+			> .btn {
+				@include clay-button-size($input-group-sm-inset-item-btn);
+			}
 
-			.btn {
-				@include clay-button-size(
-					$input-group-sm-inset-item-form-file-btn
+			> .btn-monospaced {
+				@include clay-button-variant(
+					$input-group-sm-inset-item-btn-monospaced
 				);
 			}
+
+			> .form-file {
+				height: 75%;
+
+				.btn {
+					@include clay-button-size(
+						$input-group-sm-inset-item-form-file-btn
+					);
+				}
+			}
 		}
 	}
 
@@ -512,6 +524,12 @@
 			}
 		}
 
+		.btn-monospaced {
+			@include clay-button-variant(
+				$input-group-inset-item-btn-monospaced
+			);
+		}
+
 		.form-file {
 			height: 75%;
 

diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss
@@ -668,11 +668,13 @@ $input-group-inset-item-padding-right: 5px !default;
 $input-group-inset-item-btn: () !default;
 $input-group-inset-item-btn: map-deep-merge(
 	(
-		display: block,
+		align-items: center,
+		display: flex,
 		height: 75%,
+		justify-content: center,
 		line-height: 1,
-		margin-left: 0.125rem,
-		margin-right: 0.125rem,
+		margin-left: 0.1875rem,
+		margin-right: 0.1875rem,
 		padding-bottom: 0,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
@@ -683,10 +685,24 @@ $input-group-inset-item-btn: map-deep-merge(
 			height: 100%,
 			justify-content: center,
 		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
 	),
 	$input-group-inset-item-btn
 );
 
+$input-group-inset-item-btn-monospaced: () !default;
+$input-group-inset-item-btn-monospaced: map-deep-merge(
+	(
+		font-size: 1rem,
+		height: 2rem,
+		padding: 0,
+		width: 2rem,
+	),
+	$input-group-inset-item-btn-monospaced
+);
+
 $input-group-inset-form-file-btn: () !default;
 $input-group-inset-form-file-btn: map-deep-merge(
 	(
@@ -736,6 +752,8 @@ $input-group-lg-item-btn-monospaced: map-deep-merge(
 
 $input-group-lg-inset-item-btn: () !default;
 
+$input-group-lg-inset-item-btn-monospaced: () !default;
+
 $input-group-lg-inset-item-form-file-btn: () !default;
 $input-group-lg-inset-item-form-file-btn: map-deep-merge(
 	(
@@ -799,6 +817,17 @@ $input-group-sm-inset-item-btn: map-deep-merge(
 	$input-group-sm-inset-item-btn
 );
 
+$input-group-sm-inset-item-btn-monospaced: () !default;
+$input-group-sm-inset-item-btn-monospaced: map-deep-merge(
+	(
+		height: 1.5rem,
+		margin-left: 0.25rem,
+		margin-right: 0.25rem,
+		width: 1.5rem,
+	),
+	$input-group-sm-inset-item-btn-monospaced
+);
+
 $input-group-sm-inset-item-form-file-btn: () !default;
 $input-group-sm-inset-item-form-file-btn: map-deep-merge(
 	(