diff options
Diffstat (limited to 'old-apps/web-shared/src/styles/components/custom-select.scss')
| -rw-r--r-- | old-apps/web-shared/src/styles/components/custom-select.scss | 158 |
1 files changed, 0 insertions, 158 deletions
diff --git a/old-apps/web-shared/src/styles/components/custom-select.scss b/old-apps/web-shared/src/styles/components/custom-select.scss deleted file mode 100644 index 9cd3b5e..0000000 --- a/old-apps/web-shared/src/styles/components/custom-select.scss +++ /dev/null @@ -1,158 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_custom-select -Title: Custom Select -Descr: Custom Select Control -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - // --default variation only 👇 - --select-icon-size: 16px; - --select-icon-right-margin: var(--space-sm); // icon margin right - --select-text-icon-gap: var(--space-xxxs); // gap between text and icon -} - -.select { - position: relative; -} - -.select__input { - width: 100%; - height: 100%; - padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important; -} - -.select__icon { - width: var(--select-icon-size); - height: var(--select-icon-size); - pointer-events: none; - position: absolute; - right: var(--select-icon-right-margin); - top: 50%; - transform: translateY(-50%); -} - -// --custom-dropdown -:root { - --select-dropdown-gap: 4px; // distance between select control and custom dropdown -} - -.select__button { // created in JS - custom select control - width: 100%; -} - -.select__button[aria-expanded="true"] { - // custom select control if dropdown = visible -} - -.select__dropdown { // created in JS - custom select dropdown - position: absolute; - left: 0; - top: 100%; - min-width: 200px; - max-height: 1px; // updated in JS - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-md); - padding: var(--space-xxxs) 0; - border-radius: var(--radius-md); - z-index: var(--z-index-popover, 5); - margin-top: var(--select-dropdown-gap); - margin-bottom: var(--select-dropdown-gap); - overflow: auto; - - // use rem units - @include spaceUnit(1rem); - @include textUnit(1rem); - - visibility: hidden; - opacity: 0; -} - -.select__dropdown--right { // change dropdown position based on the available space - right: 0; - left: auto; -} - -.select__dropdown--up { - bottom: 100%; - top: auto; -} - -.select__button[aria-expanded="true"] + .select__dropdown { - visibility: visible; - opacity: 1; -} - -// custom <optgroup> list - include all <option>s if no <optgroup> available -.select__list { - list-style: none !important; -} - -.select__list:not(:first-of-type) { - padding-top: var(--space-xxs); -} - -.select__list:not(:last-of-type) { - border-bottom: 1px solid alpha(var(--color-contrast-higher), 0.1); - padding-bottom: var(--space-xxs); -} - -.select__item { // single item inside .select__list - display: flex; - align-items: center; - padding: var(--space-xxs) var(--space-sm); - color: var(--color-contrast-high); - width: 100%; - text-align: left; - // truncate text - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.select__item--optgroup { // custom <optgroup> label - font-size: var(--text-sm); - color: var(--color-contrast-medium); -} - -.select__item--option { // custom <option> label - cursor: pointer; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &:focus { - outline: none; - background-color: alpha(var(--color-primary), 0.15); - } - - &[aria-selected=true] { // selected option - background-color: var(--color-primary); - color: var(--color-white); - position: relative; - @include fontSmooth; - - &::after { // check icon next to the selected language - content: ''; - display: block; - height: 1em; - width: 1em; - margin-left: auto; - 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"); - } - - &:focus { - box-shadow: inset 0 0 0 2px var(--color-primary-dark); - } - } -} - -html:not(.js ) .select .icon { // hide icon if JS = disabled - display: none; -} |
