@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1 lines • 3.29 kB
CSS
:root{--popover-z-index:1000}.dnb-popover{--inner-space:0.75rem;--popover-border-radius:0.5rem;position:absolute;z-index:var(--popover-z-index)}.dnb-popover--inside-modal .dnb-popover{z-index:calc(var(--modal-z-index) + var(--popover-z-index))}.dnb-popover{display:flex;min-width:320px;padding:0 calc(var(--inner-space)*2)}.dnb-popover--no-inner-space{padding:0}.dnb-popover{background-color:var(--popover-background-color);border-radius:var(--popover-border-radius);box-shadow:var(--shadow-default);color:var(--popover-text-color)}.dnb-popover--show-outline.dnb-popover:before{border-radius:var(--popover-border-radius);bottom:0;box-shadow:0 0 0 1px var(--popover-outline-color);content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.dnb-popover{opacity:0;transition:opacity .2s var(--easing-default);visibility:hidden}.dnb-popover--active{animation:show-popover .2s var(--easing-default) forwards;visibility:visible}.dnb-popover--active.dnb-popover--no-animation,html[data-visual-test] .dnb-popover--active{animation-duration:0ms}.dnb-popover--hide{animation:hide-popover .2s var(--easing-default) forwards;visibility:visible}.dnb-popover--hide.dnb-popover--no-animation{animation:hide-popover 1ms linear forwards}.dnb-popover--fixed{position:fixed}html[data-visual-test] .dnb-popover--hide{animation:hide-popover 1ms linear 1s forwards}.dnb-popover__portal{left:0;position:absolute;right:0;top:0}.dnb-popover__content{display:flex;flex-direction:column;max-width:calc(var(--prose-max-width) - 64px);padding:calc(var(--inner-space)*2) 0 calc(var(--inner-space)*2);position:relative}.dnb-popover--no-max-width .dnb-popover__content{max-width:none}.dnb-popover--no-inner-space .dnb-popover__content{padding:0}.dnb-popover__portal .dnb-popover{margin:0 16px}.dnb-popover__title{display:flex;padding-right:2rem}.dnb-core-style .dnb-popover__title strong,.dnb-popover__title strong{color:inherit;font-weight:var(--font-weight-medium)}.dnb-popover__body{align-items:flex-start;display:flex;flex-direction:column}.dnb-popover__body:not(:first-child){margin-top:var(--spacing-x-small)}.dnb-popover__arrow{height:1rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-popover__arrow:before{background-color:var(--popover-background-color);border:none;bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-popover--show-outline .dnb-popover__arrow:before{box-shadow:0 0 0 1px var(--popover-outline-color)}.dnb-popover__arrow__placement--bottom{top:-1rem}.dnb-popover__arrow__placement--top{bottom:-1rem;transform:rotate(180deg)}.dnb-popover__arrow__placement--left{right:-1rem;transform:rotate(90deg)}.dnb-popover__arrow__placement--right{left:-1rem;transform:rotate(270deg)}.dnb-popover__arrow__arrow--left{align-self:flex-start}.dnb-popover__arrow__arrow--right{align-self:flex-end}.dnb-popover__close.dnb-button{color:inherit;position:absolute;right:var(--inner-space);top:var(--inner-space);-webkit-user-select:none;user-select:none}.dnb-popover__close.dnb-button:hover{opacity:.7}@keyframes show-popover{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes hide-popover{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px);visibility:hidden}}