feat(@clayui/css): Utilities adds 5 levels of gap utilities

- .c-gap-{size}, .c-gapy-{size}, and .c-gapx-{size}
liferay · Dec 6, 2022 · c095efd · c095efd
1 parent ba0447c
commit c095efd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/packages/clay-css/src/scss/components/_utilities.scss b/packages/clay-css/src/scss/components/_utilities.scss
@@ -324,6 +324,28 @@
 	background-color: $page-header-bg;
 }
 
+// Clay Gap
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+	@include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+		@each $size, $length in $c-gap {
+			.c-gap#{$infix}-#{$size} {
+				gap: $length;
+			}
+
+			.c-gapx#{$infix}-#{$size} {
+				column-gap: $length;
+			}
+
+			.c-gapy#{$infix}-#{$size} {
+				row-gap: $length;
+			}
+		}
+	}
+}
+
 // Clay Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {

diff --git a/packages/clay-css/src/scss/variables/_utilities.scss b/packages/clay-css/src/scss/variables/_utilities.scss
@@ -174,6 +174,21 @@ $inline-item: map-deep-merge(
 
 $page-header-bg: $gray-200 !default;
 
+// Clay Gap
+
+$c-gap: () !default;
+$c-gap: map-merge(
+	(
+		0: map-get($spacers, 0),
+		1: map-get($spacers, 1),
+		2: map-get($spacers, 2),
+		3: map-get($spacers, 3),
+		4: map-get($spacers, 4),
+		5: map-get($spacers, 5),
+	),
+	$c-gap
+);
+
 // Background
 
 $bg-theme-colors: () !default;
@@ -342,8 +357,8 @@ $border-theme-colors: map-deep-merge(
 
 // Display
 
-$displays: none, inline, inline-block, block, table, table-row, table-cell, flex,
-	inline-flex !default;
+$displays: none, inline, inline-block, block, grid, table, table-row, table-cell,
+	flex, inline-flex !default;
 
 // Overflow