@gits-id/dropdown/dist/style.css

GITS Dropdown Component

.dark .dropdown{--dropdown-bg-color: #262626;--dropdown-button-icon-color: #a3a3a3;--dropdown-item-color: #e5e5e5;--dropdown-item-icon-color: #a3a3a3;--dropdown-item-active-color: #e5e5e5;--dropdown-panel-bg-color: #262626;--dropdown-divider-border-color: #404040;--dropdown-item-active-bg-color: #404040}:root{--dropdown-bg-color: #fff;--dropdown-button-icon-color: #6b7280;--dropdown-button-activator-gap: .5rem;--dropdown-item-color: #1f2937;--dropdown-item-icon-color: #4b5563;--dropdown-item-gap: .5rem;--dropdown-item-border-radius: .375rem;--dropdown-item-padding: .5rem;--dropdown-item-active-color: currentColor;--dropdown-item-active-bg-color: #e5e7eb;--dropdown-item-icon-width: 1.25rem;--dropdown-item-icon-height: 1.25rem;--dropdown-item-icon-color: currentColor;--dropdown-panel-bg-color: #fff;--dropdown-panel-border-radius: .375rem;--dropdown-panel-box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dropdown-panel-z-index: 10;--dropdown-panel-padding: .25rem;--dropdown-panel-width: 14rem;--dropdown-panel-margin-top: .5rem;--dropdown-divider-border-color: #e5e7eb}.dropdown{position:relative;display:inline-block;text-align:left}.dropdown-panel{position:absolute;z-index:var(--dropdown-panel-z-index);padding:var(--dropdown-panel-padding);width:var(--dropdown-panel-width);margin-top:var(--dropdown-panel-margin-top);background-color:var(--dropdown-panel-bg-color);border-radius:var(--dropdown-panel-border-radius);box-shadow:var(--dropdown-panel-box-shadow)}.dropdown-panel:focus{outline:none}.dropdown-divider{height:.25rem;border-bottom-width:1px;border-bottom-color:var(--dropdown-divider-border-color);border-bottom-style:solid;margin-top:.25rem;margin-bottom:.25rem;margin-left:-4px;margin-right:-4px}.dropdown-item{display:flex;gap:var(--dropdown-item-gap);border-radius:var(--dropdown-item-border-radius);align-items:center;width:100%;padding:var(--dropdown-item-padding);color:var(--dropdown-item-color);background-color:var(--dropdown-item-bg-color)}.dropdown-item--active{--dropdown-item-color: var(--dropdown-item-active-color);--dropdown-item-bg-color: var(--dropdown-item-active-bg-color)}.dropdown-item-icon{width:var(--dropdown-item-icon-width);height:var(--dropdown-item-icon-height);color:var(--dropdown-item-icon-color)}.dropdown-button-icon{color:var(--dropdown-button-icon-color)}.dropdown-button-activator{display:flex;align-items:center;gap:var(--dropdown-button-activator-gap)}