@tet/tet-components 1.4.29-testing → 1.4.30-staging

package/dist/collection/components/advanced/search/tet-support-search/tet-support-search.css

@@ -0,0 +1,485 @@
+/* Tet design styles */
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+:host {
+  --color-gray-light: #cdd2de;
+  --color-ta070: #f5f6f8;
+  --color-ta080: #e6e8ee;
+  --color-ta100: #cdd2de;
+  --color-ta200: #9ba5be;
+  --color-ta300: #69789c;
+  --color-ta500: #1e356a;
+  --color-ta600: #051d59;
+  --color-tc090: #d6e6fd;
+  --color-tc100: #d1dffe;
+  --color-tc300: #75a1fb;
+  --color-tc500: #1a70f6;
+  --color-tc600: #0060f5;
+  --color-td500: #00F1F2;
+  --color-td600: #01cbe0;
+  --color-tf600: #f53b2a;
+  --color-tg300: #2b3036;
+  --color-tg400: #1d2128;
+  --color-tg500: #12171e;
+  --color-tg600: #01050c;
+  --color-th500: #f5f5f5;
+  --color-ti500: #869198;
+  --color-ti600: #aeb7bc;
+  --text-font: Gilroy, serif;
+  --text-color-darker: var(--color-ta600);
+  --text-color-dark: var(--color-ta500);
+  --text-color-dark-theme: var(--color-th500);
+  --icons-font: Tet Icons, serif;
+}
+
+.icon.tet-search {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-search::before {
+  content: "\e86e";
+}
+.icon.tet-close-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close-circled::before {
+  content: "\e85a";
+}
+.icon.tet-close {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close::before {
+  content: "\e85b";
+}
+.icon.tet-check-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check-circled::before {
+  content: "\e86c";
+}
+.icon.tet-check {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check::before {
+  content: "\e855";
+}
+.icon.tet-chevron-up {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-up::before {
+  content: "\e859";
+}
+.icon.tet-chevron-down {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-down::before {
+  content: "\e856";
+}
+.icon.tet-clipboard {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-clipboard::before {
+  content: "\e86a";
+}
+.icon.tet-info {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-info::before {
+  content: "\e81d";
+}
+.icon.tet-done {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-done::before {
+  content: "\e867";
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+:host {
+  --font-family-fallback: Gilroy, Arial, sans-serif;
+  --font-family-headline: Gilroy;
+  --font-family-content: Inter, var(--font-family-fallback);
+  font-family: var(--font-family-content);
+}
+
+:host {
+  display: block;
+  --input-field-icon-color: var(--tc-icon-secondary);
+  --dropdown-option-text-color-secondary: var(--tc-text-secondary);
+  --dropdown-option-text-color-tertiary: var(--tc-text-tertiary);
+  --dropdown-more-results-option-background-color: var(--tc-layer-secondary);
+}
+
+:host(.dark) {
+  --input-field-icon-color: var(--tc-icon-secondary-dark);
+  --dropdown-option-text-color-secondary: var(--tc-text-secondary-dark);
+  --dropdown-option-text-color-tertiary: var(--tc-text-tertiary-dark);
+  --dropdown-more-results-option-background-color: var(--tc-layer-secondary-dark);
+}
+
+::part(dropdown-option) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+::part(option-icon) {
+  --icon-size: 1rem;
+  --icon-container-display: flex;
+}
+
+::part(dropdown-option-content) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+::part(option-label) {
+  font: 600 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+::part(option-description) {
+  font: 400 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  margin-top: 0.125rem;
+  color: var(--dropdown-option-text-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+::part(option-categories) {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--dropdown-option-text-color-tertiary);
+  margin-top: 0.375rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+::part(option-category-separator) {
+  --icon-size: 0.90625rem;
+  --icon-container-display: flex;
+  margin: 0 0.0625rem;
+}
+
+::part(more-results) {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  position: sticky;
+  bottom: 0;
+  background-color: var(--dropdown-more-results-option-background-color);
+  margin: 0.125rem 0 0 0;
+  border-radius: 0;
+  z-index: 3;
+}
+
+tet-autocomplete {
+  --options-max-height-new-style: 27.25rem;
+  width: 100%;
+}
+
+.search-container__inner-wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+@media screen and (min-width: 64rem) {
+  .search-container__inner-wrapper {
+    gap: 1rem;
+  }
+}
+.search-container__button {
+  align-self: flex-end;
+}
+.search-container__button--desktop {
+  display: none;
+}
+@media screen and (min-width: 64rem) {
+  .search-container__button--desktop {
+    display: flex;
+  }
+  .search-container__button--mobile {
+    display: none;
+  }
+}
+.search-container__input {
+  --input-border-radius: 1.375rem;
+  --input-font-size: 0.875rem;
+}
+.search-container__input.tet-input__base {
+  --input-height: 2.25rem;
+  --input-padding: 0.5rem 1rem;
+}
+@media screen and (min-width: 64rem) {
+  .search-container__input.tet-input__base {
+    --input-height: 2.75rem;
+    --input-padding: 0.75rem 1rem;
+  }
+}
+.search-container__input.tet-input__base.with-icon--left {
+  padding-left: 2.75rem;
+}
+.search-container__input.tet-input__base.with-icon--right, .search-container__input.tet-input__base.with-loader {
+  padding-right: 2.75rem;
+}
+.search-container__input ~ .icon {
+  --input-icon-color: var(--input-field-icon-color);
+  --icon-size: 1.25rem;
+  --input-icon-left-position: 1rem;
+}
+.search-container__input ~ .icon.icon-right {
+  right: 1rem;
+}
+.search-container__spinner {
+  --spinner-size: 1.25rem;
+  position: absolute;
+  right: 1rem;
+}