.dropdown {
position: relative;
}
.dropdown-caret {
display: inline-block; width: 0; height: 0; vertical-align: middle; content: ""; border-style: $border-style; // stylelint-disable-next-line primer/borders border-width: $spacer-1 $spacer-1 0; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent;
}
// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which // way the menu should render from the element triggering it.
.dropdown-menu {
position: absolute; top: 100%; left: 0; z-index: 100; width: 160px; padding-top: $spacer-1; padding-bottom: $spacer-1; // stylelint-disable-next-line primer/spacing margin-top: 2px; list-style: none; background-color: var(--color-bg-overlay); background-clip: padding-box; border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: var(--color-dropdown-shadow); &::before, &::after { position: absolute; display: inline-block; content: ""; } // caret border &::before { // stylelint-disable-next-line primer/borders border: $spacer-2 $border-style transparent; border-bottom-color: var(--color-border-primary); } // caret background (should match dropdown background) &::after { // stylelint-disable-next-line primer/borders border: 7px $border-style transparent; // stylelint-disable-next-line primer/borders border-bottom-color: var(--color-bg-overlay); } // stylelint-disable-next-line selector-max-type > ul { list-style: none; }
}
.dropdown-menu-no-overflow {
width: auto; .dropdown-item { padding: $spacer-1 $spacer-3; overflow: visible; text-overflow: inherit; }
}
// Dropdown items (can be links or buttons) .dropdown-item {
display: block; padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3; overflow: hidden; color: var(--color-text-primary); text-overflow: ellipsis; white-space: nowrap; &:focus, &:hover { color: var(--color-state-hover-primary-text); text-decoration: none; background-color: var(--color-state-hover-primary-bg); outline: none; > .octicon { color: inherit; opacity: 1; } [class*="color-text-"] { color: inherit !important; } > .Label { color: inherit !important; border-color: currentColor; } } &.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: $spacer-2 0; border-top: $border-width $border-style var(--color-border-primary);
}
.dropdown-header {
padding: $spacer-1 $spacer-3; font-size: $h6-size; color: var(--color-text-secondary);
}
.dropdown-item .octicon-check {
display: none;
}
// Directional classes // // Move the menu and the caret attached to it. Requires at least one of these on // the `.dropdown-menu` element.
.dropdown-menu-w {
top: 0; right: 100%; left: auto; width: auto; margin-top: 0; margin-right: $spacer-2; &::before { top: 10px; right: -$spacer-3; left: auto; border-color: transparent; border-left-color: var(--color-border-primary); } &::after { top: 11px; right: -14px; left: auto; border-color: transparent; // stylelint-disable-next-line primer/borders border-left-color: var(--color-bg-overlay); }
}
.dropdown-menu-e {
top: 0; left: 100%; width: auto; margin-top: 0; margin-left: $spacer-2; &::before { top: 10px; left: -$spacer-3; border-color: transparent; border-right-color: var(--color-border-primary); } &::after { top: 11px; left: -14px; border-color: transparent; // stylelint-disable-next-line primer/borders border-right-color: var(--color-bg-overlay); }
}
.dropdown-menu-ne {
top: auto; bottom: 100%; left: 0; // stylelint-disable-next-line primer/spacing margin-bottom: 3px; &::before, &::after { top: auto; right: auto; } &::before { bottom: -$spacer-2; left: 9px; // stylelint-disable-next-line primer/borders border-top: $spacer-2 $border-style var(--color-border-primary); // stylelint-disable-next-line primer/borders border-right: $spacer-2 $border-style transparent; border-bottom: 0; // stylelint-disable-next-line primer/borders border-left: $spacer-2 $border-style transparent; } &::after { bottom: -7px; left: 10px; // stylelint-disable-next-line primer/borders border-top: 7px $border-style var(--color-bg-overlay); // stylelint-disable-next-line primer/borders border-right: 7px $border-style transparent; border-bottom: 0; // stylelint-disable-next-line primer/borders border-left: 7px $border-style transparent; }
}
.dropdown-menu-s {
right: 50%; left: auto; transform: translateX(50%); &::before { top: -$spacer-3; right: 50%; transform: translateX(50%); } &::after { top: -14px; right: 50%; transform: translateX(50%); }
}
.dropdown-menu-sw {
right: 0; left: auto; &::before { top: -$spacer-3; right: 9px; left: auto; } &::after { top: -14px; right: 10px; left: auto; }
}
.dropdown-menu-se {
&::before { top: -$spacer-3; left: 9px; } &::after { top: -14px; left: 10px; }
}