fix(@clayui/css): Panel and Cadmin Panel update variables that use `c…

…lay-panel-variant` mixin to use newest keys, The old keys still work and will win over new keys.
liferay · Jun 8, 2021 · ea4bffb · ea4bffb
1 parent ea0c66a
commit ea4bffb
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 42 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_panels.scss b/packages/clay-css/src/scss/atlas/variables/_panels.scss
@@ -10,8 +10,10 @@ $panel-header-link: () !default;
 $panel-header-link: map-deep-merge(
 	(
 		transition: box-shadow 0.15s ease-in-out,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$panel-header-link
 );
@@ -44,7 +46,9 @@ $panel-title-small-margin-left: 0.375rem !default; // 6px
 $panel-group-sm: () !default;
 $panel-group-sm: map-deep-merge(
 	(
-		title-font-size: 0.75rem,
+		title: (
+			font-size: 0.75rem,
+		),
 	),
 	$panel-group-sm
 );
@@ -56,10 +60,14 @@ $panel-secondary: map-deep-merge(
 	(
 		border-color: $gray-300,
 		color: $gray-600,
-		header-bg: null,
-		header-border-color: $gray-300,
-		footer-bg: null,
-		footer-border-color: $gray-300,
+		header: (
+			background-color: null,
+			border-color: $gray-300,
+		),
+		footer: (
+			background-color: null,
+			border-color: $gray-300,
+		),
 	),
 	$panel-secondary
 );
@@ -70,7 +78,10 @@ $panel-unstyled-header-link: () !default;
 $panel-unstyled-header-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		focus-box-shadow: 0 0 0 0.25rem $body-bg#{','} 0 0 0 0.375rem $primary-l1,
+		focus: (
+			box-shadow: #{0 0 0 0.25rem $body-bg,
+			0 0 0 0.375rem $primary-l1},
+		),
 	),
 	$panel-unstyled-header-link
 );
diff --git a/packages/clay-css/src/scss/cadmin/variables/_panels.scss b/packages/clay-css/src/scss/cadmin/variables/_panels.scss
@@ -51,11 +51,15 @@ $cadmin-panel-header-link: map-deep-merge(
 		display: block,
 		text-decoration: $cadmin-panel-header-link-text-decoration,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: inherit,
-		hover-text-decoration: $cadmin-panel-header-link-hover-text-decoration,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
-		focus-z-index: $cadmin-zindex-panel-header-link-focus,
+		hover: (
+			color: inherit,
+			text-decoration: $cadmin-panel-header-link-hover-text-decoration,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+			z-index: $cadmin-zindex-panel-header-link-focus,
+		),
 	),
 	$cadmin-panel-header-link
 );
@@ -107,10 +111,16 @@ $cadmin-panel-group-sm: () !default;
 $cadmin-panel-group-sm: map-deep-merge(
 	(
 		font-size: 14px,
-		header-padding-bottom: 8px,
-		header-padding-top: 8px,
-		title-font-size: 12px,
-		collapse-icon-top: 11px,
+		header: (
+			padding-bottom: 8px,
+			padding-top: 8px,
+		),
+		title: (
+			font-size: 12px,
+		),
+		collapse-icon: (
+			top: 11px,
+		),
 	),
 	$cadmin-panel-group-sm
 );
@@ -153,9 +163,13 @@ $cadmin-panel-secondary: map-deep-merge(
 	(
 		border-color: $cadmin-gray-300,
 		color: $cadmin-gray-600,
-		header-border-color: $cadmin-gray-300,
-		header-link: $cadmin-panel-secondary-header-link,
-		footer-border-color: $cadmin-gray-300,
+		header: (
+			border-color: $cadmin-gray-300,
+			link: $cadmin-panel-secondary-header-link,
+		),
+		footer: (
+			border-color: $cadmin-gray-300,
+		),
 	),
 	$cadmin-panel-secondary
 );
@@ -166,8 +180,10 @@ $cadmin-panel-unstyled-header-link: () !default;
 $cadmin-panel-unstyled-header-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		focus-box-shadow: #{0 0 0 4px $cadmin-body-bg,
-		0 0 0 6px $cadmin-primary-l1},
+		focus: (
+			box-shadow: #{0 0 0 4px $cadmin-body-bg,
+			0 0 0 6px $cadmin-primary-l1},
+		),
 	),
 	$cadmin-panel-unstyled-header-link
 );
@@ -185,11 +201,11 @@ $cadmin-panel-unstyled: map-deep-merge(
 			border-style: solid,
 			border-width: 0 0 1px 0,
 			padding-left: 0,
+			collapsed: (
+				border-color: $cadmin-gray-500,
+			),
+			link: $cadmin-panel-unstyled-header-link,
 		),
-		header-collapsed: (
-			border-color: $cadmin-gray-500,
-		),
-		header-link: $cadmin-panel-unstyled-header-link,
 		collapse-icon: (
 			right: 0,
 		),

diff --git a/packages/clay-css/src/scss/variables/_panels.scss b/packages/clay-css/src/scss/variables/_panels.scss
@@ -50,9 +50,13 @@ $panel-header-link: map-deep-merge(
 		display: block,
 		text-decoration: $panel-header-link-text-decoration,
 		transition: border-color 0.1s ease#{','} border-radius 0.5s ease,
-		hover-color: inherit,
-		hover-text-decoration: $panel-header-link-hover-text-decoration,
-		focus-z-index: $zindex-panel-header-link-focus,
+		hover: (
+			color: inherit,
+			text-decoration: $panel-header-link-hover-text-decoration,
+		),
+		focus: (
+			z-index: $zindex-panel-header-link-focus,
+		),
 	),
 	$panel-header-link
 );
@@ -111,10 +115,16 @@ $panel-group-sm: () !default;
 $panel-group-sm: map-deep-merge(
 	(
 		font-size: 0.875rem,
-		header-padding-bottom: 0.5rem,
-		header-padding-top: 0.5rem,
-		title-font-size: 0.875rem,
-		collapse-icon-top: 0.6875rem,
+		header: (
+			padding-bottom: 0.5rem,
+			padding-top: 0.5rem,
+		),
+		title: (
+			font-size: 0.875rem,
+		),
+		collapse-icon: (
+			top: 0.6875rem,
+		),
 	),
 	$panel-group-sm
 );
@@ -156,11 +166,15 @@ $panel-secondary: () !default;
 $panel-secondary: map-deep-merge(
 	(
 		border-color: rgba($black, 0.125),
-		header-bg: $gray-100,
-		header-border-color: rgba($black, 0.125),
-		header-link: $panel-secondary-header-link,
-		footer-bg: $gray-100,
-		footer-border-color: rgba($black, 0.125),
+		header: (
+			background-color: $gray-100,
+			border-color: rgba($black, 0.125),
+			link: $panel-secondary-header-link,
+		),
+		footer: (
+			background-color: $gray-100,
+			border-color: rgba($black, 0.125),
+		),
 	),
 	$panel-secondary
 );
@@ -182,11 +196,11 @@ $panel-unstyled: map-deep-merge(
 			border-style: solid,
 			border-width: 0 0 1px 0,
 			padding-left: 0,
+			collapsed: (
+				border-color: $gray-500,
+			),
+			link: $panel-unstyled-header-link,
 		),
-		header-collapsed: (
-			border-color: $gray-500,
-		),
-		header-link: $panel-unstyled-header-link,
 		collapse-icon: (
 			right: 0,
 		),