diff options
Diffstat (limited to 'apps/web-shared/src/styles/components/dropdown.scss')
| -rw-r--r-- | apps/web-shared/src/styles/components/dropdown.scss | 98 |
1 files changed, 0 insertions, 98 deletions
diff --git a/apps/web-shared/src/styles/components/dropdown.scss b/apps/web-shared/src/styles/components/dropdown.scss deleted file mode 100644 index c5ded33..0000000 --- a/apps/web-shared/src/styles/components/dropdown.scss +++ /dev/null @@ -1,98 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _2_dropdown -Title: Dropdown -Descr: A hoverable link that toggles the visibility of a dropdown list -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - --dropdown-item-padding: var(--space-xxs) var(--space-sm); -} - -.dropdown { - position: relative; -} - -.dropdown__menu { - border-radius: var(--radius-md); - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-sm); - z-index: var(--z-index-popover, 5); - position: absolute; - left: 0; - top: 100%; - opacity: 0; - visibility: hidden; -} - -.dropdown__wrapper { - max-height: 24px; -} - -@media (pointer: fine) { // user has pointing device (e.g., mouse) - .dropdown__wrapper, - .open-dropdown { - &:hover .dropdown__menu, - &:focus .dropdown__menu { - opacity: 1; - visibility: visible; - } - } - - .dropdown__sub-wrapper:hover > .dropdown__menu { - left: 100%; - } -} - -@media not all and (pointer: fine) { - .dropdown__trigger-icon { - display: none; - } -} - -.dropdown__item { - display: block; - text-decoration: none; - color: var(--color-contrast-high); - padding: var(--dropdown-item-padding); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover, &.dropdown__item--hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } -} - -.dropdown__separator { // h line divider - height: 1px; - background-color: var(--color-contrast-lower); - margin: var(--dropdown-item-padding); -} - -.dropdown__sub-wrapper { - position: relative; - - > .dropdown__item { // item w/ right arrow - position: relative; - padding-right: calc(var(--space-sm) + 12px); - - .icon { // right arrow - position: absolute; - display: block; - width: 12px; - height: 12px; - right: var(--space-xxs); - top: calc(50% - 6px); - } - } - - > .dropdown__menu { // sub menu - top: calc(var(--space-xxs) * -1); - box-shadow: var(--inner-glow), var(--shadow-md); - } -} |
