@oslokommune/punkt-css/dist/css/components/accordion.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/*
 * Accordion/Expandable component
 */
pkt-accordion,
pkt-accordion-item {
  display: block;
}

pkt-accordion,
pkt-accordion-item {
  display: block;
}

.pkt-accordion,
pkt-accordion::part(container) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr;
  row-gap: 0.5rem;
  transition: grid-template-rows 500ms;
}
.pkt-accordion:focus-visible,
pkt-accordion::part(container):focus-visible {
  border: 0.25rem solid var(--pkt-color-border-states-hover);
}

.pkt-accordion--borderless .pkt-accordion-item,
pkt-accordion[skin=borderless] .pkt-accordion-item {
  color: var(--pkt-color-text-body-default);
  border: none;
  background-color: var(--pkt-color-background-default);
}
.pkt-accordion--borderless .pkt-accordion-item[open] > .pkt-accordion-item__title,
pkt-accordion[skin=borderless] .pkt-accordion-item[open] > .pkt-accordion-item__title {
  box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
}

.pkt-accordion--outlined .pkt-accordion-item,
pkt-accordion[skin=outlined] .pkt-accordion-item {
  color: var(--pkt-color-text-body-default);
  border: 2px solid var(--pkt-color-border-subtle);
  background-color: var(--pkt-color-background-default);
}

pkt-accordion[skin=beige]::part(container),
pkt-accordion[skin=blue]::part(container) {
  row-gap: 0;
}

.pkt-accordion--beige,
pkt-accordion[skin=beige] {
  row-gap: 0;
}
.pkt-accordion--beige > .pkt-accordion-item:nth-of-type(odd),
.pkt-accordion--beige pkt-accordion-item:nth-of-type(odd) > .pkt-accordion-item,
pkt-accordion[skin=beige] > .pkt-accordion-item:nth-of-type(odd),
pkt-accordion[skin=beige] pkt-accordion-item:nth-of-type(odd) > .pkt-accordion-item {
  background-color: var(--pkt-color-surface-default-light-beige);
}

.pkt-accordion--blue,
pkt-accordion[skin=blue] {
  row-gap: 0;
}
.pkt-accordion--blue > .pkt-accordion-item:nth-of-type(odd),
.pkt-accordion--blue pkt-accordion-item:nth-of-type(odd) > .pkt-accordion-item,
pkt-accordion[skin=blue] > .pkt-accordion-item:nth-of-type(odd),
pkt-accordion[skin=blue] pkt-accordion-item:nth-of-type(odd) > .pkt-accordion-item {
  background-color: var(--pkt-color-surface-subtle-pale-blue);
}

.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item,
.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--compact.pkt-accordion-item--borderless,
pkt-accordion[compact][skin=borderless] .pkt-accordion-item,
pkt-accordion[compact][skin=borderless] .pkt-accordion-item--compact.pkt-accordion-item--borderless {
  border: none;
}
.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--open > .pkt-accordion-item__title,
.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--compact.pkt-accordion-item--borderless--open > .pkt-accordion-item__title,
pkt-accordion[compact][skin=borderless] .pkt-accordion-item--open > .pkt-accordion-item__title,
pkt-accordion[compact][skin=borderless] .pkt-accordion-item--compact.pkt-accordion-item--borderless--open > .pkt-accordion-item__title {
  box-shadow: inset 0 0 0 0.125rem var(--pkt-color-border-states-active);
}

.pkt-accordion--compact .pkt-accordion-item .pkt-accordion-item__title,
.pkt-accordion--compact pkt-accordion-item > .pkt-accordion-item .pkt-accordion-item__title,
pkt-accordion[compact] .pkt-accordion-item .pkt-accordion-item__title,
pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-item__title {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 1rem;
}
.pkt-accordion--compact .pkt-accordion-item .pkt-accordion-item__content,
.pkt-accordion--compact pkt-accordion-item > .pkt-accordion-item .pkt-accordion-item__content,
pkt-accordion[compact] .pkt-accordion-item .pkt-accordion-item__content,
pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-item__content {
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 1rem;
}

.pkt-accordion-item {
  color: var(--pkt-color-brand-dark-blue-1000);
  background-color: var(--pkt-color-brand-neutrals-white);
  transition: transform 0.3s;
  appearance: none;
  text-align: left;
  position: relative;
}
@supports (interpolate-size: allow-keywords) {
  .pkt-accordion-item::details-content {
    transition: height 0.3s ease, content-visibility 0.3s ease;
    transition-behavior: allow-discrete;
    height: 0;
    overflow: clip;
  }
}
.pkt-accordion-item summary::-webkit-details-marker {
  display: none;
}
.pkt-accordion-item__title {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.25rem;
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
}
.pkt-accordion-item__title .pkt-accordion-item__icon {
  --fg-color: var(--pkt-color-text-body-default);
  transition: transform 0.2s;
}
.pkt-accordion-item__title:hover {
  text-decoration: underline;
}
.pkt-accordion-item__title:hover .pkt-accordion-item__icon {
  transform: translateY(0.25rem);
}
.pkt-accordion-item__title:focus-visible {
  outline: 0.25rem solid var(--pkt-color-border-states-focus);
}
.pkt-accordion-item__content {
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.75rem;
  padding: 1.5rem;
  border-top: none;
}
.pkt-accordion-item--borderless,
.pkt-accordion-item pkt-accordion-item[skin=borderless] {
  border: none;
}
.pkt-accordion-item--borderless[open] > .pkt-accordion-item__title,
.pkt-accordion-item pkt-accordion-item[skin=borderless][open] > .pkt-accordion-item__title {
  box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
}
.pkt-accordion-item--outlined,
.pkt-accordion-item pkt-accordion-item[skin=outlined] {
  border: 2px solid var(--pkt-color-border-subtle);
}
.pkt-accordion-item--beige,
.pkt-accordion-item pkt-accordion-item[skin=beige] {
  background-color: var(--pkt-color-surface-default-light-beige);
}
.pkt-accordion-item--blue,
.pkt-accordion-item pkt-accordion-item[skin=blue] {
  background-color: var(--pkt-color-surface-subtle-pale-blue);
}

.pkt-accordion-item--compact > .pkt-accordion-item__title {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 1rem;
}
.pkt-accordion-item--compact > .pkt-accordion-item__content {
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 1rem;
}

@supports (interpolate-size: allow-keywords) {
  .pkt-accordion-item[open]::details-content {
    height: auto;
  }
  @starting-style {
    .pkt-accordion-item[open]::details-content {
      height: 0;
    }
  }
}
.pkt-accordion-item[open] > .pkt-accordion-item__title {
  border-bottom: none;
}
.pkt-accordion-item[open] > .pkt-accordion-item__title:hover > .pkt-accordion-item__icon {
  transform: rotate(180deg) translateY(0.25rem);
}
.pkt-accordion-item[open] > .pkt-accordion-item__title > .pkt-accordion-item__icon {
  transform: rotate(180deg) translateY(0);
}

.pkt-icon.pkt-accordion-item__icon svg {
  min-height: 2rem;
  min-width: 2rem;
}