diff --git a/config/default/field.field.paragraph.hs_collection.field_hs_collection_per_row.yml b/config/default/field.field.paragraph.hs_collection.field_hs_collection_per_row.yml index 051c409553..2609bebc40 100644 --- a/config/default/field.field.paragraph.hs_collection.field_hs_collection_per_row.yml +++ b/config/default/field.field.paragraph.hs_collection.field_hs_collection_per_row.yml @@ -12,7 +12,7 @@ field_name: field_hs_collection_per_row entity_type: paragraph bundle: hs_collection label: 'Items Per Row' -description: '' +description: 'For best results, only use "4 Per Row" with short content or if there''s no sidebar.' required: true translatable: false default_value: diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-linked-card.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-linked-card.scss index b4ad384b90..c8ed971ee5 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-linked-card.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-linked-card.scss @@ -69,6 +69,11 @@ margin: 0 hb-calculate-rems(20px) 0 hb-calculate-rems(-31px); background-color: var(--palette--secondary); + // Update padding when card is in 4 columns. + .field-hs-collection-items.item-per-row--4 & { + padding: hb-calculate-rems(18px); + } + @include grid-media-min('sm') { margin: hb-calculate-rems(-24px) hb-calculate-rems(20px) 0 hb-calculate-rems(-31px); @@ -154,6 +159,11 @@ @include hb-themes(('airy', 'colorful')) { padding: hb-calculate-rems(20px) hb-calculate-rems(20px) 0; + + // Update padding when card is in 4 columns. + .field-hs-collection-items.item-per-row--4 & { + padding: hb-calculate-rems(18px) hb-calculate-rems(18px) 0; + } } @include hb-traditional { diff --git a/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss b/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss index b09bdfb0ae..97004797b3 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss @@ -29,6 +29,13 @@ } } } + + // Update spacing when there are 4 columns in well to have a tighter spacing. + &:has(.field-hs-collection-items.item-per-row--4) { + @include hb-colorful { + padding: 0 hb-spacing-width('md'); + } + } } &--well { @@ -81,6 +88,15 @@ display: block; } + // Update spacing between 4 columns to have a tighter spacing. + &.item-per-row--4 { + @include hb-colorful { + @include grid-media-min('sm') { + gap: hb-spacing-width('md'); + } + } + } + @for $i from 2 through $hb-counted-items-count { &.counted-items-#{$i}, &.item-per-row--#{$i} { diff --git a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_raised-cards.scss b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_raised-cards.scss index 88d041e09f..bb4e00a99d 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_raised-cards.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_raised-cards.scss @@ -226,3 +226,10 @@ } } } + +// Update padding when card is in 4 columns. +.hb-raised-cards .field-hs-collection-items.item-per-row--4 .hb-card .hb-card__content { + @include hb-colorful { + padding: hb-calculate-rems(18px); + } +}