@primer/css/dist/select-menu.css

The CSS implementation of GitHub's Primer Design System

.SelectMenu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;padding:var(--base-size-16);pointer-events:none;flex-direction:column}@media(min-width: 544px){.SelectMenu{position:absolute;top:auto;right:auto;bottom:auto;left:auto;padding:0}}.SelectMenu::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";background-color:var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop))}@media(min-width: 544px){.SelectMenu::before{display:none}}.SelectMenu-modal{position:relative;z-index:99;display:flex;max-height:66%;margin:auto 0;overflow:hidden;pointer-events:auto;flex-direction:column;background-color:var(--overlay-bgColor, var(--color-canvas-overlay));border:1px solid var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));border-radius:12px;box-shadow:var(--shadow-floating-legacy, var(--color-overlay-shadow));animation:SelectMenu-modal-animation .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(calc(var(--base-size-16) * -1))}}@media(min-width: 544px){.SelectMenu-modal{width:300px;height:auto;max-height:480px;margin:var(--base-size-8) 0 var(--base-size-16) 0;font-size:12px;border-color:var(--borderColor-default, var(--color-border-default));border-radius:6px;box-shadow:var(--shadow-floating-legacy, var(--color-overlay-shadow));animation-name:SelectMenu-modal-animation--sm}}.SelectMenu-header{display:flex;padding:var(--base-size-16);flex:none;align-items:center;border-bottom:1px solid var(--borderColor-muted, var(--color-border-muted))}@media(min-width: 544px){.SelectMenu-header{padding:7px 7px 7px var(--base-size-16)}}.SelectMenu-title{flex:1;font-size:14px;font-weight:var(--base-text-weight-semibold, 600)}@media(min-width: 544px){.SelectMenu-title{font-size:inherit}}.SelectMenu-closeButton{padding:var(--base-size-16);margin:calc(var(--base-size-16)*-1);line-height:1;color:var(--fgColor-muted, var(--color-fg-muted));background-color:rgba(0,0,0,0);border:0}@media(min-width: 544px){.SelectMenu-closeButton{padding:var(--base-size-8);margin:calc(var(--base-size-8)*-1) -7px}}.SelectMenu-filter{padding:var(--base-size-16);margin:0;border-bottom:1px solid var(--borderColor-muted, var(--color-border-muted))}@media(min-width: 544px){.SelectMenu-filter{padding:var(--base-size-8)}}.SelectMenu-input{display:block;width:100%}@media(min-width: 544px){.SelectMenu-input{font-size:14px}}.SelectMenu-list{position:relative;padding:0;margin:0;margin-bottom:-1px;flex:auto;overflow-x:hidden;overflow-y:auto;background-color:var(--overlay-bgColor, var(--color-canvas-overlay));-webkit-overflow-scrolling:touch}.SelectMenu-item{display:flex;align-items:center;width:100%;padding:var(--base-size-16);overflow:hidden;color:var(--fgColor-default, var(--color-fg-default));text-align:left;cursor:pointer;background-color:var(--overlay-bgColor, var(--color-canvas-overlay));border:0;border-bottom:1px solid var(--borderColor-muted, var(--color-border-muted))}@media(min-width: 544px){.SelectMenu-item{padding-top:7px;padding-bottom:7px}}.SelectMenu-list--borderless .SelectMenu-item{border-bottom:0}.SelectMenu-icon{width:var(--base-size-16);margin-right:var(--base-size-8);flex-shrink:0}.SelectMenu-icon--check{visibility:hidden;transition:transform .12s cubic-bezier(0.5, 0.1, 1, 0.5),visibility 0s .12s linear;transform:scale(0)}.SelectMenu-tabs{display:flex;flex-shrink:0;overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));-webkit-overflow-scrolling:touch}.SelectMenu-tabs::-webkit-scrollbar{display:none}@media(min-width: 544px){.SelectMenu-tabs{padding:var(--base-size-8) var(--base-size-8) 0 var(--base-size-8)}}.SelectMenu-tab{flex:1;padding:var(--base-size-8) var(--base-size-16);font-size:12px;font-weight:var(--base-text-weight-medium, 500);color:var(--fgColor-muted, var(--color-fg-muted));text-align:center;background-color:rgba(0,0,0,0);border:0;box-shadow:inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted))}@media(min-width: 544px){.SelectMenu-tab{flex:none;padding:var(--base-size-4) var(--base-size-16);border:1px solid rgba(0,0,0,0);border-bottom-width:0;border-top-left-radius:6px;border-top-right-radius:6px}}.SelectMenu-tab[aria-selected=true]{z-index:1;color:var(--fgColor-default, var(--color-fg-default));cursor:default;background-color:var(--overlay-bgColor, var(--color-canvas-overlay));box-shadow:0 0 0 1px var(--borderColor-muted, var(--color-border-muted))}@media(min-width: 544px){.SelectMenu-tab[aria-selected=true]{border-color:var(--borderColor-muted, var(--color-border-muted));box-shadow:none}}.SelectMenu-message{padding:7px var(--base-size-16);text-align:center;background-color:var(--overlay-bgColor, var(--color-canvas-overlay));border-bottom:1px solid var(--borderColor-muted, var(--color-border-muted))}.SelectMenu-blankslate,.SelectMenu-loading{padding:var(--base-size-24) var(--base-size-16);text-align:center;background-color:var(--overlay-bgColor, var(--color-canvas-overlay))}.SelectMenu-divider{padding:var(--base-size-4) var(--base-size-16);margin:0;font-size:12px;font-weight:var(--base-text-weight-medium, 500);color:var(--fgColor-muted, var(--color-fg-muted));background-color:var(--bgColor-muted, var(--color-canvas-subtle));border-bottom:1px solid var(--borderColor-muted, var(--color-border-muted))}.SelectMenu-list--borderless .SelectMenu-divider{border-top:1px solid var(--borderColor-muted, var(--color-border-muted))}.SelectMenu-list--borderless .SelectMenu-divider:empty{padding:0;border-top:0}.SelectMenu-footer{z-index:0;padding:var(--base-size-8) var(--base-size-16);font-size:12px;color:var(--fgColor-muted, var(--color-fg-muted));text-align:center;border-top:1px solid var(--borderColor-muted, var(--color-border-muted))}@media(min-width: 544px){.SelectMenu-footer{padding:7px var(--base-size-16)}}.SelectMenu--hasFilter .SelectMenu-modal{height:80%;max-height:none;margin-top:0}@media(min-width: 544px){.SelectMenu--hasFilter .SelectMenu-modal{height:auto;max-height:480px;margin-top:var(--base-size-8)}}.SelectMenu-tab:focus,.SelectMenu-item:focus{outline:0}.SelectMenu-item:hover{text-decoration:none}.SelectMenu-item[aria-checked=true]{font-weight:var(--base-text-weight-medium, 500);color:var(--fgColor-default, var(--color-fg-default))}.SelectMenu-item[aria-checked=true] .SelectMenu-icon--check{visibility:visible;transition:transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear;transform:scale(1)}.SelectMenu-item:disabled,.SelectMenu-item[aria-disabled=true]{color:var(--fgColor-disabled, var(--color-primer-fg-disabled));pointer-events:none}@media(hover: hover){body:not(.intent-mouse) .SelectMenu-closeButton:focus,.SelectMenu-closeButton:hover{color:var(--fgColor-default, var(--color-fg-default))}.SelectMenu-closeButton:active{color:var(--fgColor-muted, var(--color-fg-muted))}body:not(.intent-mouse) .SelectMenu-item:focus,.SelectMenu-item:hover{background-color:var(--bgColor-neutral-muted, var(--color-neutral-subtle))}.SelectMenu-item:active{background-color:var(--bgColor-muted, var(--color-canvas-subtle))}body:not(.intent-mouse) .SelectMenu-tab:focus{background-color:var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg))}.SelectMenu-tab:hover{color:var(--fgColor-default, var(--color-fg-default))}.SelectMenu-tab:not([aria-selected=true]):active{color:var(--fgColor-default, var(--color-fg-default));background-color:var(--bgColor-muted, var(--color-canvas-subtle))}}@media(hover: none){.SelectMenu-item:focus,.SelectMenu-item:active{background-color:var(--bgColor-muted, var(--color-canvas-subtle))}.SelectMenu-item{-webkit-tap-highlight-color:var(--control-bgColor-active, var(--color-select-menu-tap-highlight))}}
/*# sourceMappingURL=select-menu.css.map */