style: improve print design for details component (#711)

* style: improve print design for details component * style: improve print design for details component
cds-snc · Dec 17, 2024 · e68a3bf · e68a3bf
1 parent ab1c12b
commit e68a3bf
Show file tree

Hide file tree

Showing 3 changed files with 29 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.0.2",
+    "@cdssnc/gcds-tokens": "^2.0.3",
     "@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-details/gcds-details.css b/packages/web/src/components/gcds-details/gcds-details.css
@@ -1,4 +1,4 @@
-@layer reset, default, hover, focus;
+@layer reset, default, hover, focus, print;
 
 @layer reset {
   :host {
@@ -151,3 +151,26 @@
     text-decoration: none;
   }
 }
+
+@layer print {
+  /* Display details component open by default for print */
+  @media print {
+    :host .gcds-details {
+      .details__summary{
+        font-weight: var(--gcds-details-print-summary-font-weight);
+        text-decoration: none;
+        color: var(--gcds-details-print-summary-text);
+
+        &:before {
+          transform: rotate(90deg);
+        }
+      }
+
+      .details__panel {
+        display: block;
+        /* Note: Logical properties are not yet supported in print */
+        border-left: var(--gcds-details-panel-border-width) solid var(--gcds-details-panel-border-color);
+      }
+    }
+  }
+}