@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
7 lines • 4.5 kB
CSS
:root{--section-z-index:1}.dnb-section{--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;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;isolation:isolate;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{bottom:0;box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));left:0;right:0;top:0;z-index:-1}.dnb-section:after,.dnb-section:before{border-radius:var(--rounded-corner,0);content:"";position:absolute}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);height:var(--height);left:var(--left);top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.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{background-color:inherit;margin-left:calc(var(--outset-left, var(--padding-left))*-1*var(--outset));margin-right:calc(var(--outset-right, var(--padding-right))*-1*var(--outset))}@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--spacing-x-small{padding-bottom:var(--spacing-x-small);padding-top:var(--spacing-x-small)}.dnb-section--spacing-small{padding-bottom:var(--spacing-small);padding-top:var(--spacing-small)}.dnb-section--spacing-medium{padding-bottom:var(--spacing-medium);padding-top:var(--spacing-medium)}.dnb-section--spacing,.dnb-section--spacing-large{padding-bottom:var(--spacing-large);padding-top:var(--spacing-large)}.dnb-section--spacing-x-large{padding-bottom:var(--spacing-x-large);padding-top:var(--spacing-x-large)}.dnb-section--spacing-xx-large{padding-bottom:var(--spacing-xx-large);padding-top:var(--spacing-xx-large)}