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

DNB Eufemia Design System UI Library

/*
 * Section component
 *
 */
/*
 * Utilities
 */
.eufemia-scope--10_104_0 {
  --section-z-index: 1;
}

.eufemia-scope--10_104_0 .dnb-section {
  position: relative;
  isolation: isolate;
  display: flow-root;
  --breakout--on: visible;
  --breakout--off: hidden;
  --rounded-corner--value: 0.5rem;
  --outline: 0 0 0 var(--outline-width, 1px)
    var(--outline-color, transparent);
  --outline-none: 0 0 0 0 transparent;
  --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);
}
.eufemia-scope--10_104_0 .dnb-section[style*="--background-color"] {
  background-color: var(--background-color, white);
}
.eufemia-scope--10_104_0 .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);
}
.eufemia-scope--10_104_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);
}
.eufemia-scope--10_104_0 .dnb-section:not([style*="--breakout"]) {
  --breakout: var(--breakout--on);
}
.eufemia-scope--10_104_0 .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)));
}
.eufemia-scope--10_104_0 .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) {
  .eufemia-scope--10_104_0 .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) {
  .eufemia-scope--10_104_0 .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) {
  .eufemia-scope--10_104_0 .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)
    );
  }
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section::after {
  z-index: -14;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section::after {
  z-index: -13;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -12;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -11;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -10;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -9;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -8;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
  z-index: -7;
}
.eufemia-scope--10_104_0 .dnb-section--spacing-x-small {
  padding-top: var(--spacing-x-small);
  padding-bottom: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-small {
  padding-top: var(--spacing-small);
  padding-bottom: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-medium {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-section--spacing, .eufemia-scope--10_104_0 .dnb-section--spacing-large {
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-x-large {
  padding-top: var(--spacing-x-large);
  padding-bottom: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-xx-large {
  padding-top: var(--spacing-xx-large);
  padding-bottom: var(--spacing-xx-large);
}