// stylelint-disable selector-max-type // selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles.
$SelectMenu-max-height: 480px !default;
// Select Menu // // A more advanced menu with support for navigation, filtering, and more.
.SelectMenu {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; display: flex; padding: $spacer-3; pointer-events: none; flex-direction: column; @include breakpoint(sm) { position: absolute; top: auto; right: auto; bottom: auto; left: auto; padding: 0; }
}
// Backdrop // // Adds a dark, semi transparent “cover” underneat the modal. Only visible for xs.
.SelectMenu::before {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; content: ""; background-color: var(--color-select-menu-backdrop-bg); @include breakpoint(sm) { display: none; }
}
// Modal // // The main “box” that contains the content
.SelectMenu-modal {
position: relative; z-index: 99; // Needs to be higher than .details-overlay's z-index: 80. display: flex; max-height: 66%; margin: auto 0; overflow: hidden; // Enables border radius on scrollable child elements pointer-events: auto; flex-direction: column; background-color: var(--color-bg-overlay); border: $border-width $border-style var(--color-select-menu-backdrop-border); // stylelint-disable-next-line primer/borders border-radius: $border-radius * 2; box-shadow: var(--color-select-menu-shadow); animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; @keyframes SelectMenu-modal-animation { 0% { opacity: 0; transform: scale(0.9); } } @keyframes SelectMenu-modal-animation--sm { 0% { opacity: 0; transform: translateY(-$spacer-3); } } @include breakpoint(sm) { width: 300px; height: auto; max-height: $SelectMenu-max-height; margin: $spacer-2 0 $spacer-3 0; font-size: $font-size-small; border-color: var(--color-border-primary); border-radius: $border-radius; box-shadow: var(--color-shadow-large); animation-name: SelectMenu-modal-animation--sm; }
}
// Header // // Used for showing a title and the close button. Close button is only visible for xs.
.SelectMenu-header {
display: flex; padding: $spacer-3; flex: none; // fixes header from getting squeezed in Safari iOS align-items: center; border-bottom: $border-width $border-style var(--color-select-menu-border-secondary); @include breakpoint(sm) { // stylelint-disable-next-line primer/spacing padding: 7px 7px 7px $spacer-3; }
}
.SelectMenu-title {
flex: 1; font-size: $body-font-size; font-weight: $font-weight-bold; @include breakpoint(sm) { font-size: inherit; }
}
.SelectMenu-closeButton {
padding: $spacer-3; margin: -$spacer-3; line-height: 1; // stylelint-disable-next-line primer/colors color: var(--color-icon-tertiary); background-color: transparent; border: 0; @include breakpoint(sm) { padding: $spacer-2; // stylelint-disable-next-line primer/spacing margin: (-$spacer-2) (-7px); // Using -7px fixes a :focus glitch }
}
// Filter // // An input to filter a large list
.SelectMenu-filter {
padding: $spacer-3; margin: 0; border-bottom: $border-width $border-style var(--color-select-menu-border-secondary); @include breakpoint(sm) { padding: $spacer-2; }
}
.SelectMenu-input {
display: block; width: 100%; @include breakpoint(sm) { font-size: $h5-size; }
}
// List // // The container that holds all the list items. Starts scrolling when the list gets too long.
.SelectMenu-list {
position: relative; padding: 0; margin: 0; // stylelint-disable-next-line primer/spacing margin-bottom: -$border-width; // Hides the last border in the list flex: auto; overflow-x: hidden; overflow-y: auto; background-color: var(--color-bg-overlay); -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
}
// List Item // // The interactive element used to make a selection
.SelectMenu-item {
display: flex; align-items: center; width: 100%; padding: $spacer-3; overflow: hidden; color: var(--color-text-primary); text-align: left; cursor: pointer; background-color: var(--color-bg-overlay); border: 0; border-bottom: $border-width $border-style var(--color-select-menu-border-secondary); @include breakpoint(sm) { // stylelint-disable-next-line primer/spacing padding-top: 7px; // stylelint-disable-next-line primer/spacing padding-bottom: 7px; } // Borderless .SelectMenu-list--borderless & { border-bottom: 0; }
}
// Icon // // Icon shown on the left of a list item.
.SelectMenu-icon {
width: $spacer-3; // fixed width to make sure following content aligns margin-right: $spacer-2; flex-shrink: 0;
}
// Check icon .SelectMenu-icon–check {
visibility: hidden; transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear; transform: scale(0);
}
// Tabs // // Allows switching between multiple lists
.SelectMenu-tabs {
display: flex; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary); -webkit-overflow-scrolling: touch; // Hide scrollbar so it doesn't cover the text &::-webkit-scrollbar { display: none; } @include breakpoint(sm) { padding: $spacer-2 $spacer-2 0 $spacer-2; }
}
.SelectMenu-tab {
flex: 1; padding: $spacer-2 $spacer-3; font-size: $font-size-small; font-weight: $font-weight-semibold; color: var(--color-text-tertiary); text-align: center; background-color: transparent; border: 0; // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary); @include breakpoint(sm) { flex: none; padding: $spacer-1 $spacer-3; border: $border-width $border-style transparent; border-bottom-width: 0; border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; } &[aria-selected="true"] { z-index: 1; // Keeps box-shadow visible when hovering color: var(--color-text-primary); cursor: default; background-color: var(--color-bg-overlay); // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 0 1px var(--color-select-menu-border-secondary); @include breakpoint(sm) { border-color: var(--color-select-menu-border-secondary); box-shadow: none; } }
}
// Message // // A container used to show different kinds of text messages.
.SelectMenu-message {
// stylelint-disable-next-line primer/spacing padding: 7px $spacer-3; text-align: center; background-color: var(--color-bg-overlay); border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
}
// Blankslate and Loading // // A container used to show a blankslate or the loading animation.
.SelectMenu-blankslate, .SelectMenu-loading {
padding: $spacer-4 $spacer-3; text-align: center; background-color: var(--color-bg-overlay);
}
// Divider // // Can be used to divide the list into multiple groups
.SelectMenu-divider {
padding: $spacer-1 $spacer-3; margin: 0; font-size: $font-size-small; font-weight: $font-weight-semibold; color: var(--color-text-tertiary); background-color: var(--color-bg-tertiary); border-bottom: $border-width $border-style var(--color-select-menu-border-secondary); // Borderless .SelectMenu-list--borderless & { border-top: $border-width $border-style var(--color-select-menu-border-secondary); &:empty { padding: 0; border-top: 0; } }
}
// Footer // // A container at the bottom.
.SelectMenu-footer {
z-index: 0; // Avoid top border from getting covered by the negative margin of the list padding: $spacer-2 $spacer-3; font-size: $font-size-small; color: var(--color-text-tertiary); text-align: center; border-top: $border-width $border-style var(--color-select-menu-border-secondary); @include breakpoint(sm) { // stylelint-disable-next-line primer/spacing padding: 7px $spacer-3; }
}
// Has Filter (modifier) // // Makes sure that the filter input keeps a fixed position at the top while typing. Only visible for xs.
.SelectMenu–hasFilter {
.SelectMenu-modal { height: 80%; max-height: none; margin-top: 0; @include breakpoint(sm) { height: auto; max-height: $SelectMenu-max-height; margin-top: $spacer-2; } }
}
// States // // Different states
// Reset outlines .SelectMenu-closeButton:focus, .SelectMenu-tab:focus, .SelectMenu-item:focus {
outline: 0;
}
// Reset <a> elements .SelectMenu-item:hover {
text-decoration: none;
}
// Selected // // Visible when a user clicks/taps on a list item
font-weight: $font-weight-semibold; color: var(--color-text-primary); .SelectMenu-icon--check { visibility: visible; transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear; transform: scale(1); }
}
// Disabled // // Prevent list items to be selected
.SelectMenu-item:disabled, .SelectMenu-item {
color: var(--color-text-disabled); pointer-events: none;
}
// Can hover states // // For mouse/keyboard input
@media (hover: hover) {
body:not(.intent-mouse) .SelectMenu-closeButton:focus, .SelectMenu-closeButton:hover { color: var(--color-text-primary); } .SelectMenu-closeButton:active { color: var(--color-text-secondary); } body:not(.intent-mouse) .SelectMenu-item:focus, .SelectMenu-item:hover { background-color: var(--color-state-hover-secondary-bg); } .SelectMenu-item:active { background-color: var(--color-bg-secondary); } body:not(.intent-mouse) .SelectMenu-tab:focus { background-color: var(--color-select-menu-tap-focus-bg); } .SelectMenu-tab:hover { color: var(--color-text-primary); } .SelectMenu-tab:not([aria-selected="true"]):active { color: var(--color-text-primary); background-color: var(--color-bg-tertiary); }
}
// Can not hover states // // For touch input
@media (hover: none) {
// Android .SelectMenu-item:focus, .SelectMenu-item:active { background-color: var(--color-bg-secondary); } // iOS Safari // :active would work if ontouchstart is added to the button // Instead this tweaks the "native" highlight color .SelectMenu-item { -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight); }
}