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

DNB Eufemia Design System UI Library

/*
 * Section component
 *
 */
/*
 * Utilities
 */
:root {
  --section-z-index: var(--z-index-section);
}

.dnb-section {
  position: relative;
  isolation: isolate;
  display: flow-root;
  --breakout--on: visible;
  --breakout--off: hidden;
  --rounded-corner--value: 1.5rem;
  --outline: 0 0 0 var(--outline-width, 1px)
    var(--outline-color, transparent);
  --outline-none: 0 0 0 0 transparent;
  --outline-color--value: var(--token-color-stroke-neutral-subtle);
  --drop-shadow-none: var(--outline-none);
  --top: 0;
  --left: -100vw;
  --width: 100vw;
  --height: 100%;
  --color-transparent: transparent;
  --rounded-corner--small: 0;
  --rounded-corner--medium: 0;
  --rounded-corner--large: 0;
  color: var(--text-color, black);
  border-radius: var(--rounded-corner, 0);
  background-color: var(--background-color, white);
}
.dnb-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  box-shadow: var(--drop-shadow, var(--outline-none)), var(--outline, var(--outline-none));
  border-radius: var(--rounded-corner, 0);
}
.dnb-section::after {
  content: "";
  visibility: var(--breakout, hidden);
  position: absolute;
  z-index: -15;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  color: var(--background-color, currentcolor);
  background-color: currentcolor;
  --box-shadow:
    99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
    297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
  box-shadow: var(--box-shadow);
  border-radius: var(--rounded-corner, 0);
}
.dnb-section:not([style*="--breakout"]) {
  --breakout: var(--breakout--on);
}
.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card) {
  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
}
.dnb-section[style*="--outset"]::before {
  margin-left: calc(var(--outset-left, var(--padding-left)) * -1 * var(--outset));
  margin-right: calc(var(--outset-right, var(--padding-right)) * -1 * var(--outset));
  background-color: inherit;
}
@media screen and (max-width: 60em) {
  .dnb-section {
    --breakout: var(--breakout--small, var(--breakout--fallback));
    --outset: var(--outset--small, var(--outset--fallback));
    --background-color--value: var(--background-color--small);
    --text-color--value: var(--text-color--small);
    --outline-color: var(--outline-color--small);
    --outline-width: var(--outline-width--small);
    --drop-shadow: var(--drop-shadow--small);
    --rounded-corner: var(
      --rounded-corner--small,
      var(--rounded-corner--fallback)
    );
  }
}
@media screen and (max-width: 60em) and (min-width: 40.00625em) {
  .dnb-section {
    --breakout: var(--breakout--medium, var(--breakout--fallback));
    --outset: var(--outset--medium, var(--outset--fallback));
    --background-color--value: var(--background-color--medium);
    --text-color--value: var(--text-color--medium);
    --outline-color: var(--outline-color--medium);
    --outline-width: var(--outline-width--medium);
    --drop-shadow: var(--drop-shadow--medium);
    --rounded-corner: var(
      --rounded-corner--medium,
      var(--rounded-corner--fallback)
    );
  }
}
@media screen and (min-width: 60.00625em) {
  .dnb-section {
    --breakout: var(--breakout--large, var(--breakout--fallback));
    --outset: var(--outset--large, var(--outset--fallback));
    --background-color--value: var(--background-color--large);
    --text-color--value: var(--text-color--large);
    --outline-color: var(--outline-color--large);
    --outline-width: var(--outline-width--large);
    --drop-shadow: var(--drop-shadow--large);
    --rounded-corner: var(
      --rounded-corner--large,
      var(--rounded-corner--fallback)
    );
  }
}
.dnb-section .dnb-section::after {
  z-index: -14;
}
.dnb-section .dnb-section .dnb-section::after {
  z-index: -13;
}
.dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -12;
}
.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -11;
}
.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -10;
}
.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -9;
}
.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -8;
}
.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -7;
}
.dnb-section--divider {
  --text-color: var(--token-color-text-neutral);
  --background-color: var(--token-color-background-neutral);
  --separator-color: var(--token-color-stroke-neutral-subtle);
  z-index: 0;
}
.dnb-section--divider::after {
  --box-shadow:
    99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
    297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor,
    0 0.0625rem 0 0 var(--separator-color),
    99vw 0.0625rem 0 0 var(--separator-color),
    0 -0.0625rem 0 0 var(--separator-color),
    99vw -0.0625rem 0 0 var(--separator-color),
    198vw 0.0625rem 0 0 var(--separator-color),
    198vw -0.0625rem 0 0 var(--separator-color);
}
.dnb-section--transparent {
  --background-color: transparent;
}
.dnb-section--default {
  --text-color: var(
    --text-color--value,
    var(--token-color-text-neutral)
  );
  --background-color: var(
    --background-color--value,
    var(--token-color-background-neutral)
  );
}
.dnb-section--error {
  --text-color: var(--token-color-text-neutral);
  --background-color: var(--token-color-background-error-subtle);
}
.dnb-section--information, .dnb-section--success {
  --text-color: var(--token-color-text-neutral);
  --background-color: var(--token-color-background-info-subtle);
}
.dnb-section--warning {
  --text-color: var(--token-color-text-neutral);
  --background-color: var(--token-color-background-warning-subtle);
}
.dnb-section--surface-dark {
  --text-color: var(--token-color-text-neutral-ondark);
  --background-color: var(--token-color-decorative-first-bold-static);
}