@dnb/eufemia/components/dropdown/style/dnb-dropdown.min.css

DNB Eufemia Design System UI Library

.dnb-dropdown{--dropdown-width:16rem;--dropdown-height:2rem;--dropdown-height--small:1.5rem;--dropdown-height--medium:2.5rem;--dropdown-height--large:3rem;--dropdown-padding-horizontal:1rem;--dropdown-focus-border-width:0.125rem;--dropdown-error-border-width:0.125rem;--dropdown-text-padding:0.5rem;--dropdown-button-padding:0 1rem;--dropdown-border-radius:0.25rem;--dropdown-error-border-inset: ;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--dropdown-height)}.dnb-dropdown__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-dropdown__shell{color:inherit;height:var(--dropdown-height);margin:0;padding:0;position:relative;width:var(--dropdown-width)}.dnb-dropdown__row{display:inline-flex}.dnb-dropdown__icon{display:inline-flex;justify-content:center;order:2;pointer-events:none;position:relative}.dnb-dropdown__trigger{--button-color-bg--disabled:var(
    --token-color-background-neutral-subtle
  );--button-color-border--disabled:var(
    --token-color-stroke-action-disabled
  );--button-color-text--disabled:var(
    --token-color-text-neutral-alternative
  );position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:1}.dnb-dropdown__trigger.dnb-button__status--error{--button-color-border--default:var(--token-color-stroke-error)}.dnb-dropdown__trigger.dnb-button{border-radius:var(--dropdown-border-radius);padding:var(--dropdown-button-padding)}.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding:0}.dnb-dropdown__text{color:inherit;display:inline-block;font-size:var(--font-size-basis);line-height:inherit;order:1;overflow:hidden;position:relative;text-align:left;text-overflow:ellipsis;width:100%;z-index:4}.dnb-dropdown__text__inner{display:inherit;overflow:hidden;text-overflow:inherit;white-space:nowrap}.dnb-dropdown>.dnb-form-status{transform:translateY(-.4375rem)}.dnb-dropdown--icon-position-left .dnb-dropdown__text{order:2;padding-left:var(--dropdown-text-padding);padding-right:0}.dnb-dropdown--icon-position-left .dnb-dropdown__icon{order:1}.dnb-dropdown--icon-position-right .dnb-dropdown__text{padding-right:var(--dropdown-text-padding)}.dnb-dropdown--independent-width .dnb-dropdown__shell{width:auto}.dnb-dropdown--icon-position-left .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:-.5rem}.dnb-dropdown--icon-position-right .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:.5rem}.dnb-dropdown .dnb-button--tertiary .dnb-button__text{margin:0 .5rem}.dnb-dropdown .dnb-button--tertiary .dnb-button__text:after{bottom:0}.dnb-dropdown .dnb-button--tertiary,.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text,.dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text{padding:0}.dnb-dropdown--open .dnb-dropdown__trigger:not([disabled]).dnb-button--secondary{--button-border-inset--default:var(--dropdown-error-border-inset);--border-width:var(--dropdown-error-border-width)}.dnb-dropdown--open .dnb-dropdown__trigger:not([disabled]).dnb-button--secondary:not(.dnb-button__status--error){--button-color-border--default:var(
    --token-color-stroke-action-pressed
  )}.dnb-dropdown__status--error .dnb-button--tertiary:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);--border-color:var(--token-color-stroke-error);--border-width:0.0625rem;border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}.dnb-dropdown__status--error .dnb-button--tertiary:disabled:before{--border-color:var(--token-color-stroke-action-disabled)}.dnb-dropdown .dnb-button--tertiary[disabled]{--button-tertiary-focus-left:0;--button-tertiary-focus-right:0}.dnb-dropdown__status--error .dnb-button--tertiary:not([disabled]):hover:before{--border-width:var(--dropdown-error-border-width)}.dnb-dropdown .dnb-button--secondary{--button-color-bg--hover:var(--token-color-background-neutral)}.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--is-popup .dnb-dropdown__trigger{height:var(--dropdown-height);padding:0;width:var(--dropdown-height)}.dnb-dropdown--is-popup .dnb-dropdown__icon{width:100%}.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options{min-height:1rem}.dnb-dropdown--is-popup .dnb-drawer-list__root{width:var(--dropdown-width)}.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--small)}.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--medium)}.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--large)}.dnb-dropdown--small .dnb-dropdown__shell,.dnb-dropdown--small .dnb-dropdown__trigger{height:var(--dropdown-height--small)}.dnb-dropdown--small,.dnb-dropdown--small .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--small)}.dnb-dropdown--medium .dnb-dropdown__shell,.dnb-dropdown--medium .dnb-dropdown__trigger{height:var(--dropdown-height--medium)}.dnb-dropdown--medium,.dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--medium)}.dnb-dropdown--large .dnb-dropdown__shell,.dnb-dropdown--large .dnb-dropdown__trigger{height:var(--dropdown-height--large)}.dnb-dropdown--large,.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--large)}.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text,.dnb-dropdown>.dnb-form-label{line-height:var(--line-height-basis)}.dnb-dropdown>.dnb-form-label{margin-right:1rem}@media screen and (max-width:40em){.dnb-dropdown{flex-wrap:wrap}.dnb-dropdown>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-dropdown--stretch{display:flex;flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner{flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-dropdown--stretch .dnb-dropdown__row,.dnb-dropdown--stretch .dnb-dropdown__shell{width:100%}.dnb-dropdown--stretch .dnb-form-label+.dnb-dropdown__inner{width:auto}.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner{width:100%}label+.dnb-dropdown[class*=__form-status]{vertical-align:top}label+.dnb-dropdown[class*=__form-status] .dnb-dropdown__shell{top:-.375rem}.dnb-dropdown__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-dropdown--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]{align-items:flex-start}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-dropdown{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown__helper{display:none}}.dnb-drawer-list--arrow-position-left .dnb-dropdown__list--tertiary .dnb-drawer-list__arrow{margin-left:.5rem}.dnb-drawer-list--arrow-position-right .dnb-dropdown__list--tertiary .dnb-drawer-list__arrow{margin-right:.5rem}