@dnb/eufemia/cjs/components/list/style/dnb-list.css

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.dnb-list--variant-basic {
  --item-padding: 1rem;
  --item-height: 4rem;
  --item-rounded-corner: 1.5rem;
  --item-row-gap: 0.5rem;
  --item-chevron-margin: 1rem;
  --item-chevron-height: 1.5rem;
  --item-outline-width: 0.0625rem;
  --item-outline-color: var(--color-black-8);
  --item-navigation-color: var(--color-sea-green);
  --item-navigation-color--active: var(--color-emerald-green);
  --item-icon-color: var(--item-navigation-color);
  --item-pending-color: var(--color-black-3);
  --item-background-color: var(--color-white);
  --item-selected-background-color: var(
    --internal-color-background-selected-subtle,
    var(--item-background-color)
  );
  border-radius: var(--item-rounded-corner);
}
.dnb-list__item {
  position: relative;
  z-index: 1;
  row-gap: 0;
}
.dnb-list__item::after {
  content: "";
  position: absolute;
  top: calc(var(--item-outline-width) * -1);
  right: calc(var(--item-outline-width) * -1);
  bottom: calc(var(--item-outline-width) * -1);
  left: calc(var(--item-outline-width) * -1);
  left: 0;
  right: 0;
  z-index: 10;
  border-radius: inherit;
  pointer-events: none;
  border: var(--item-outline-width) solid var(--item-outline-color);
}
.dnb-list__item {
  --item-grid-template-columns: auto auto auto minmax(0, 1fr)
    minmax(0, 1fr) auto auto;
  --item-grid-template-areas: 'chevron-left start icon title center end chevron-right'
    'footer footer footer footer footer footer footer';
}
@media screen and (max-width: 40em) {
  .dnb-list__item {
    --item-grid-template-areas: 'chevron-left start icon title center chevron-right'
      'chevron-left end end end end chevron-right'
      'footer footer footer footer footer footer';
  }
  .dnb-list__item:has(.dnb-list__item__start):has(.dnb-list__item__title), .dnb-list__item:has(.dnb-list__item__icon) {
    --item-grid-template-areas: 'chevron-left start icon title center chevron-right'
      'chevron-left . . end end .'
      'footer footer footer footer footer footer';
  }
}
@media screen and (max-width: 25em) {
  .dnb-list__item {
    --item-grid-template-areas: 'chevron-left start icon title title chevron-right'
      'chevron-left center center center center chevron-right'
      'chevron-left end end end end chevron-right'
      'footer footer footer footer footer footer';
  }
  .dnb-list__item:has(.dnb-list__item__start):has(.dnb-list__item__title), .dnb-list__item:has(.dnb-list__item__icon) {
    --item-grid-template-areas: 'chevron-left start icon title title chevron-right'
      'chevron-left . . center center .' 'chevron-left . . end end .'
      'footer footer footer footer footer footer';
  }
}
.dnb-list__item:not(:has(.dnb-list__item__center)) {
  --item-grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
}
.dnb-list__item, .dnb-list__item__accordion__header {
  display: grid;
  grid-template: var(--item-grid-template-areas)/var(--item-grid-template-columns);
  place-content: center;
  align-items: center;
  min-height: var(--item-height);
  padding: calc(var(--item-padding)) 0;
}
@media screen and (min-width: 40.00625em) {
  .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__center, .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__end {
    place-self: end;
  }
}
.dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__icon, .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__chevron {
  place-self: end;
}
@media screen and (min-width: 40.00625em) {
  .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__center, .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__end {
    place-self: start;
  }
}
.dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__title, .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__icon, .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__chevron {
  place-self: start;
}
.dnb-list__item:has(.dnb-list__item__footer), .dnb-list__item:has(.dnb-list__item__footer) .dnb-list__item__accordion__header {
  padding-bottom: 0;
}
@media screen and (max-width: 40em) {
  .dnb-list__item:not(.dnb-list__item__accordion):has(.dnb-list__item__center), .dnb-list__item:not(.dnb-list__item__accordion):has(.dnb-list__item__end), .dnb-list__item__accordion__header:has(.dnb-list__item__center), .dnb-list__item__accordion__header:has(.dnb-list__item__end) {
    row-gap: var(--item-row-gap);
  }
}
.dnb-list__item {
  border-radius: 0;
}
.dnb-list__item:first-of-type {
  border-top-left-radius: var(--item-rounded-corner);
  border-top-right-radius: var(--item-rounded-corner);
}
.dnb-list__item:last-of-type {
  border-bottom-left-radius: var(--item-rounded-corner);
  border-bottom-right-radius: var(--item-rounded-corner);
}
.dnb-list--separated .dnb-list__item {
  border-radius: var(--item-rounded-corner);
}
.dnb-list__item {
  background-color: var(--item-background-color);
}
.dnb-list__item--selected {
  background-color: var(--item-selected-background-color);
}
.dnb-list__item__title, .dnb-list__item__icon, .dnb-list__item__start, .dnb-list__item__center, .dnb-list__item__end, .dnb-list__item__overline, .dnb-list__item__subline, .dnb-list__item__footer-separator, .dnb-list__item__footer {
  display: flex;
  align-items: center;
  z-index: 10;
}
@media screen and (min-width: 40.00625em) {
  .dnb-list__item__end .dnb-list__item__subline {
    place-self: end;
  }
}
.dnb-list__item__title {
  grid-area: title;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}
.dnb-list__item__icon {
  grid-area: icon;
}
.dnb-list__item__start {
  grid-area: start;
}
.dnb-list__item__center {
  grid-area: center;
}
.dnb-list__item__end {
  flex-direction: column;
  grid-area: end;
  justify-self: start;
  align-items: flex-end;
}
@media screen and (max-width: 40em) {
  .dnb-list__item__end {
    align-items: flex-start;
  }
}
.dnb-list__item__footer-separator {
  grid-area: footer;
  margin-top: var(--item-padding);
  place-self: flex-start;
}
.dnb-list__item__footer-separator.dnb-space__top--zero {
  margin-top: var(--item-padding);
}
.dnb-list__item__footer {
  grid-area: footer;
  margin-top: var(--item-padding);
  padding: var(--item-padding);
}
.dnb-list__item:last-of-type:not(.dnb-list__item__accordion--open) .dnb-list__item__footer {
  border-bottom-left-radius: var(--item-rounded-corner);
  border-bottom-right-radius: var(--item-rounded-corner);
}
.dnb-list__item__subline--description {
  color: var(--color-black-55);
}
.dnb-list__item__action--href a .dnb-anchor__launch-icon, .dnb-list__item__chevron {
  display: flex;
  align-items: center;
  grid-area: chevron-right;
  height: var(--item-chevron-height);
  margin-right: var(--item-chevron-margin);
}
.dnb-list__item--chevron-left .dnb-list__item__action--href a .dnb-anchor__launch-icon, .dnb-list__item--chevron-left .dnb-list__item__chevron {
  grid-area: chevron-left;
  margin-right: 0;
  margin-left: var(--item-chevron-margin);
}
.dnb-list__item .dnb-checkbox .dnb-form-label,
.dnb-list__item .dnb-radio .dnb-radio__order .dnb-form-label {
  padding-left: var(--item-padding);
}
@media screen and (max-width: 40em) {
  .dnb-list__item:has(.dnb-form-label) .dnb-list__item__end {
    display: flex;
    margin-left: calc(var(--item-padding) * 2 + 0.5rem);
  }
}
.dnb-list__item--selection:has(.dnb-checkbox__input), .dnb-list__item--selection:has(.dnb-radio__input) {
  overflow: clip;
  overflow-clip-margin: var(--item-outline-width);
}
.dnb-list__item--selection .dnb-checkbox__input {
  --checkbox-bounding--medium: 100;
}
.dnb-list__item--selection .dnb-radio__input {
  --radio-bounding--medium: 100;
}
.dnb-list__item:has(.dnb-anchor__launch-icon) .dnb-list__item__chevron {
  display: none;
}
.dnb-list__item__chevron:where(.dnb-list__item__accordion .dnb-list__item__chevron) .dnb-icon {
  transition: transform 400ms var(--easing-default);
  transform: rotate(90deg);
}
.dnb-list__item__chevron:where(.dnb-list__item__accordion--open .dnb-list__item__chevron) .dnb-icon {
  transform: rotate(270deg);
}
.dnb-list__item__action {
  cursor: pointer;
  outline: none;
}
.dnb-list__item__action .dnb-icon {
  color: var(--item-icon-color);
}
.dnb-list__item__action--href a {
  display: grid;
  grid-template: var(--item-grid-template-areas)/var(--item-grid-template-columns);
  grid-column: 1/-1;
  grid-row: 1/-1;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}
.dnb-list__item__action:not(.dnb-list__item--disabled):hover, .dnb-list__item__action:not(.dnb-list__item--disabled):focus-visible {
  --item-outline-color: var(--item-navigation-color);
  --item-outline-width: 0.125rem;
  z-index: 2;
}
.dnb-list__item__action:not(.dnb-list__item--disabled):active {
  --item-outline-color: var(--item-navigation-color--active);
  --item-icon-color: var(--item-navigation-color--active);
  --item-outline-width: 0.0625rem;
  z-index: 2;
}
.dnb-list__item:not(.dnb-list__item--disabled):has(.dnb-list__item__accordion__header:hover), .dnb-list__item:not(.dnb-list__item--disabled):has(.dnb-list__item__accordion__header:focus-visible) {
  --item-outline-color: var(--item-navigation-color);
  --item-outline-width: 0.125rem;
  z-index: 2;
}
.dnb-list__item:not(.dnb-list__item--disabled):has(.dnb-list__item__accordion__header:active) {
  --item-outline-color: var(--item-navigation-color--active);
  --item-icon-color: var(--item-navigation-color--active);
  --item-outline-width: 0.0625rem;
  z-index: 2;
}
.dnb-list__item__accordion {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.dnb-list__item__accordion .dnb-hr::after {
  left: var(--item-outline-width);
  right: var(--item-outline-width);
}
.dnb-list__item__accordion__header {
  position: relative;
  cursor: pointer;
  outline: none;
}
.dnb-list__item__accordion__header .dnb-icon {
  color: var(--item-icon-color);
}
.dnb-list__item__accordion__content {
  display: flex;
  flex-direction: column;
}
.dnb-list__item.dnb-skeleton .dnb-icon {
  color: var(--skeleton-color);
}
.dnb-list__item--pending {
  pointer-events: none;
  overflow: clip;
}
.dnb-list__item--disabled {
  cursor: not-allowed;
  color: var(--color-black-20);
  --item-navigation-color: var(--color-sea-green-30);
  --item-navigation-color--active: var(--color-sea-green-30);
  --item-icon-color: var(--color-sea-green-30);
  --item-outline-color: var(--color-black-8);
}
.dnb-list__item--disabled .dnb-list__item__accordion__header {
  cursor: not-allowed;
}
.dnb-list__item--disabled a {
  cursor: not-allowed;
}
.dnb-list__item__action--href a:visited {
  color: inherit;
}
.dnb-list__item__pending {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(-45deg, var(--item-pending-color) 1px 2px, transparent 0 6px);
}
.dnb-list__container {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dnb-list--inset-outline .dnb-list__container .dnb-list__item::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  bottom: calc(var(--item-outline-width) * -1);
}
.dnb-list--inset-outline .dnb-list__container .dnb-list__item:last-of-type::after {
  bottom: 0;
}
.dnb-card .dnb-list__container .dnb-list__item:first-of-type, .dnb-card .dnb-list__container .dnb-list__item:last-of-type {
  border-radius: 0;
}
.dnb-card .dnb-list__container .dnb-list__item:not(:hover):not(:focus-visible)::after, .dnb-card .dnb-list__container .dnb-list__item:not(.dnb-list__item__action):not(.dnb-list__item__accordion)::after {
  border-right: none;
  border-left: none;
}
.dnb-card .dnb-list__container .dnb-list__item:not(:hover):not(:focus-visible):first-of-type::after, .dnb-card .dnb-list__container .dnb-list__item:not(.dnb-list__item__action):not(.dnb-list__item__accordion):first-of-type::after {
  border-top: none;
}
.dnb-card .dnb-list__container .dnb-list__item:not(:hover):not(:focus-visible):last-of-type::after, .dnb-card .dnb-list__container .dnb-list__item:not(.dnb-list__item__action):not(.dnb-list__item__accordion):last-of-type::after {
  border-bottom: none;
}
.dnb-scroll-view .dnb-list__container {
  padding-right: calc(var(--scrollbar-track-width) * 2);
}
.dnb-card:has(.dnb-scroll-view .dnb-list__container) {
  padding-right: calc(var(--padding-right) - var(--scrollbar-track-width) * 2);
}