feat(@clayui/css): Nav adds nav-divider and nav-divider-end

liferay · Jan 4, 2022 · 600a379 · 600a379
1 parent e58c23e
commit 600a379
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/packages/clay-css/src/scss/components/_navs.scss b/packages/clay-css/src/scss/components/_navs.scss
@@ -55,11 +55,23 @@
 		@include clay-css(map-get($nav-divider, before));
 	}
 
-	&::before {
+	&::after {
 		@include clay-css(map-get($nav-divider, after));
 	}
 }
 
+.nav-divider-end {
+	@include clay-css($nav-divider-end);
+
+	&::before {
+		@include clay-css(map-get($nav-divider-end, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($nav-divider-end, after));
+	}
+}
+
 // Nav Text Truncate
 
 .nav-text-truncate {

diff --git a/packages/clay-css/src/scss/variables/_navs.scss b/packages/clay-css/src/scss/variables/_navs.scss
@@ -154,10 +154,52 @@ $nav-item: map-deep-merge(
 
 // .nav-divider
 
-$nav-divider-color: $gray-200 !default;
+$nav-divider-color: $gray-600 !default;
 $nav-divider-margin-y: $spacer * 0.5 !default;
 
 $nav-divider: () !default;
+$nav-divider: map-deep-merge(
+	(
+		margin-left: 0.5rem,
+		padding-left: 0.5rem,
+		position: relative,
+		before: (
+			background-color: $nav-divider-color,
+			content: '',
+			display: block,
+			height: 1rem,
+			left: 0,
+			margin-top: -0.5rem,
+			position: absolute,
+			top: 50%,
+			width: 1px,
+			z-index: 2,
+		),
+	),
+	$nav-divider
+);
+
+$nav-divider-end: () !default;
+$nav-divider-end: map-deep-merge(
+	(
+		margin-right: 0.5rem,
+		padding-right: 0.5rem,
+		position: relative,
+		after: (
+			background-color: $nav-divider-color,
+			content: '',
+			display: block,
+			height: 1rem,
+			margin-top: -0.5rem,
+			position: absolute,
+			right: 0,
+			top: 50%,
+			width: 1px,
+			z-index: 2,
+		),
+	),
+	$nav-divider-end
+);
 
 // .nav-text-truncate