diff options
Diffstat (limited to 'assets/sass/@primer/css/select-menu/select-menu.scss')
| -rw-r--r-- | assets/sass/@primer/css/select-menu/select-menu.scss | 428 |
1 files changed, 0 insertions, 428 deletions
diff --git a/assets/sass/@primer/css/select-menu/select-menu.scss b/assets/sass/@primer/css/select-menu/select-menu.scss deleted file mode 100644 index bf3b103..0000000 --- a/assets/sass/@primer/css/select-menu/select-menu.scss +++ /dev/null @@ -1,428 +0,0 @@ -// stylelint-disable selector-max-type -// selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles. - -// TODO@15.0.0: remove styles below -@media (hover: hover) { - .SelectMenu-tab:not([aria-checked="true"]):hover, - .SelectMenu-tab:not([aria-checked="true"]):active { - background-color: $bg-white; - } -} - -$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: $bg-black-fade; - - @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: $bg-gray; - // stylelint-disable-next-line primer/borders - border-radius: $border-radius * 2; - // stylelint-disable-next-line primer/box-shadow - box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); - 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-1 0 $spacer-3 0; - font-size: $font-size-small; - border: $border-width $border-style $border-gray-dark; - border-radius: $border-radius; - box-shadow: $box-shadow-medium; - 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; - flex: none; // fixes header from getting squeezed in Safari iOS - padding: $spacer-3; - - @include breakpoint(sm) { - padding-top: $spacer-2; - padding-bottom: $spacer-2; - } -} - -.SelectMenu-title { - flex: auto; - font-size: $body-font-size; - font-weight: $font-weight-bold; - - @include breakpoint(sm) { - font-size: inherit; - } -} - -.SelectMenu-closeButton { - padding: $spacer-3; - margin: -$spacer-3; - color: $text-gray-light; - background-color: transparent; - border: 0; - - @include breakpoint(sm) { - display: none; - } -} - -// Filter -// -// An input to filter a large list - -.SelectMenu-filter { - padding: $spacer-3; - margin: 0; - border-top: $border; - - @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: $bg-white; - border-top: $border; - -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: $text-gray; - text-align: left; - cursor: pointer; - background-color: $bg-white; - border: 0; - border-bottom: $border-width $border-style $border-gray-light; - - @include breakpoint(sm) { - padding-top: $spacer-2; - padding-bottom: $spacer-2; - } -} - -// 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; - // stylelint-disable-next-line primer/spacing - margin-bottom: -$border-width; // hide border of element below - overflow-x: auto; - overflow-y: hidden; - border-top: $border; - -webkit-overflow-scrolling: touch; - - // Hide scrollbar so it doesn't cover the text - &::-webkit-scrollbar { - display: none; - } - - @include breakpoint(sm) { - padding: 0 $spacer-2; - border-top: 0; - } -} - -.SelectMenu-tab { - flex: 1; - padding: $spacer-2 $spacer-3; - font-size: $font-size-small; - font-weight: $font-weight-semibold; - color: $text-gray-light; - text-align: center; - background-color: transparent; - border: 0; - // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 -1px 0 $border-color; - - @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: $text-gray-dark; - cursor: default; - background-color: $bg-white; - // stylelint-disable-next-line primer/box-shadow - box-shadow: 0 0 0 1px $border-color; - - @include breakpoint(sm) { - border-color: $border-color; - box-shadow: none; - } - } -} - -// Message, Blankslate and Loading -// -// A container used to show different kinds of content. Like a message, a blankslate or the loading animation. - -.SelectMenu-message { - border-bottom: $border-width $border-style $border-gray-light; -} - -.SelectMenu-message, -.SelectMenu-blankslate, -.SelectMenu-loading { - padding: $spacer-4 $spacer-3; - text-align: center; - background-color: $bg-white; -} - -// 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-bold; - color: $text-gray-light; - background-color: $bg-gray; - border-bottom: $border-width $border-style $border-gray-light; -} - -// 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: $text-gray-light; - text-align: center; - border-top: $border; - - @include breakpoint(sm) { - padding: $spacer-1 $spacer-2; - } -} - -// 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-1; - } - } -} - -// States -// -// Different states - -// Reset outlines -.SelectMenu-tab:focus, -.SelectMenu-item:focus { - outline: none; -} - -// Reset <a> elements -.SelectMenu-item:hover { - text-decoration: none; -} - -// Selected -// -// Visible when a used clicks/taps on a list item - -.SelectMenu-item[aria-checked="true"] { - font-weight: $font-weight-semibold; - color: $text-gray-dark; - - .SelectMenu-icon--check { - visibility: visible; - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear; - transform: scale(1); - } -} - -// Can hover states -// -// For mouse/keyboard input - -@media (hover: hover) { - body:not(.intent-mouse) .SelectMenu-item:focus, - .SelectMenu-item:hover { - background-color: $bg-gray; - } - - .SelectMenu-item:active { - background-color: $bg-gray-light; - } - - body:not(.intent-mouse) .SelectMenu-tab:focus { - // stylelint-disable-next-line primer/colors - background-color: $blue-100; - } - - .SelectMenu-tab:not([aria-selected="true"]):hover { - color: $text-gray-dark; - // stylelint-disable-next-line primer/colors - background-color: $gray-200; - } - - .SelectMenu-tab:not([aria-selected="true"]):active { - color: $text-gray-dark; - background-color: $bg-gray; - } -} - -// Can not hover states -// -// For touch input - -@media (hover: none) { - // Android - .SelectMenu-item:focus, - .SelectMenu-item:active { - background-color: $bg-gray-light; - } - - // 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: rgba($gray-300, 0.5); - } -} |