style: adjust mobile padding for footer bands (#755)

* style: adjust mobile padding for footer bands * chore: update tokens package
cds-snc · Feb 20, 2025 · 890c216 · 890c216
1 parent a73433c
commit 890c216
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -45,7 +45,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^2.5.0",
+    "@cdssnc/gcds-tokens": "^2.6.0",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",

diff --git a/packages/web/src/components/gcds-footer/gcds-footer.css b/packages/web/src/components/gcds-footer/gcds-footer.css
@@ -31,7 +31,7 @@
     .gcds-footer__contextual,
     .gcds-footer__main,
     .gcds-footer__sub {
-      padding: var(--gcds-footer-band-padding);
+      padding: var(--gcds-footer-band-padding-desktop);
     }
 
     .sub__header,
@@ -156,6 +156,17 @@
 }
 
 @layer compact {
+  /* Mobile specific style */
+  @media only screen and (width < 45em) {
+    :host {
+      .gcds-footer__contextual,
+      .gcds-footer__main,
+      .gcds-footer__sub {
+        padding: var(--gcds-footer-band-padding-mobile);
+      }
+    }
+  }
+
   @container sub (width <= 30em) {
     :host .gcds-footer__sub .sub__container {
       slot[name='wordmark'],