@dnb/eufemia/components/accordion/style/dnb-accordion.css

DNB Eufemia Design System UI Library

/*
* Accordion component
*
*/
/*
 * Utilities
 */
.dnb-accordion {
  --accordion-color-text: var(--accordion-color-text--default);
  --accordion-color-description: var(
    --accordion-color-description--default
  );
  --accordion-color-bg: var(--accordion-color-bg--default);
  --accordion-color-border: var(--accordion-color-border--default);
  --accordion-border-width: var(
    --accordion-border-width--default,
    0.0625rem
  );
  --accordion-border-radius: 0.5rem;
  --accordion-easing: var(--easing-default);
  --accordion-border-inset: var(--accordion-border-inset--default, inset);
  --accordion-header-margin-vertical: 1.25rem;
  --accordion-header-margin-vertical--description: 0.75rem;
  --accordion-header-wrapper-margin: 1rem;
  --accordion-header-wrapper-margin--icon-right: 1rem;
  --accordion-header-icon-gutter: 1rem;
  --accordion-header-icon-margin: 1rem;
  --accordion-header-icon-alignment: flex-start;
  --accordion-title-font-weight: var(--font-weight-basis);
  --accordion-title-font-weight--expanded: var(--font-weight-medium);
  --accordion-content-margin: 1rem 0 0 0;
  --accordion-content-padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);
}
.dnb-accordion__header {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  color: var(--accordion-color-text, var(--accordion-color-text--default));
  background-color: var(--accordion-color-bg);
  box-shadow: var(--ui-accordion-box-shadow);
  border: none;
  border-radius: var(--accordion-border-radius);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
  --accordion-color-text: var(--accordion-color-text--hover);
  --accordion-color-description: var(
    --accordion-color-description--hover
  );
  --accordion-color-bg: var(--accordion-color-bg--hover);
  --accordion-color-border: var(--accordion-color-border--hover);
  --accordion-border-width: var(--accordion-border-width--hover);
  --accordion-border-inset: var(--accordion-border-inset--hover);
}
html:not([data-whatintent=touch]) .dnb-accordion__header--after-click:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--after-click:hover:not([disabled]) {
  --accordion-color-text: var(--accordion-color-text--after-click);
  --accordion-color-description: var(
    --accordion-color-description--after-click
  );
  --accordion-color-bg: var(--accordion-color-bg--after-click);
  --accordion-color-border: var(
    --accordion-color-border--after-click
  );
}
.dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
  cursor: not-allowed;
}
.dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]) {
  --accordion-color-text: var(--accordion-color-text--active);
  --accordion-color-description: var(
    --accordion-color-description--active
  );
  --accordion-color-bg: var(--accordion-color-bg--active);
  --accordion-color-border: var(--accordion-color-border--active);
  --accordion-border-width: var(--accordion-border-width--active);
  --accordion-border-inset: var(--accordion-border-inset--active);
}
html:not([data-whatinput=touch]) .dnb-accordion__header:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatinput=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
  --accordion-color-text: var(--accordion-color-text--focus);
  --accordion-color-description: var(
    --accordion-color-description--focus
  );
  --accordion-color-bg: var(--accordion-color-bg--focus);
  --accordion-color-border: var(--accordion-color-border--focus);
  --accordion-border-width: var(--accordion-border-width--focus);
  --accordion-border-inset: var(--accordion-border-inset--focus);
}
.dnb-accordion__header[disabled] {
  --accordion-color-text: var(--accordion-color-text--disabled);
  --accordion-color-bg: var(--accordion-color-bg--disabled);
  --accordion-color-border: var(--accordion-color-border--disabled);
  --accordion-color-description: var(
    --accordion-color-description--disabled
  );
}
.dnb-accordion__header * {
  pointer-events: none;
}
.dnb-accordion__header--prevent-click {
  pointer-events: none;
}
.dnb-accordion__header__wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
}
.dnb-accordion__header--description .dnb-accordion__header__wrapper {
  margin-top: var(--accordion-header-margin-vertical--description);
  margin-bottom: var(--accordion-header-margin-vertical--description);
}
.dnb-accordion__header__container {
  margin: 0 1rem;
}
.dnb-accordion__header__icon {
  align-self: var(--accordion-header-icon-alignment);
  margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  transition: transform 400ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-accordion__header__icon {
    transition-duration: 0.01ms;
  }
}
.dnb-accordion__header--description .dnb-accordion__header__icon {
  margin-top: var(--accordion-header-margin-vertical--description);
}
.dnb-accordion__header--icon-right {
  justify-content: space-between;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__icon {
  margin-right: var(--accordion-header-icon-margin);
  margin-left: var(--accordion-header-icon-gutter);
  order: 3;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__container {
  order: 1;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
  order: 2;
  margin-right: 0;
  margin-left: var(--accordion-header-wrapper-margin--icon-right);
}
.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
  margin-right: 0;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
  margin-left: 0;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([disabled]) {
  z-index: 1;
}
.dnb-accordion__header--outlined, .dnb-accordion__header--filled {
  --ui-accordion-box-shadow: var(
      --accordion-border-inset,
      var(--accordion-border-inset--default)
    )
    0 0 0
    var(
      --accordion-border-width,
      var(--accordion-border-width--default)
    )
    var(
      --accordion-color-border,
      var(--accordion-color-border--default)
    );
}
.dnb-accordion__header--expanded {
  --accordion-title-font-weight: var(
    --accordion-title-font-weight--expanded
  );
}
.dnb-accordion__header__title {
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
  font-weight: var(--accordion-title-font-weight);
}
.dnb-accordion__header__description {
  color: var(--accordion-color-description, var(--accordion-color-description--default));
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-basis);
}
.dnb-accordion__header__title + .dnb-accordion__header__description {
  margin-top: 0.25rem;
}
.dnb-accordion__header__description + .dnb-accordion__header__title {
  margin-top: 0.25rem;
}
.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
  transform: rotate(-180deg);
}
.dnb-accordion__content {
  display: flex;
  width: 100%;
  will-change: height;
  transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-accordion__content {
    transition-duration: 0.01ms;
  }
}
.dnb-accordion__content__inner {
  width: 100%;
  margin: var(--accordion-content-margin);
  padding: var(--accordion-content-padding);
}
.dnb-accordion-group--single-container {
  transition: min-height 1s var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-accordion-group--single-container {
    transition-duration: 0.01ms;
  }
}
.dnb-accordion-group--single-container .dnb-accordion {
  position: static;
  max-width: 60rem;
}
@media screen and (min-width: 40.00625em) {
  .dnb-accordion-group--single-container .dnb-accordion__header {
    width: 40%;
  }
  .dnb-accordion-group--single-container .dnb-accordion__content {
    margin-left: 1rem;
    transition: opacity 1s var(--accordion-easing);
  }
}
@media screen and (min-width: 40.00625em) and (prefers-reduced-motion: reduce) {
  .dnb-accordion-group--single-container .dnb-accordion__content {
    transition-duration: 0.01ms;
  }
}
@media screen and (min-width: 40.00625em) {
  .dnb-accordion-group--single-container .dnb-accordion__content__inner {
    margin-top: 0;
  }
}
@media screen and (min-width: 40.00625em) {
  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
    transform: rotate(-90deg);
  }
}
.dnb-accordion-group--single-container .dnb-accordion-group__children {
  max-width: 60rem;
}
@media screen and (min-width: 40.00625em) {
  .dnb-accordion-group--single-container .dnb-accordion-group__children {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 60%;
  }
}
.dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon, html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon {
  transition: none;
}