feat(clay-css): Nav add support for .nav-link.btn-unstyled

feat(clay-css): Nav added Sass maps `$nav-link`, `$nav-link-btn-unstyled` and map `$nav-link-*` variables to it fixes #2540
liferay · Oct 7, 2019 · 3dcbf47 · 3dcbf47
1 parent 4d78c67
commit 3dcbf47
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_navs.scss b/packages/clay-css/src/scss/atlas/variables/_navs.scss
@@ -5,6 +5,16 @@ $nav-link-disabled-color: $gray-500 !default;
 $nav-link-padding-x: 1rem !default; // 16px
 $nav-link-padding-y: 0.625rem !default; // 10px
 
+$nav-link: () !default;
+$nav-link: map-deep-merge((
+	disabled-box-shadow: none,
+), $nav-link);
+
+$nav-link-btn-unstyled: () !default;
+$nav-link-btn-unstyled: map-deep-merge((
+	focus-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem $white,
+), $nav-link-btn-unstyled);
+
 // Nav Nested
 
 $nav-nested-spacer-x: 1rem !default; // 16px

diff --git a/packages/clay-css/src/scss/components/_navs.scss b/packages/clay-css/src/scss/components/_navs.scss
@@ -2,18 +2,14 @@
 	font-size: $nav-font-size;
 }
 
-.nav-btn.btn-unstyled,
-.nav-link {
-	position: relative;
+// Nav Link
 
-	&:focus {
-		z-index: 1;
-	}
+.nav-link {
+	@include clay-link($nav-link);
+}
 
-	&.disabled {
-		color: $nav-link-disabled-color;
-		cursor: $nav-link-disabled-cursor;
-	}
+.nav-link.btn-unstyled {
+	@include clay-button-variant($nav-link-btn-unstyled);
 }
 
 // Nav Btn
@@ -30,9 +26,18 @@
 	padding-left: $nav-btn-padding-x;
 	padding-right: $nav-btn-padding-x;
 	padding-top: $nav-btn-padding-y;
+	position: relative;
 	text-align: center;
 	width: auto;
 
+	&:focus {
+		z-index: 1;
+	}
+
+	&.disabled {
+		opacity: 1;
+	}
+
 	&.btn-link {
 		margin-left: 0;
 		margin-right: 0;
@@ -43,17 +48,6 @@
 	}
 }
 
-.nav-btn,
-.nav-link {
-	&.disabled {
-		opacity: 1;
-	}
-}
-
-.nav-link.btn-unstyled {
-	padding: $nav-link-padding-y $nav-link-padding-x;
-}
-
 // Nav Item Monospaced
 
 .nav-btn-monospaced {

diff --git a/packages/clay-css/src/scss/variables/_navs.scss b/packages/clay-css/src/scss/variables/_navs.scss
@@ -2,6 +2,23 @@ $nav-font-size: null !default;
 
 $nav-link-disabled-cursor: $disabled-cursor !default;
 
+$nav-link: () !default;
+$nav-link: map-deep-merge((
+	padding: $nav-link-padding-y $nav-link-padding-x,
+	position: relative,
+	focus-z-index: 1,
+	disabled-color: $nav-link-disabled-color,
+	disabled-cursor: $nav-link-disabled-cursor,
+	disabled-pointer-events: auto,
+	disabled-active-pointer-events: none,
+), $nav-link);
+
+$nav-link-btn-unstyled: () !default;
+$nav-link-btn-unstyled: map-deep-merge((
+	width: 100%,
+	disabled-opacity: 1,
+), $nav-link-btn-unstyled);
+
 $nav-item-monospaced-size: 2rem !default; // 32px
 
 $nav-btn-margin-x: 0.25rem !default; // 4px