feat(shs-6045): implement vertical buttons card with long text

SU-HSDO · Feb 18, 2025 · 7024dee · 7024dee
1 parent 2837b69
commit 7024dee
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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
@@ -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);
+  }
+}