feat: Initial after clean slate

1 files changed, 173 insertions, 0 deletions

diff --git a/apps/web-shared/src/styles/components/select-autocomplete.scss b/apps/web-shared/src/styles/components/select-autocomplete.scss
new file mode 100644
index 0000000..78a0fb0
--- /dev/null
+++ b/apps/web-shared/src/styles/components/select-autocomplete.scss
@@ -0,0 +1,173 @@
+@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 {
+    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 {
+    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 {
+      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;
+}