aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/components/custom-select.scss
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-10-05 14:45:21 +0200
committerivarlovlie <git@ivarlovlie.no>2022-10-05 14:45:21 +0200
commitb7e39b59fd0fc7b5610ebff29035bf622079e0d8 (patch)
tree64be84ebbdac9f7ceced983390c53b10d575af5c /old-apps/web-shared/src/styles/components/custom-select.scss
parent2001c035fbb417ab0a3d42cfb04d17420bde4086 (diff)
downloadgreatoffice-b7e39b59fd0fc7b5610ebff29035bf622079e0d8.tar.xz
greatoffice-b7e39b59fd0fc7b5610ebff29035bf622079e0d8.zip
refactor: Change file structure
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.scss158
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;
-}