From bdfda7d608a63bf71d3826080ac3a3d3739184bd Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 25 Nov 2024 15:07:50 -0300 Subject: [PATCH 1/7] fix(card-group-item):add aspect-ratio to card wrapper --- packages/styles/scss/components/card-group/_card-group.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 07b5e161088..08e2ef6031e 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -69,6 +69,7 @@ .#{$prefix}--card__wrapper { display: grid; + aspect-ratio: 16 / 9; justify-content: revert; grid-row: span 10; grid-template-rows: subgrid; @@ -140,6 +141,7 @@ ::slotted(:not([slot]):has(#{$prefix}-tag, #{$c4d-prefix}-tag)) { grid-row: -1; } + } :host(#{$c4d-prefix}-card-group-item[href='']) { From 57c72e688be64f1fee80d61e52b161c34ad12622 Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Wed, 27 Nov 2024 09:56:02 -0300 Subject: [PATCH 2/7] fix(card-group): set min height to content --- .../styles/scss/components/card-group/_card-group.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 08e2ef6031e..d74e79f57df 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -69,7 +69,6 @@ .#{$prefix}--card__wrapper { display: grid; - aspect-ratio: 16 / 9; justify-content: revert; grid-row: span 10; grid-template-rows: subgrid; @@ -81,12 +80,12 @@ } .#{$prefix}--card__content { - display: grid; - grid-row: span 10; - grid-template-rows: subgrid; - row-gap: 0; + display: flex; + min-height: 10rem; + } + .#{$prefix}--card__copy { display: grid; grid-row: span 2; From 502748a39cbdfe16a1aac122232dfe7f68014567 Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Wed, 27 Nov 2024 13:41:08 -0300 Subject: [PATCH 3/7] fix(card-group): run yarn format --- packages/styles/scss/components/card-group/_card-group.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index d74e79f57df..7edd4e3b90b 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -81,11 +81,9 @@ .#{$prefix}--card__content { display: flex; - min-height: 10rem; - + min-block-size: 10rem; } - .#{$prefix}--card__copy { display: grid; grid-row: span 2; @@ -140,7 +138,6 @@ ::slotted(:not([slot]):has(#{$prefix}-tag, #{$c4d-prefix}-tag)) { grid-row: -1; } - } :host(#{$c4d-prefix}-card-group-item[href='']) { From 8decd3d51a19d83a4cbe11b5abe3ec417d4152e5 Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 2 Dec 2024 15:47:41 -0300 Subject: [PATCH 4/7] fix(card-group): revert styles --- packages/styles/scss/components/card-group/_card-group.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 7edd4e3b90b..07b5e161088 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -80,8 +80,10 @@ } .#{$prefix}--card__content { - display: flex; - min-block-size: 10rem; + display: grid; + grid-row: span 10; + grid-template-rows: subgrid; + row-gap: 0; } .#{$prefix}--card__copy { From a0761585842f9a1d1bcc9a3334eac9c6651299a1 Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 2 Dec 2024 16:44:56 -0300 Subject: [PATCH 5/7] fix(card-group): NOT WORKING - pseudo Element --- .../scss/components/card-group/_card-group.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 07b5e161088..5151285ee24 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -57,7 +57,15 @@ :host(#{$c4d-prefix}-card-group-item) { display: contents; + .#{prefix}--tile{ + &::before { + display: block; + aspect-ratio: 16 / 9; + content: ''; + grid-area: 1 / 1 / 2 / 2; + } + } .#{$prefix}--card { display: grid; border: 0; @@ -67,12 +75,13 @@ outline: 1px solid $border-tile-01; outline-offset: 0; - .#{$prefix}--card__wrapper { + .#{$prefix}--card__wrapper { display: grid; justify-content: revert; grid-row: span 10; grid-template-rows: subgrid; + grid-area: 1 / 1 / 2 / 2; &::before, &::after { content: revert; From 97bc322d6557e480c628a7451635eb1cc008bc3a Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Mon, 2 Dec 2024 16:22:55 -0500 Subject: [PATCH 6/7] fix(card-group-item): ensure minimum 16/9 aspect ratio --- .../components/card-group/_card-group.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 5151285ee24..e511c28d996 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -57,15 +57,7 @@ :host(#{$c4d-prefix}-card-group-item) { display: contents; - .#{prefix}--tile{ - &::before { - display: block; - aspect-ratio: 16 / 9; - content: ''; - grid-area: 1 / 1 / 2 / 2; - } - } .#{$prefix}--card { display: grid; border: 0; @@ -81,16 +73,22 @@ grid-row: span 10; grid-template-rows: subgrid; - grid-area: 1 / 1 / 2 / 2; &::before, &::after { content: revert; } + + &::after { + content: ''; + display: block; + grid-area: 1 / 1 / -1 / -1; + aspect-ratio: 16 / 9; + } } .#{$prefix}--card__content { display: grid; - grid-row: span 10; + grid-area: 1 / 1 / -1 / -1; grid-template-rows: subgrid; row-gap: 0; } From 38ca45ead0646502337a738f085ed359ee792f43 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Mon, 2 Dec 2024 16:23:31 -0500 Subject: [PATCH 7/7] fix(card-group): yarn format --- packages/styles/scss/components/card-group/_card-group.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index e511c28d996..4097a15cfad 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -67,7 +67,7 @@ outline: 1px solid $border-tile-01; outline-offset: 0; - .#{$prefix}--card__wrapper { + .#{$prefix}--card__wrapper { display: grid; justify-content: revert; grid-row: span 10; @@ -79,10 +79,10 @@ } &::after { - content: ''; display: block; - grid-area: 1 / 1 / -1 / -1; aspect-ratio: 16 / 9; + content: ''; + grid-area: 1 / 1 / -1 / -1; } }