@primer/css
Version:
The CSS implementation of GitHub's Primer Design System
3 lines (2 loc) • 3.41 kB
CSS
.dropdown{position:relative}.dropdown-caret{display:inline-block;width:0;height:0;vertical-align:middle;content:"";border-style:solid;border-width:4px 4px 0;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.dropdown-menu{position:absolute;top:100%;left:0;z-index:100;width:160px;padding-top:4px;padding-bottom:4px;margin-top:2px;list-style:none;background-color:var(--color-bg-overlay);background-clip:padding-box;border:1px solid var(--color-border-primary);border-radius:6px;box-shadow:var(--color-dropdown-shadow)}.dropdown-menu::before,.dropdown-menu::after{position:absolute;display:inline-block;content:""}.dropdown-menu::before{border:8px solid transparent;border-bottom-color:var(--color-border-primary)}.dropdown-menu::after{border:7px solid transparent;border-bottom-color:var(--color-bg-overlay)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{padding:4px 16px;overflow:visible;text-overflow:inherit}.dropdown-item{display:block;padding:4px 8px 4px 16px;overflow:hidden;color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:focus,.dropdown-item:hover{color:var(--color-state-hover-primary-text);text-decoration:none;background-color:var(--color-state-hover-primary-bg);outline:none}.dropdown-item:focus>.octicon,.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item.btn-link{width:100%;text-align:left}.dropdown-signout{width:100%;text-align:left;background:none;border:0}.dropdown-divider{display:block;height:0;margin:8px 0;border-top:1px solid var(--color-border-primary)}.dropdown-header{padding:4px 16px;font-size:12px;color:var(--color-text-secondary)}.dropdown-item[aria-checked="false"] .octicon-check{display:none}.dropdown-menu-w{top:0;right:100%;left:auto;width:auto;margin-top:0;margin-right:8px}.dropdown-menu-w::before{top:10px;right:-16px;left:auto;border-color:transparent;border-left-color:var(--color-border-primary)}.dropdown-menu-w::after{top:11px;right:-14px;left:auto;border-color:transparent;border-left-color:var(--color-bg-overlay)}.dropdown-menu-e{top:0;left:100%;width:auto;margin-top:0;margin-left:8px}.dropdown-menu-e::before{top:10px;left:-16px;border-color:transparent;border-right-color:var(--color-border-primary)}.dropdown-menu-e::after{top:11px;left:-14px;border-color:transparent;border-right-color:var(--color-bg-overlay)}.dropdown-menu-ne{top:auto;bottom:100%;left:0;margin-bottom:3px}.dropdown-menu-ne::before,.dropdown-menu-ne::after{top:auto;right:auto}.dropdown-menu-ne::before{bottom:-8px;left:9px;border-top:8px solid var(--color-border-primary);border-right:8px solid transparent;border-bottom:0;border-left:8px solid transparent}.dropdown-menu-ne::after{bottom:-7px;left:10px;border-top:7px solid var(--color-bg-overlay);border-right:7px solid transparent;border-bottom:0;border-left:7px solid transparent}.dropdown-menu-s{right:50%;left:auto;transform:translateX(50%)}.dropdown-menu-s::before{top:-16px;right:50%;transform:translateX(50%)}.dropdown-menu-s::after{top:-14px;right:50%;transform:translateX(50%)}.dropdown-menu-sw{right:0;left:auto}.dropdown-menu-sw::before{top:-16px;right:9px;left:auto}.dropdown-menu-sw::after{top:-14px;right:10px;left:auto}.dropdown-menu-se::before{top:-16px;left:9px}.dropdown-menu-se::after{top:-14px;left:10px}
/*# sourceMappingURL=dropdown.css.map */