@digdir/designsystemet-css/dist/src/details.css

CSS for Designsystemet

.ds-details{--dsc-details-border-block-wdith:var(
    --ds-border-width-default
  );--dsc-details-border-block-width:var(--dsc-details-border-block-wdith);--dsc-details-border-block-style:solid;--dsc-details-border-color:var(--ds-color-border-subtle);--dsc-details-icon-gap:var(--ds-size-2);--dsc-details-icon-size:var(--ds-size-6);--dsc-details-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");--dsc-details-padding:var(--ds-size-2) var(--ds-size-4);--dsc-details-size:var(--ds-size-14);--dsc-details-background:var(--ds-color-surface-default);--dsc-details-summary-color:var(--ds-color-text-default);--dsc-details-summary-background--hover:var(--ds-color-surface-tinted);--dsc-details-summary-background--open:var(--ds-color-surface-tinted);--dsc-details-summary-background:var(--ds-color-surface-default);background:var(--dsc-details-background);border-block-style:var(--dsc-details-border-block-style);border-block-width:var(--dsc-details-border-block-width);border-color:var(--dsc-details-border-color);box-sizing:border-box}.ds-details+.ds-details{border-top:0;margin-top:0}.ds-details[data-variant=default]{--dsc-details-background:var(--ds-color-surface-default);--dsc-details-summary-background--hover:var(--ds-color-surface-tinted);--dsc-details-summary-background--open:var(--ds-color-surface-tinted);--dsc-details-summary-background:var(--ds-color-surface-default)}.ds-card[data-variant=tinted] .ds-details,.ds-details[data-variant=tinted]{--dsc-details-background:var(--ds-color-surface-tinted);--dsc-details-summary-background--hover:var(--ds-color-surface-hover);--dsc-details-summary-background--open:var(--ds-color-surface-hover);--dsc-details-summary-background:var(--ds-color-surface-tinted);--dsc-details-border-color:var(--ds-color-border-subtle)}.ds-details>summary::-webkit-details-marker{display:none}.ds-details>:is(summary,u-summary){align-items:center;background:var(--dsc-details-summary-background);box-sizing:border-box;color:var(--dsc-details-summary-color);cursor:pointer;gap:var(--dsc-details-icon-gap);list-style:none;min-height:var(--dsc-details-size);outline:none;padding:var(--dsc-details-padding);position:relative}:is(.ds-details>:is(summary,u-summary)):not([hidden]){display:flex}:is(.ds-details>:is(summary,u-summary)):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-inset));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, var(--ds-border-width-focus))*-1)}:is(.ds-details>:is(summary,u-summary)):focus-visible *{--_ds--focus: }:is(.ds-details>:is(summary,u-summary)){-webkit-print-color-adjust:exact;print-color-adjust:exact}:is(.ds-details>:is(summary,u-summary)):before{all:unset;background:currentcolor;border-radius:var(--ds-border-radius-md);content:"";flex-shrink:0;height:var(--dsc-details-icon-size);-webkit-mask:50%/contain no-repeat var(--dsc-details-icon-url);mask:50%/contain no-repeat var(--dsc-details-icon-url);width:var(--dsc-details-icon-size)}@media (forced-colors:active){.ds-details>:is(summary,u-summary){color:ButtonText}:is(.ds-details>:is(summary,u-summary)):before{background:ButtonText}}.ds-details[open]>:is(summary,u-summary){background:var(--dsc-details-summary-background--open)}:is(.ds-details[open]>:is(summary,u-summary)):before{rotate:180deg}@media (hover:hover) and (pointer:fine){.ds-details :is(summary,u-summary):hover{background:var(--dsc-details-summary-background--hover)}}@media (prefers-reduced-motion:no-preference){.ds-details{interpolate-size:allow-keywords}}.ds-details::part(details-content){block-size:0;overflow-y:hidden;transition:content-visibility allow-discrete .4s,height .4s}.ds-details[open]::part(details-content){height:auto}:where(.ds-details>:not(summary,u-summary)){border-radius:inherit;margin-inline:var(--ds-size-5,1rem)}:where(.ds-details>:not(summary,u-summary)):nth-child(2){margin-block-start:var(--ds-size-5,1rem)}:where(.ds-details>:not(summary,u-summary)):last-child{margin-block-end:var(--ds-size-5,1rem)}