ExpansionCard divider (#2566)

* ♻️ Bruker tokens internt for padding, lagt til divider

* 🎨 transition on opacity

* 📝 Changeset

.changeset/nice-tools-pay.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+ExpansionCard: Divider mellom header og innhold

@navikt/core/css/expansioncard.css

@@ -2,6 +2,8 @@
   --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
   --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
   --__ac-expansioncard-border-width: 1px;
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
 
   border-radius: var(--__ac-expansioncard-border-radius);
   background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
@@ -30,16 +32,17 @@
   width: 100%;
   display: flex;
   gap: var(--a-spacing-4);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
   border-radius: var(--__ac-expansioncard-border-radius);
   background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
   position: relative;
   border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
   justify-content: space-between;
 }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) {
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+.navds-expansioncard--small {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
 }
 
 .navds-expansioncard__header:hover {
@@ -61,6 +64,22 @@
     0 -1px 0 0 var(--__ac-expansioncard-border-color);
 }
 
+.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
+  content: "";
+  background-color: var(--a-border-divider);
+  bottom: 0;
+  left: var(--__ac-expansioncard-padding-inline);
+  height: 1px;
+  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
+  opacity: 0;
+}
+
 /*************************
  * Header/Typography *
  *************************/
@@ -156,17 +175,16 @@
  * Content *
  *************************/
 .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+
   border-end-end-radius: var(--__ac-expansioncard-border-radius);
   border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
+    var(--__ac-expansioncard-padding-inline);
   border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
   border-top: none;
 }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__content) {
-  padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
-}
-
 .navds-expansioncard__content--closed {
   display: none;
 }