@dnb/eufemia/style/dnb-ui-fragments.min.css

DNB Eufemia Design System UI Library

.dnb-drawer-list{--drawer-list-height:2rem;--drawer-list-padding-horizontal:1rem;--drawer-list-focus-border-width:0.125rem;--drawer-list-text-padding:0.5rem;--drawer-list-height--small:1.5rem;--drawer-list-height--medium:2.5rem;--drawer-list-height--large:3rem;--drawer-list-option-inner-background:var(--color-white);--drawer-list-list-background:var(--color-white);--drawer-list-list-line-height:var(--line-height-basis);--drawer-list-option-disabled-background:var(--color-white);--drawer-list-option-disabled-color:var(--color-black-20);--drawer-list-group-title-color:var(--color-black-80);--drawer-list-group-title-bg:var(--color-lavender);display:block;font-size:var(--font-size-small);min-width:inherit;position:relative;width:inherit}.dnb-drawer-list__portal{--drawer-list-width:16rem}.dnb-drawer-list__portal__style{position:absolute;transition:all .3s var(--easing-default)}html[data-visual-test] .dnb-drawer-list__portal__style{transition:none!important}.dnb-drawer-list__portal__style{z-index:calc(var(--modal-z-index, 3200) + 300)}.dnb-drawer-list__portal__style--fixed{position:fixed}.dnb-drawer-list__root{min-width:inherit;width:inherit}.dnb-drawer-list__root--portal{left:0;position:absolute;top:0}.dnb-drawer-list__content{padding:0;width:100%}.dnb-drawer-list__list{background-color:var(--drawer-list-list-background);bottom:auto;font-size:var(--font-size-basis);left:0;line-height:var(--drawer-list-list-line-height);margin:0;min-width:inherit;padding:0;position:absolute;right:0;top:0;transform:translateY(0);transition:transform .2s,opacity .16s ease-out;width:inherit;z-index:3}.dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option{margin:0}.dnb-drawer-list__options{background-color:transparent;display:flex;flex-direction:column;list-style:none;margin:0;max-height:90vh;padding:0;width:100%}.dnb-drawer-list--scroll .dnb-drawer-list__options{max-height:70vh;min-height:2rem;overflow-y:auto;overscroll-behavior:contain;transition:max-height .3s var(--easing-default)}html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options{scroll-behavior:auto}}.dnb-drawer-list--scroll .dnb-drawer-list__options{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-width,.5rem)}}@media (prefers-reduced-motion:reduce){.dnb-drawer-list--scroll .dnb-drawer-list__options{transition-duration:.01ms}}.dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options,html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options{transition:none!important}.dnb-drawer-list--opened .dnb-drawer-list__options{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){.dnb-drawer-list--opened .dnb-drawer-list__options{scroll-behavior:auto}}.dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options{scroll-behavior:auto}.dnb-drawer-list__group{list-style:none;margin:0;padding:0}.dnb-drawer-list__group-title{background-color:var(--drawer-list-group-title-bg);color:var(--drawer-list-group-title-color);display:block;font-weight:var(--font-weight-medium);padding:.5rem 1rem}.dnb-drawer-list__option{background-color:var(--color-white);color:inherit;cursor:pointer;margin:0;outline:none;padding:0;position:relative}.dnb-drawer-list__option__inner{background-color:var(--drawer-list-option-inner-background);color:inherit;display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(10,-webkit-min-content);grid-template-rows:repeat(10,min-content);margin:0;outline:none;padding:1rem;position:relative;z-index:1}.dnb-drawer-list__option__inner>*{align-self:self-start}.dnb-drawer-list__option__item{display:block;grid-column:1;text-overflow:ellipsis}.dnb-drawer-list__option__item--horizontal{display:flex}.dnb-drawer-list__option__item>.dnb-icon{vertical-align:initial}.dnb-drawer-list__option__item .dnb-anchor{display:inline-block;font-size:inherit;margin-right:.5rem;word-break:break-word}@media screen and (min-width:40.00625em){.dnb-drawer-list__option__suffix{align-self:center;grid-column:2;grid-row:1/-1;justify-self:end}}.dnb-drawer-list__option--ignore{cursor:default;pointer-events:none}.dnb-drawer-list__option[disabled]{--drawer-list-option-inner-background:var(
    --drawer-list-option-disabled-background
  );color:var(--drawer-list-option-disabled-color);cursor:not-allowed}.dnb-drawer-list__triangle{left:auto;margin:0 var(--drawer-list-padding-horizontal);pointer-events:none;right:0;top:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2);z-index:-1}.dnb-drawer-list__triangle,.dnb-drawer-list__triangle:before{height:calc(var(--drawer-list-height)/2);position:absolute;width:calc(var(--drawer-list-height)/2)}.dnb-drawer-list__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";left:0;top:0;transform:translateY(60%) rotate(45deg)}.dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle{left:0;right:auto}.dnb-drawer-list--top .dnb-drawer-list__triangle{bottom:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2 - 2px);top:auto;transform:rotate(180deg)}.dnb-drawer-list--top .dnb-drawer-list__triangle:before{transform:translateY(65%) rotate(45deg)}.dnb-drawer-list--is-popup.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.5rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.5rem}.dnb-drawer-list--opened .dnb-drawer-list__list{display:flex;flex-direction:column;z-index:100}.dnb-drawer-list--opened .dnb-drawer-list__list:not(.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation){animation:drawer-list-slide-top-down .2s ease-out 1 forwards}.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list{animation-duration:1ms!important}.dnb-drawer-list--hidden .dnb-drawer-list__list{display:none}.dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:0}.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height);top:auto}.dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:var(--drawer-list-height)}.dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list{top:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.75rem}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.75rem}.dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list{top:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list{top:var(--drawer-list-height--large)}.dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list{bottom:var(--drawer-list-height--large)}.dnb-drawer-list--large .dnb-drawer-list__triangle{margin:0 1.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{left:auto}.dnb-drawer-list__root>.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list__portal .dnb-drawer-list--right{right:100%}.dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list{bottom:0;top:auto}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list:not(.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation){animation:drawer-list-slide-top-up .15s ease-out 1 forwards}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{animation-duration:1ms!important}.dnb-drawer-list--action-menu .dnb-drawer-list__option__inner{align-items:center;flex-direction:row;justify-content:flex-start}@media screen and (min-width:40.00625em){.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:0}.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:0}}@keyframes drawer-list-scale-in{0%{opacity:0;transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}to{opacity:1;transform:scale(1) translateX(0)}}@keyframes drawer-list-scale-out{0%{opacity:1;transform:scale(1) translateX(0)}to{opacity:0;transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}}@keyframes drawer-list-slide-top-down{0%{opacity:0;pointer-events:none;transform:translateY(calc(1px - var(--drawer-list-height)))}to{opacity:1;pointer-events:auto;transform:translateY(0)}}@keyframes drawer-list-slide-top-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(1px - var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(1px + var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-up{0%{opacity:0;pointer-events:none;transform:translateY(calc(1px + var(--drawer-list-height)))}to{opacity:1;pointer-events:auto;transform:translateY(0)}}.dnb-scroll-view{overflow-x:auto;overflow-y:auto;overscroll-behavior:contain}html:not([data-visual-test]) .dnb-scroll-view{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html:not([data-visual-test]) .dnb-scroll-view{scroll-behavior:auto}}.dnb-scroll-view{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-scroll-view::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scroll-view::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888)}.dnb-scroll-view::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}.dnb-scroll-view::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-width,.5rem)}}.dnb-scroll-view{overscroll-behavior:auto}.dnb-scroll-view[tabindex="0"]:focus{outline:none}html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-text-counter .dnb-icon{font-size:0;margin-right:0;transition:margin .2s var(--easing-default),font-size .4s var(--easing-default)}.dnb-text-counter--exceeded .dnb-icon{font-size:var(--font-size-basis--em);margin-right:.5rem}