diff options
Diffstat (limited to 'old-apps/web-shared/src/styles/components/select-autocomplete.scss')
| -rw-r--r-- | old-apps/web-shared/src/styles/components/select-autocomplete.scss | 176 |
1 files changed, 0 insertions, 176 deletions
diff --git a/old-apps/web-shared/src/styles/components/select-autocomplete.scss b/old-apps/web-shared/src/styles/components/select-autocomplete.scss deleted file mode 100644 index d5360ff..0000000 --- a/old-apps/web-shared/src/styles/components/select-autocomplete.scss +++ /dev/null @@ -1,176 +0,0 @@ -@use '../base' as *; -@use 'autocomplete.scss' as *; - -/* -------------------------------- - -File#: _3_select-autocomplete -Title: Select Autocomplete -Descr: Selection dropdown with autocomplete -Usage: codyhouse.co/license - --------------------------------- */ - -.select-auto { - &.autocomplete { - --autocomplete-dropdown-vertical-gap: 4px; // gap between input and results list - --autocomplete-dropdown-max-height: 250px; - --autocomplete-dropdown-scrollbar-width: 6px; // custom scrollbar - webkit browsers - } -} - -// input -.select-auto__input-wrapper { - --input-btn-size: 1.25em; // btn/icon size - --input-btn-icon-size: 16px; // btn/icon size - --input-btn-text-gap: var(--space-xxs); // gap between button/icon and text - - position: relative; - background: var(--color-bg-dark); - line-height: 1.2; - box-shadow: inset 0 0 0 1px var(--color-contrast-lower); - - &.multiple { - display: flex; - flex-direction: row; - flex-flow: wrap; - - .chip { - white-space: nowrap; - margin-right: 1px; - } - - input[type="text"] { - width: auto; - } - - @media (max-width: 756px) { - flex-flow: column !important; - - &.has-selection { - input[type="text"] { - margin-top: 5px; - } - - .chip { - justify-content: space-between; - - .chip__btn { - margin-right: 0 !important;; - } - } - } - } - } - - &::placeholder { - opacity: 1; - color: var(--color-contrast-low); - } - - &:focus-within, - .focus { - background: var(--color-bg); - box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 1px var(--color-primary); - outline: none; - } - - .form-control { - width: 100%; - height: 100%; - padding-right: calc(var(--form-control-padding-x) + var(--input-btn-size) + var(--input-btn-text-gap)); - } -} - - -.select-auto__input-icon-wrapper { - width: var(--input-btn-size); - height: var(--input-btn-size); - - position: absolute; - bottom: calc(var(--input-btn-size) / 3); - right: var(--form-control-padding-x); - display: flex; - pointer-events: none; - - .icon { - display: block; - margin: auto; - width: var(--input-btn-icon-size, 16px); - height: var(--input-btn-icon-size, 16px); - } -} - -.select-auto__input-btn { - display: none; - justify-content: center; - align-items: center; - width: inherit; - height: inherit; - pointer-events: auto; - cursor: pointer; - color: var(--color-contrast-medium); // icon color - - &:hover { - color: var(--color-contrast-high); - } -} - -.select-auto--selection-done { - .select-auto__input-icon-wrapper > .icon { - display: none; - } - - .select-auto__input-btn { - display: flex; - } -} - -// dropdown -.select-auto__results { - // reset spacing and typography - @include spaceUnit(1rem); - @include textUnit(1rem); -} - -// single result item -.select-auto__option { - position: relative; - cursor: pointer; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.05); - } - - &:focus, - &.focus { - outline: none; - background-color: alpha(var(--color-primary), 0.12); - } - - &.select-auto__option--selected { - background-color: var(--color-primary); - color: var(--color-white); - padding-right: calc(1em + var(--space-sm)); - @include fontSmooth; - - &:focus, - .focus { - background-color: var(--color-primary-dark); - } - - &::after { - content: ''; - position: absolute; - right: var(--space-sm); - top: calc(50% - 0.5em); - height: 1em; - width: 1em; - background-color: currentColor; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E"); - } - } -} - -.select-auto__group-title, .select-auto__no-results-msg { - outline: none; -} |
