Improve spacing when the card has an icon with no image.

web-illinois · Sep 12, 2024 · c4194a8 · c4194a8
1 parent 2900656
commit c4194a8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/ilw-card.js b/src/ilw-card.js
@@ -12,6 +12,7 @@ class Card extends LitElement {
             align: {},
             aspectRatio: {},
             _hasGraphic: { state: true, type: Boolean },
+            _iconOnly: { state: true, type: Boolean },
         };
     }
 
@@ -26,6 +27,7 @@ class Card extends LitElement {
         this.aspectRatio = "";
         this.clickable = false;
         this._hasGraphic = false;
+        this._iconOnly = false;
 
         this._click = (ev) => {
             /**
@@ -54,6 +56,7 @@ class Card extends LitElement {
         }
         const icons = this.shadowRoot.querySelector("slot[name=icon]");
         if (icons.assignedElements().length > 0) {
+            this._iconOnly = true;
             this._hasGraphic = true;
             return;
         }
@@ -66,6 +69,7 @@ class Card extends LitElement {
             // Only add the force-ratio class if we are in fact forcing an aspect ratio
             "force-ratio": !!this.aspectRatio,
             graphic: this._hasGraphic,
+            "icon-only": this._iconOnly
         };
         const styles = {
             "--ilw-card--aspect-ratio": this.aspectRatio

diff --git a/src/ilw-card.styles.css b/src/ilw-card.styles.css
@@ -265,7 +265,7 @@ article {
 
 .card-icon {
     position: absolute;
-    top: var(--ilw-card--content-padding-top);
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;
@@ -300,6 +300,10 @@ article {
     flex: 1;
 }
 
+.icon-only .card-content {
+    padding-top: 0;
+}
+
 .card-footer {
     padding: 0 var(--ilw-card--content-padding-right) var(--ilw-card--content-padding-bottom) var(--ilw-card--content-padding-left);
 }