@navikt/ds-css 7.8.0 → 7.9.0

package/dist/darkside/component/expansioncard.css

@@ -0,0 +1,167 @@
+@layer aksel.components {
+  .navds-expansioncard {
+    --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge)  - 1px);
+    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+    --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
+    border-radius: var(--ax-border-radius-xlarge);
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-default);
+    height: fit-content;
+  }
+
+  .navds-expansioncard:has(.navds-expansioncard__header:hover) {
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
+  }
+
+  .navds-expansioncard--small {
+    --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+    --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  }
+
+  .navds-expansioncard--small > .navds-expansioncard__header .navds-expansioncard__title--small {
+    margin-top: var(--ax-spacing-05);
+  }
+
+  .navds-expansioncard--small :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+    margin-top: 0;
+  }
+
+  .navds-expansioncard--small > .navds-expansioncard__header > .navds-expansioncard__header-button {
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+
+  .navds-expansioncard__header {
+    gap: var(--ax-spacing-4);
+    width: 100%;
+    padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+    border-radius: var(--__axc-expansioncard-border-radius);
+    background-color: rgba(0, 0, 0, 0);
+    justify-content: space-between;
+    display: flex;
+    position: relative;
+  }
+
+  .navds-expansioncard__header:hover {
+    background-color: var(--ax-bg-neutral-raised-hover);
+  }
+
+  .navds-expansioncard__header[data-open="true"] {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .navds-expansioncard__header[data-open="true"]:after {
+    content: "";
+    background-color: var(--ax-border-subtle);
+    bottom: 0;
+    left: var(--__axc-expansioncard-padding-inline);
+    height: 1px;
+    width: calc(100% - 2 * var(--__axc-expansioncard-padding-inline));
+    opacity: 1;
+    position: absolute;
+  }
+
+  .navds-expansioncard__header[data-open="true"]:hover:after {
+    opacity: 0;
+  }
+
+  .navds-expansioncard__title--small {
+    margin-top: .625rem;
+  }
+
+  .navds-expansioncard__title--medium {
+    margin-top: var(--ax-spacing-2);
+  }
+
+  .navds-expansioncard__title--large {
+    margin-top: var(--ax-spacing-1);
+  }
+
+  .navds-expansioncard__header-button {
+    cursor: pointer;
+    border-radius: var(--ax-border-radius-large);
+    background: none;
+    border: none;
+    place-content: center;
+    align-self: flex-start;
+    min-width: 3rem;
+    min-height: 3rem;
+    margin: 0;
+    font-size: 1.5rem;
+    display: grid;
+  }
+
+  .navds-expansioncard__header-button:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  @supports not selector(:focus-visible) {
+    .navds-expansioncard__header-button:focus {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  .navds-expansioncard__header-button:after {
+    z-index: 1;
+    content: "";
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  .navds-expansioncard__header-chevron {
+    transition: transform .25s cubic-bezier(.2, 0, 0, 1);
+  }
+
+  .navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+    transform: rotateX(-180deg);
+  }
+
+  .navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+    transition-duration: .4s;
+  }
+
+  .navds-expansioncard__content {
+    padding-inline: var(--__axc-expansioncard-padding-inline);
+    visibility: hidden;
+    border-end-end-radius: var(--__axc-expansioncard-border-radius);
+    border-end-start-radius: var(--__axc-expansioncard-border-radius);
+    grid-template-rows: 0fr;
+    padding-block: 0;
+    transition-property: visibility, padding-block, grid-template-rows;
+    transition-duration: .25s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
+    display: grid;
+    overflow: hidden;
+  }
+
+  .navds-expansioncard__content[data-open="true"] {
+    visibility: visible;
+    padding-block: var(--__axc-expansioncard-padding-block);
+    grid-template-rows: 1fr;
+  }
+
+  .navds-expansioncard__content[data-open="true"] .navds-expansioncard__content-inner {
+    opacity: 1;
+  }
+
+  .navds-expansioncard__content-inner {
+    opacity: 0;
+    min-height: 0;
+    transition: opacity .25s cubic-bezier(.2, 0, 0, 1);
+  }
+
+  .navds-expansioncard--no-animation :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+    transition: none;
+  }
+}

package/dist/darkside/component/expansioncard.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.navds-expansioncard{--__axc-expansioncard-border-radius:calc(var(--ax-border-radius-xlarge)  - 1px);--__axc-expansioncard-padding-block:var(--ax-spacing-4);--__axc-expansioncard-padding-inline:var(--ax-spacing-5);border-radius:var(--ax-border-radius-xlarge);background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-default);height:fit-content}.navds-expansioncard:has(.navds-expansioncard__header:hover){box-shadow:0 0 0 1px var(--ax-border-strong);border-color:var(--ax-border-strong)}.navds-expansioncard--small{--__axc-expansioncard-padding-inline:var(--ax-spacing-4);--__axc-expansioncard-padding-block:var(--ax-spacing-3)}.navds-expansioncard--small>.navds-expansioncard__header .navds-expansioncard__title--small{margin-top:var(--ax-spacing-05)}.navds-expansioncard--small :is(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard--small>.navds-expansioncard__header>.navds-expansioncard__header-button{min-width:2rem;min-height:2rem}.navds-expansioncard__header{gap:var(--ax-spacing-4);width:100%;padding:var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);border-radius:var(--__axc-expansioncard-border-radius);background-color:rgba(0,0,0,0);justify-content:space-between;display:flex;position:relative}.navds-expansioncard__header:hover{background-color:var(--ax-bg-neutral-raised-hover)}.navds-expansioncard__header[data-open=true]{border-bottom-right-radius:0;border-bottom-left-radius:0}.navds-expansioncard__header[data-open=true]:after{content:"";background-color:var(--ax-border-subtle);bottom:0;left:var(--__axc-expansioncard-padding-inline);height:1px;width:calc(100% - 2 * var(--__axc-expansioncard-padding-inline));opacity:1;position:absolute}.navds-expansioncard__header[data-open=true]:hover:after{opacity:0}.navds-expansioncard__title--small{margin-top:.625rem}.navds-expansioncard__title--medium{margin-top:var(--ax-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--ax-spacing-1)}.navds-expansioncard__header-button{cursor:pointer;border-radius:var(--ax-border-radius-large);background:0 0;border:none;place-content:center;align-self:flex-start;min-width:3rem;min-height:3rem;margin:0;font-size:1.5rem;display:grid}.navds-expansioncard__header-button:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:2px}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{outline:2px solid var(--ax-border-focus);outline-offset:2px}}.navds-expansioncard__header-button:after{z-index:1;content:"";cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.navds-expansioncard__header:hover>.navds-expansioncard__header-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.navds-expansioncard__header-chevron{transition:transform .25s cubic-bezier(.2, 0, 0, 1)}.navds-expansioncard__header[data-open=true] .navds-expansioncard__header-chevron{transform:rotateX(-180deg)}.navds-expansioncard__header[data-open=false] .navds-expansioncard__header-chevron{transition-duration:.4s}.navds-expansioncard__content{padding-inline:var(--__axc-expansioncard-padding-inline);visibility:hidden;border-end-end-radius:var(--__axc-expansioncard-border-radius);border-end-start-radius:var(--__axc-expansioncard-border-radius);grid-template-rows:0fr;padding-block:0;transition-property:visibility,padding-block,grid-template-rows;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.navds-expansioncard__content[data-open=true]{visibility:visible;padding-block:var(--__axc-expansioncard-padding-block);grid-template-rows:1fr}.navds-expansioncard__content[data-open=true] .navds-expansioncard__content-inner{opacity:1}.navds-expansioncard__content-inner{opacity:0;min-height:0;transition:opacity .25s cubic-bezier(.2, 0, 0, 1)}.navds-expansioncard--no-animation :is(.navds-expansioncard__content,.navds-expansioncard__content-inner){transition:none}}