@tet/tet-components 1.3.146-testing → 1.3.147-production

package/dist/collection/components/views/tet-b2b-configurator/tet-b2b-configurator.css

@@ -0,0 +1,472 @@
+@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);
+}
+
+:root {
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
+  --tet-link-secondary-color: var(--tc-text-secondary);
+  --tet-link-secondary-color-hover: var(--tc-text-primary);
+}
+
+.tet-link,
+.tet-link__arrow {
+  text-decoration: underline;
+  color: var(--tet-link-color);
+  position: relative;
+  line-height: 1.5rem;
+  cursor: pointer;
+}
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+  --tet-link-secondary-color: var(--tc-text-secondary-dark);
+  --tet-link-secondary-color-hover: var(--tc-text-primary-dark);
+}
+.tet-link.tet-link--secondary,
+.tet-link__arrow.tet-link--secondary {
+  --tet-link-color: var(--tet-link-secondary-color);
+  --tet-link-color-hover: var(--tet-link-secondary-color-hover);
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  --icon-color: var(--tet-link-color);
+}
+.tet-link:hover,
+.tet-link__arrow:hover {
+  color: var(--tet-link-color-hover);
+}
+.tet-link:hover tet-icon,
+.tet-link__arrow:hover tet-icon {
+  --icon-color: var(--tet-link-color-hover);
+}
+.tet-link:active,
+.tet-link__arrow:active {
+  color: var(--tet-link-color-active);
+}
+.tet-link:active tet-icon,
+.tet-link__arrow:active tet-icon {
+  --icon-color: var(--tet-link-color-active);
+}
+.tet-link:focus-visible,
+.tet-link__arrow:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--tet-link-color-focus);
+  border-radius: 0.125rem;
+}
+.tet-link.disabled,
+.tet-link__arrow.disabled {
+  color: var(--tet-link-color-disabled);
+  pointer-events: none;
+  cursor: auto;
+}
+.tet-link.disabled tet-icon,
+.tet-link__arrow.disabled tet-icon {
+  --icon-color: var(--tet-link-color-disabled);
+}
+.tet-link.disabled:focus-visible,
+.tet-link__arrow.disabled:focus-visible {
+  outline: none;
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --icon-container-display: inline-block;
+}
+
+.tet-link__arrow {
+  padding-right: 1.5rem;
+}
+.tet-link__arrow::after {
+  content: "-->";
+  position: absolute;
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  padding-left: 0.25rem;
+  letter-spacing: initial;
+  transition: all 0.15s ease-in;
+}
+.tet-link__arrow:hover::after {
+  padding-left: 0.375rem;
+}
+
+/**
+* @prop --b2b-cart-offset-top: Intended to adjust sticky elements top position
+**/
+:host {
+  display: block;
+  --b2b-cart-offset-top: 0px;
+}
+
+.light {
+  --b2b-text-color: var(--tc-text-primary);
+  --b2b-text-color-secondary: var(--tc-text-secondary);
+  --b2b-background-color: var(--tc-layer-primary);
+  --b2b-icon-background-color: var(--tc-layer-secondary);
+  --b2b-icon-pressed-background-color: var(--tc-layer-quaternary);
+  --b2b-box-shadow: var(--tc-elevation-one);
+  --b2b-border-color: var(--tc-border-quaternary);
+  --b2b-summary-block-color: var(--tc-layer-secondary);
+  --b2b-summary-accent-color: var(--tc-yellow-20);
+  --b2b-confirmation-dialog-icon-color: var(--tc-yellow-40);
+  --b2b-success-dialog-icon-color: var(--tc-green-40);
+}
+
+.dark {
+  --b2b-text-color: var(--tc-text-primary-dark);
+  --b2b-text-color-secondary: var(--tc-text-secondary-dark);
+  --b2b-background-color: var(--tc-layer-primary-dark);
+  --b2b-icon-background-color: var(--tc-layer-secondary-dark);
+  --b2b-icon-pressed-background-color: var(--tc-layer-quaternary-dark);
+  --b2b-box-shadow: var(--tc-elevation-one-dark);
+  --b2b-border-color: var(--tc-border-quaternary-dark);
+  --b2b-summary-block-color: var(--tc-layer-secondary-dark);
+  --b2b-summary-accent-color: var(--tc-grey-20-dark);
+  --b2b-confirmation-dialog-icon-color: var(--tc-yellow-40-dark);
+  --b2b-success-dialog-icon-color: var(--tc-green-40-dark);
+}
+
+button.button-reset {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+.placeholder {
+  --placeholder-animation-speed: 5s;
+}
+
+.configurator {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  color: var(--b2b-text-color);
+}
+@media screen and (min-width: 64rem) {
+  .configurator {
+    gap: 1.5rem;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+.offer {
+  border-radius: 1rem;
+  height: fit-content;
+  flex: 0 0 calc(70% - 0.75rem);
+  background-color: var(--b2b-background-color);
+  box-shadow: var(--b2b-box-shadow);
+}
+.offer__block {
+  --accordion-header-padding: 1rem;
+  --accordion-header-mobile-padding: 1rem;
+  --accordion-header-font: 600 1.25rem/1.5rem Gilroy, Gilroy, Arial, sans-serif;
+  --accordion-header-mobile-font: 600 1.25rem/1.5rem Gilroy, Gilroy, Arial, sans-serif;
+}
+.offer__block:first-child {
+  --accordion-border-radius: 1rem 1rem 0 0;
+  --accordion-outer-border: var(--b2b-border-color);
+}
+.offer__block:last-child {
+  --accordion-border-radius: 0 0 1rem 1rem;
+  --accordion-border-bottom-width: 0;
+}
+@media screen and (min-width: 64rem) {
+  .offer__block {
+    --accordion-header-padding: 1.5rem;
+    --accordion-header-font: 600 1.75rem/2rem Gilroy, Gilroy, Arial, sans-serif;
+  }
+}
+.offer__content {
+  overflow: hidden;
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border-color: var(--b2b-border-color);
+  border-top-style: solid;
+  border-top-width: 0.0625rem;
+}
+@media screen and (min-width: 48rem) {
+  .offer__content {
+    padding: 1.5rem;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .offer__content {
+    flex-direction: row;
+    gap: 1.5rem;
+    padding-bottom: 2.5rem;
+  }
+}
+.offer__navigation {
+  margin: 0 -1.5rem;
+  flex: 0 0 30%;
+}
+@media screen and (min-width: 64rem) {
+  .offer__navigation {
+    max-width: 20.5rem;
+    margin: 0;
+  }
+}
+.offer__cards {
+  flex: 1 1 0%;
+}
+.offer__cards-header {
+  padding: 0.5rem 0 0.75rem 0;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  align-items: center;
+}
+@media screen and (min-width: 64rem) {
+  .offer__cards-header {
+    padding: 1rem 0;
+  }
+}
+.offer__cards-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.offer__cards-title {
+  flex: auto;
+  font: 600 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media screen and (min-width: 64rem) {
+  .offer__cards-title {
+    font: 600 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  }
+}
+
+.compare__button {
+  border-radius: 50%;
+  overflow: hidden;
+}
+@media screen and (min-width: 64rem) {
+  .compare__button {
+    border-radius: 0.125rem;
+  }
+}
+.compare__button:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
+.compare__button.dark:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
+.compare__button:active {
+  --b2b-icon-background-color: var(--b2b-icon-pressed-background-color);
+}
+.compare__text {
+  font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  display: none;
+}
+@media screen and (min-width: 64rem) {
+  .compare__text {
+    display: initial;
+  }
+}
+.compare__icon-wrapper {
+  width: 2.75rem;
+  height: 2.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--b2b-icon-background-color);
+  cursor: pointer;
+}
+@media screen and (min-width: 64rem) {
+  .compare__icon-wrapper {
+    display: none;
+  }
+}
+.compare__icon {
+  --icon-size: 1.5rem;
+}
+
+.cart {
+  flex: 0 0 calc(30% - 0.75rem);
+  position: sticky;
+}
+.cart--edit {
+  bottom: -1px;
+  top: calc(var(--b2b-cart-sticky-top) + var(--b2b-cart-offset-top));
+}
+.cart--empty {
+  display: none;
+}
+@media screen and (min-width: 64rem) {
+  .cart--empty {
+    display: flex;
+  }
+}
+.cart__card-list {
+  padding: 0 1rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cart__cta {
+  display: block;
+  align-self: center;
+}
+@media screen and (min-width: 48rem) {
+  .cart__cta {
+    align-self: flex-end;
+  }
+}
+
+.action-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+.action-dialog--loading {
+  --dialog-footer-border-color: transparent;
+}
+.action-dialog__title {
+  text-align: center;
+  font: 600 1.5rem/1.75rem "Gilroy", "Gilroy, Arial, sans-serif";
+}
+.action-dialog__description {
+  font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.action-dialog__icon {
+  --icon-size: 3rem;
+}
+.action-dialog__attention-icon {
+  --icon-color: var(--b2b-confirmation-dialog-icon-color);
+}
+.action-dialog__success-icon {
+  --icon-color: var(--b2b-success-dialog-icon-color);
+}
+.action-dialog__footer {
+  display: flex;
+  justify-content: space-between;
+  flex: auto;
+}
+.action-dialog__button-text {
+  white-space: nowrap;
+}