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

DNB Eufemia Design System UI Library

.dnb-flex-container {
  --gap: 0;
  --horizontal-gap: 0;
  display: flex;
  row-gap: var(--gap);
}
.dnb-flex-container--direction-horizontal {
  flex-direction: row;
  margin-right: calc(var(--horizontal-gap) * -1);
}
.dnb-flex-container--direction-vertical {
  flex-direction: column;
}
.dnb-flex-container--justify-flex-start {
  justify-content: flex-start;
}
.dnb-flex-container--justify-flex-end {
  justify-content: flex-end;
}
.dnb-flex-container--justify-center {
  justify-content: center;
}
.dnb-flex-container--justify-space-between {
  justify-content: space-between;
}
.dnb-flex-container--justify-space-around {
  justify-content: space-around;
}
.dnb-flex-container--justify-space-evenly {
  justify-content: space-evenly;
}
.dnb-flex-container--align-flex-start {
  align-items: flex-start;
}
.dnb-flex-container--align-flex-end {
  align-items: flex-end;
}
.dnb-flex-container--align-center {
  align-items: center;
}
.dnb-flex-container--align-stretch {
  align-items: stretch;
}
.dnb-flex-container--align-baseline {
  align-items: baseline;
}
.dnb-flex-container--align-self-flex-start {
  align-self: flex-start;
}
.dnb-flex-container--align-self-flex-end {
  align-self: flex-end;
}
.dnb-flex-container--align-self-center {
  align-self: center;
}
.dnb-flex-container--align-self-baseline {
  align-self: baseline;
}
.dnb-flex-container--align-self-stretch {
  align-self: stretch;
}
.dnb-flex-container--wrap {
  flex-wrap: wrap;
}
.dnb-flex-container--row-gap-xx-small {
  --gap: var(--spacing-xx-small);
}
.dnb-flex-container--row-gap-x-small {
  --gap: var(--spacing-x-small);
}
.dnb-flex-container--row-gap-small {
  --gap: var(--spacing-small);
}
.dnb-flex-container--row-gap-medium {
  --gap: var(--spacing-medium);
}
.dnb-flex-container--row-gap-large {
  --gap: var(--spacing-large);
}
.dnb-flex-container--row-gap-x-large {
  --gap: var(--spacing-x-large);
}
.dnb-flex-container--row-gap-xx-large {
  --gap: var(--spacing-xx-large);
}
.dnb-flex-container--spacing-xx-small {
  --horizontal-gap: var(--spacing-xx-small);
}
.dnb-flex-container--spacing-x-small {
  --horizontal-gap: var(--spacing-x-small);
}
.dnb-flex-container--spacing-small {
  --horizontal-gap: var(--spacing-small);
}
.dnb-flex-container--spacing-medium {
  --horizontal-gap: var(--spacing-medium);
}
.dnb-flex-container--spacing-large {
  --horizontal-gap: var(--spacing-large);
}
.dnb-flex-container--spacing-x-large {
  --horizontal-gap: var(--spacing-x-large);
}
.dnb-flex-container--spacing-xx-large {
  --horizontal-gap: var(--spacing-xx-large);
}
.dnb-flex-container__hr.dnb-hr {
  width: 100%;
  color: var(--color-black-8);
}

/*
 * Utilities
 */
.dnb-flex-item--grow {
  flex-grow: 1;
}
.dnb-flex-item--shrink {
  flex-shrink: 1;
}
.dnb-flex-item--align-self-flex-start {
  align-self: flex-start;
}
.dnb-flex-item--align-self-flex-end {
  align-self: flex-end;
}
.dnb-flex-item--align-self-center {
  align-self: center;
}
.dnb-flex-item--align-self-baseline {
  align-self: baseline;
}
.dnb-flex-item--align-self-stretch {
  align-self: stretch;
}
.dnb-flex-item--responsive {
  --sizeCount--default: 12;
  --size--default: var(--small);
}
.dnb-flex-container[data-media-key=small] .dnb-flex-item--responsive {
  --size: var(--small, var(--medium));
}
.dnb-flex-container[data-media-key=medium] .dnb-flex-item--responsive {
  --size: var(--medium, var(--large));
}
.dnb-flex-container[data-media-key=large] .dnb-flex-item--responsive {
  --size: var(--large, var(--medium));
}
.dnb-flex-item--responsive {
  --flex-basis: calc(
    100% / var(--sizeCount, var(--sizeCount--default)) *
      var(--size, var(--size--default))
  );
  flex-grow: 0;
  flex-basis: var(--flex-basis);
  max-width: var(--flex-basis);
}

.dnb-flex-stack + .dnb-flex-stack {
  margin-top: var(--spacing-small);
}

.dnb-flex-stack > .dnb-button {
  align-self: flex-start;
}