From b8fa7c9df76c3424dbebf241354ef50747c5e8a9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 10 Jul 2024 17:54:08 -0700 Subject: [PATCH 1/2] fix(panel, flow-item): fix footer-padding CSS prop regression --- packages/calcite-components/src/components/panel/panel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index aa1cb3d8309..7996ee4c759 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -182,7 +182,7 @@ @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1; border-block-start: 1px solid var(--calcite-color-border-3); - padding: var(--calcite-spacing-sm); + padding: var(--calcite-panel-footer-padding, var(--calcite-spacing-sm)); column-gap: 0; row-gap: var(--calcite-spacing-md); } From c320eea4d0ff55990edff6cab9b4788eda838bea Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 11 Jul 2024 06:46:29 -0700 Subject: [PATCH 2/2] fix padding specificity --- .../src/components/panel/panel.scss | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 7996ee4c759..0b49bf01950 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -19,12 +19,7 @@ @import "../../assets/styles/header"; :host([scale="s"]) { - .content-top, - .content-bottom, - .footer, - .header-content { - padding: var(--calcite-spacing-sm); - } + --calcite-internal-panel-default-padding: var(--calcite-spacing-sm); .header-content { .heading { @@ -38,12 +33,7 @@ } :host([scale="m"]) { - .content-top, - .content-bottom, - .footer, - .header-content { - padding: var(--calcite-spacing-md); - } + --calcite-internal-panel-default-padding: var(--calcite-spacing-md); .header-content { .heading { @@ -57,12 +47,7 @@ } :host([scale="l"]) { - .content-top, - .content-bottom, - .footer, - .header-content { - padding: var(--calcite-spacing-xl); - } + --calcite-internal-panel-default-padding: var(--calcite-spacing-xl); .header-content { .heading { @@ -79,7 +64,6 @@ .content-bottom { @apply flex items-start self-stretch; - padding: var(--calcite-spacing-md); border-block-start: 1px solid var(--calcite-color-border-3); background-color: var(--calcite-color-foreground-1); } @@ -178,11 +162,17 @@ h-full; } +.content-top, +.content-bottom, +.header-content { + padding: var(--calcite-internal-panel-default-padding); +} + .footer { @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1; border-block-start: 1px solid var(--calcite-color-border-3); - padding: var(--calcite-panel-footer-padding, var(--calcite-spacing-sm)); + padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding)); column-gap: 0; row-gap: var(--calcite-spacing-md); }