diff --git a/.changeset/nice-tools-pay.md b/.changeset/nice-tools-pay.md new file mode 100644 index 0000000000..0d9e0745c8 --- /dev/null +++ b/.changeset/nice-tools-pay.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-css": patch +--- + +ExpansionCard: Divider mellom header og innhold diff --git a/@navikt/core/css/expansioncard.css b/@navikt/core/css/expansioncard.css index c252233ff6..cde560ae50 100644 --- a/@navikt/core/css/expansioncard.css +++ b/@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,7 +32,7 @@ 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; @@ -38,8 +40,9 @@ 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; }