Merge pull request #5859 from pat270/LPD-34095

fix(@clayui/css): LPD-34095 Reduce the default c-slideout z-index so …
liferay · Aug 16, 2024 · 0af0404 · 0af0404
2 parents 3b6a49e + 1b85ea6
commit 0af0404
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 4 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_slideout.scss b/packages/clay-css/src/scss/cadmin/components/_slideout.scss
@@ -37,3 +37,7 @@
 		@include clay-slideout-variant($cadmin-c-slideout-end-sm-down);
 	}
 }
+
+.c-slideout-height-full {
+	@include clay-slideout-variant($cadmin-c-slideout-height-full);
+}
diff --git a/packages/clay-css/src/scss/cadmin/variables/_globals-z-index.scss b/packages/clay-css/src/scss/cadmin/variables/_globals-z-index.scss
@@ -21,4 +21,9 @@ $cadmin-zindex-pagination-link-focus: 4 !default;
 $cadmin-zindex-pagination-link-active: 3 !default;
 $cadmin-zindex-pagination-link-disabled: 0 !default;
 $cadmin-zindex-panel-header-link-focus: 1 !default;
-$cadmin-zindex-sidenav: $cadmin-zindex-fixed + 5 !default; // 1035
+$cadmin-zindex-sidenav: calc(#{$cadmin-zindex-dropdown} - 25) !default; // 975
+
+$cadmin-zindex-c-slideout: $cadmin-zindex-sidenav !default; // 975
+$cadmin-zindex-c-slideout-height-full: calc(
+	#{$cadmin-zindex-fixed} + 5
+) !default; // 1035
diff --git a/packages/clay-css/src/scss/cadmin/variables/_slideout.scss b/packages/clay-css/src/scss/cadmin/variables/_slideout.scss
@@ -49,7 +49,7 @@ $cadmin-c-slideout: map-deep-merge(
 	(
 		display: flex,
 		overflow: hidden,
-		z-index: $cadmin-zindex-sidenav,
+		z-index: $cadmin-zindex-c-slideout,
 		c-slideout-shown: (
 			overflow: visible,
 		),
@@ -192,3 +192,11 @@ $cadmin-c-slideout-end-sm-down: map-deep-merge(
 	),
 	$cadmin-c-slideout-end-sm-down
 );
+
+$cadmin-c-slideout-height-full: () !default;
+$cadmin-c-slideout-height-full: map-deep-merge(
+	(
+		z-index: $cadmin-zindex-c-slideout-height-full,
+	),
+	$cadmin-c-slideout-height-full
+);
diff --git a/packages/clay-css/src/scss/components/_slideout.scss b/packages/clay-css/src/scss/components/_slideout.scss
@@ -37,3 +37,7 @@
 		@include clay-slideout-variant($c-slideout-end-sm-down);
 	}
 }
+
+.c-slideout-height-full {
+	@include clay-slideout-variant($c-slideout-height-full);
+}
diff --git a/packages/clay-css/src/scss/variables/_globals-z-index.scss b/packages/clay-css/src/scss/variables/_globals-z-index.scss
@@ -21,4 +21,7 @@ $zindex-pagination-link-focus: 4 !default;
 $zindex-pagination-link-active: 3 !default;
 $zindex-pagination-link-disabled: 0 !default;
 $zindex-panel-header-link-focus: 1 !default;
-$zindex-sidenav: $zindex-fixed + 5 !default; // 1035
+$zindex-sidenav: calc(#{$zindex-dropdown} - 25) !default; // 975
+
+$zindex-c-slideout: $zindex-sidenav !default; // 975
+$zindex-c-slideout-height-full: calc(#{$zindex-fixed} + 5) !default; // 1035
diff --git a/packages/clay-css/src/scss/variables/_slideout.scss b/packages/clay-css/src/scss/variables/_slideout.scss
@@ -49,7 +49,7 @@ $c-slideout: map-deep-merge(
 	(
 		display: flex,
 		overflow: hidden,
-		z-index: $zindex-sidenav,
+		z-index: $zindex-c-slideout,
 		c-slideout-shown: (
 			overflow: visible,
 		),
@@ -192,3 +192,11 @@ $c-slideout-end-sm-down: map-deep-merge(
 	),
 	$c-slideout-end-sm-down
 );
+
+$c-slideout-height-full: () !default;
+$c-slideout-height-full: map-deep-merge(
+	(
+		z-index: $zindex-c-slideout-height-full,
+	),
+	$c-slideout-height-full
+);