cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/assets/scss/mixins/_index.scss

@@ -0,0 +1,46 @@
+@use "../variables" as *;
+
+@forward "media-queries";
+@forward "funnel";
+@forward "results";
+
+@mixin text-gradient-dark-blue {
+  display: inline-block; /* inline-block assures gradient display across all text */
+  background-image: linear-gradient(90deg, $extra-dark-blue, $main-blue);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@mixin text-gradient-cja {
+  display: inline-block; /* inline-block assures gradient display across all text */
+  background-image: linear-gradient(90deg, $main-blue 10%, $main-green);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@mixin backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100dvh;
+  background-color: rgba(0, 0, 0, 0.4);
+  transition: all 0.4s ease-in-out;
+}
+
+@mixin fade-transition($duration: 0.6s) {
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: all $duration ease-in-out;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .fade-enter-to,
+  .fade-leave-from {
+    opacity: 1;
+  }
+}

package/dist/runtime/assets/scss/mixins/_media-queries.scss

@@ -0,0 +1,109 @@
+@use "../variables/breakpoints" as *;
+
+@mixin screen-xxs-max {
+  @media (max-width: $break-xxs-max) {
+    @content;
+  }
+}
+
+@mixin screen-xs-min {
+  @media (min-width: $break-xs-min) {
+    @content;
+  }
+}
+
+@mixin screen-xs-max {
+  @media (max-width: $break-xs-max) {
+    @content;
+  }
+}
+
+@mixin screen-xs-only {
+  @media (min-width: $break-xs-min) and (max-width: $break-xs-max) {
+    @content;
+  }
+}
+
+@mixin screen-sm-min {
+  @media (min-width: $break-sm-min) {
+    @content;
+  }
+}
+
+@mixin screen-sm-max {
+  @media (max-width: $break-sm-max) {
+    @content;
+  }
+}
+
+@mixin screen-sm-only {
+  @media (min-width: $break-sm-min) and (max-width: $break-sm-max) {
+    @content;
+  }
+}
+
+@mixin screen-md-min {
+  @media (min-width: $break-md-min) {
+    @content;
+  }
+}
+
+@mixin screen-md-max {
+  @media (max-width: $break-md-max) {
+    @content;
+  }
+}
+
+@mixin screen-md-only {
+  @media (min-width: $break-md-min) and (max-width: $break-md-max) {
+    @content;
+  }
+}
+
+@mixin screen-lg-min {
+  @media (min-width: $break-lg-min) {
+    @content;
+  }
+}
+
+@mixin screen-lg-max {
+  @media (max-width: $break-lg-max) {
+    @content;
+  }
+}
+
+@mixin screen-lg-only {
+  @media (min-width: $break-lg-min) and (max-width: $break-lg-max) {
+    @content;
+  }
+}
+
+@mixin screen-xl-min {
+  @media (min-width: $break-xl-min) {
+    @content;
+  }
+}
+
+@mixin screen-xl-max {
+  @media (max-width: $break-xl-max) {
+    @content;
+  }
+}
+
+@mixin screen-xl-only {
+  @media (min-width: $break-xl-min) and (max-width: $break-xl-max) {
+    @content;
+  }
+}
+
+@mixin screen-xxl-min {
+  @media (min-width: $break-xxl-min) {
+    @content;
+  }
+}
+
+@mixin screen-custom($min, $max) {
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}

package/dist/runtime/assets/scss/mixins/_results.scss

@@ -0,0 +1,235 @@
+@use "../variables" as *;
+@use "media-queries" as *;
+
+@mixin results-info {
+  .sidebar-product-info {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    background: $white;
+    box-shadow: $box-shadow-m;
+    overflow: hidden;
+
+    .sidebar-header {
+      display: grid;
+      grid-template-columns: 100px 1fr auto;
+      align-items: center;
+      padding: 24px;
+      gap: 20px;
+      box-shadow: $box-shadow-s;
+
+      @include screen-md-min {
+        grid-template-columns: 115px 1fr auto;
+        padding: 24px 48px;
+        gap: 48px;
+      }
+
+      .product-image {
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+
+      .product-title {
+        font-size: 13px;
+        line-height: 17px;
+      }
+
+      .btn-container button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: none;
+        width: 24px;
+        height: 24px;
+        font-size: 14px;
+        padding: 0;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+        color: $dark-blue;
+
+        &:hover {
+          color: $main-blue;
+        }
+      }
+    }
+
+    .sidebar-body {
+      padding: 24px;
+      overflow-y: auto;
+
+      @include screen-md-min {
+        padding: 24px 40px;
+      }
+
+      .product-data {
+        margin-bottom: 32px;
+
+        .title {
+          font-size: 16px;
+          font-weight: 700;
+          line-height: 20px;
+          margin-bottom: 16px;
+        }
+
+        .data-list {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 16px;
+
+          .data-group {
+            display: grid;
+            align-items: center;
+            gap: 16px;
+
+            &:not(.bordered):not(.highlight) {
+              @include screen-sm-min {
+                padding: 12px 16px;
+                border-radius: 8px;
+                border: 1px solid $light-grey;
+              }
+            }
+
+            &.bordered {
+              padding: 12px 16px;
+              border-radius: 8px;
+              border: 1px solid $light-grey;
+            }
+
+            &.highlight {
+              padding: 12px 16px;
+              border-radius: 8px;
+              background: $light-blue;
+              grid-area: 1 / 1 / 2 / 2;
+
+              .data-item {
+                .item-title {
+                  font-size: 13px;
+                  line-height: 17px;
+                }
+
+                .item-amount {
+                  font-size: 24px;
+                  font-weight: 800;
+                }
+              }
+            }
+
+            .data-item {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 4px;
+              font-size: 14px;
+              line-height: 18px;
+
+              .item-amount {
+                font-weight: 700;
+              }
+            }
+          }
+        }
+      }
+
+      .info-section {
+        + .info-section {
+          border-top: 1px solid $light-grey;
+          padding-top: 16px;
+          margin-top: 16px;
+        }
+
+        :deep(.collapse-header .header-wrapper) {
+          font-size: 16px;
+          font-weight: 700;
+          line-height: 28px;
+        }
+
+        :deep(.content-container .collapse-header .header-wrapper) {
+          color: $main-blue;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 28px;
+        }
+      }
+
+      .features-list {
+        display: grid;
+        gap: 8px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: 4px 16px;
+
+          .icon {
+            font-size: 16px;
+            line-height: 21px;
+
+            &.m-cgg-icon--check {
+              color: $main-green;
+            }
+
+            &.m-cgg-icon--cross {
+              color: $alert-red;
+            }
+          }
+
+          .text {
+            color: text-grey;
+            font-size: 14px;
+            line-height: 21px;
+          }
+        }
+      }
+
+      .info-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          display: flex;
+          justify-content: space-between;
+          gap: 16px;
+          font-size: 14px;
+          line-height: 28px;
+          padding-top: 8px;
+          border-top: 1px solid $disabled-grey;
+
+          .item-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .m-cgg-icon--question {
+              color: $main-blue;
+            }
+          }
+
+          .item-amount {
+            font-weight: 700;
+          }
+        }
+      }
+    }
+
+    .sidebar-footer {
+      display: grid;
+      padding: 24px;
+      box-shadow: $box-shadow-s;
+
+      @include screen-xs-min {
+        justify-content: center;
+        grid-template-columns: 200px;
+      }
+    }
+  }
+}

package/dist/runtime/assets/scss/tippy.scss

@@ -0,0 +1,31 @@
+@use "variables" as *;
+
+.tippy-box {
+  &[data-theme~="cja"] {
+    background: $light-blue;
+    border: 1px solid $main-blue;
+    color: $main-blue;
+
+    @each $position in (top, bottom, left, right) {
+      &[data-placement="#{$position}"] > .tippy-arrow::before {
+        border-#{$position}-color: $light-blue;
+      }
+    }
+  }
+
+  &[data-theme~="white"] {
+    background: $white;
+    border: 1px solid $extra-dark-blue;
+    color: $extra-dark-blue;
+
+    @each $position in (top, bottom, left, right) {
+      &[data-placement="#{$position}"] > .tippy-arrow::before {
+        border-#{$position}-color: $white;
+      }
+    }
+  }
+
+  ul {
+    padding-left: 16px;
+  }
+}

package/dist/runtime/assets/scss/variables/_breakpoints.scss

@@ -0,0 +1,18 @@
+$break-xxs-max: 419px;
+
+$break-xs-min: 420px;
+$break-xs-max: 559px;
+
+$break-sm-min: 560px;
+$break-sm-max: 767px;
+
+$break-md-min: 768px;
+$break-md-max: 1023px;
+
+$break-lg-min: 1024px;
+$break-lg-max: 1199px;
+
+$break-xl-min: 1200px;
+$break-xl-max: 1439px;
+
+$break-xxl-min: 1440px;

package/dist/runtime/assets/scss/variables/_colors.scss

@@ -0,0 +1,100 @@
+$extra-light-blue: #f4f9fc;
+$light-blue: #e6f1f9;
+$medium-blue: #9bc6e7;
+$bright-blue: #5fbbff;
+$main-blue: #076b9c;
+$dark-blue: #155072;
+$extra-dark-blue: #0d2745;
+
+$extra-light-green: #f3f7ef;
+$light-green: #eef4e8;
+$bright-green: #b5e187;
+$main-green: #77aa43;
+$dark-green: #56924b;
+$extra-dark-green: #0f4209;
+
+$bright-orange: #f9b377;
+$light-orange: #fdf1e2;
+$main-orange: #f58423;
+$dark-orange: #e36f09;
+$extra-dark-orange: #cf5b00;
+
+$light-yellow: #fff9e6;
+$main-yellow: #facb1a;
+
+$light-purple: #f0f2ff;
+$medium-purple: #cfd5ff;
+$main-purple: #4054de;
+
+$light-turquoise: #eefafa;
+
+$dark-grey: #979290;
+$text-grey: #312f2e;
+$blue-grey: #9fabbc;
+
+$light-grey: #dedede;
+$dark-white: #fafafa;
+$disabled-grey: #f1f5f9;
+
+$white: #ffffff;
+$black: #000000;
+
+$alert-blue: #076b9c;
+$alert-green: #56924b;
+$alert-yellow: #e98c00;
+$alert-red: #ef4444;
+
+$alert-bg-blue: #e6f1f9;
+$alert-bg-green: #f2f7ec;
+$alert-bg-yellow: #fff9e6;
+$alert-bg-red: #fef2f2;
+
+$gradient-hl: linear-gradient(75deg, #f1f7ee, $white);
+$gradient-pl: linear-gradient(75deg, #f4f9fc, $white);
+$gradient-in: linear-gradient(75deg, #f6f4ff, $white);
+$gradient-en: linear-gradient(75deg, #fffbef, $white);
+$gradient-bb: linear-gradient(75deg, #fff7f1, $white);
+$gradient-cc: linear-gradient(75deg, #fff4ff, $white);
+$gradient-sa: linear-gradient(75deg, #e8f1f1, $white);
+$gradient-cja-1: linear-gradient(90deg, $bright-green 2.5%, $main-blue 100%);
+
+$colors: (
+  "white": $white,
+  "dark-white": $dark-white,
+  "disabled-grey": $disabled-grey,
+  "black": $black,
+  "extra-dark-blue": $extra-dark-blue,
+  "dark-blue": $dark-blue,
+  "main-blue": $main-blue,
+  "medium-blue": $medium-blue,
+  "bright-blue": $bright-blue,
+  "light-blue": $light-blue,
+  "extra-light-blue": $extra-light-blue,
+  "extra-dark-green": $extra-dark-green,
+  "dark-green": $dark-green,
+  "main-green": $main-green,
+  "bright-green": $bright-green,
+  "light-green": $light-green,
+  "extra-light-green": $extra-light-green,
+  "extra-dark-orange": $extra-dark-orange,
+  "dark-orange": $dark-orange,
+  "main-orange": $main-orange,
+  "bright-orange": $bright-orange,
+  "light-orange": $light-orange,
+  "main-yellow": $main-yellow,
+  "light-yellow": $light-yellow,
+  "main-purple": $main-purple,
+  "medium-purple": $medium-purple,
+  "light-purple": $light-purple,
+  "light-turquoise": $light-turquoise,
+);
+
+$gradients: (
+  "hl": $gradient-hl,
+  "pl": $gradient-pl,
+  "in": $gradient-in,
+  "en": $gradient-en,
+  "bb": $gradient-bb,
+  "cc": $gradient-cc,
+  "sa": $gradient-sa,
+);

package/dist/runtime/assets/scss/variables/_forms.scss

@@ -0,0 +1,121 @@
+@use "sass:map";
+@use "colors" as *;
+
+$input-border-color: $light-grey;
+$input-border: 1px solid $input-border-color;
+$input-border-focus-color: $main-blue;
+$input-border-focus: 1px solid $input-border-focus-color;
+$input-border-error-color: $alert-red;
+$input-border-error: 1px solid $input-border-error-color;
+$input-border-radius: 8px;
+$input-transition: all 0.1s ease-in;
+$input-placeholder-color: $dark-grey;
+$input-disabled-color: $light-grey;
+
+$sm-padding-v: 8px;
+$sm-padding-h: 10px;
+$sm-font-size: 14px;
+$sm-line-height: 18px;
+$sm-height: 36px;
+
+$md-padding-v: 12px;
+$md-padding-h: 12px;
+$md-font-size: 16px;
+$md-line-height: 18px;
+$md-height: 44px;
+
+$lg-padding-v: 16px;
+$lg-padding-h: 18px;
+$lg-font-size: 18px;
+$lg-line-height: 22px;
+$lg-height: 56px;
+
+$input-sizes: (
+  "sm": (
+    padding-v: $sm-padding-v,
+    padding-h: $sm-padding-h,
+    font-size: $sm-font-size,
+    line-height: $sm-line-height,
+    height: $sm-height,
+  ),
+  "md": (
+    padding-v: $md-padding-v,
+    padding-h: $md-padding-h,
+    font-size: $md-font-size,
+    line-height: $md-line-height,
+    height: $md-height,
+  ),
+  "lg": (
+    padding-v: $lg-padding-v,
+    padding-h: $lg-padding-h,
+    font-size: $lg-font-size,
+    line-height: $lg-line-height,
+    height: $lg-height,
+  ),
+);
+
+@mixin input-template {
+  background-color: $white;
+  width: 100%;
+  outline: none;
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  transition: $input-transition;
+
+  &::placeholder {
+    color: $input-placeholder-color;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    border-color: $input-border-focus-color;
+    outline: none;
+  }
+
+  &:disabled,
+  &:disabled::placeholder {
+    color: $input-disabled-color;
+  }
+
+  @each $size-name, $size in $input-sizes {
+    &.size-#{$size-name} {
+      padding: map.get($size, padding-v) map.get($size, padding-h);
+      font-size: map.get($size, font-size);
+      line-height: map.get($size, line-height);
+
+      &:not(textarea) {
+        height: map.get($size, height);
+      }
+    }
+  }
+}
+
+@mixin input-error {
+  border-color: $input-border-error-color;
+}
+
+$sm-title-font-size: 14px;
+$sm-title-line-height: 18px;
+
+$md-title-font-size: 16px;
+$md-title-line-height: 20px;
+
+$lg-title-font-size: 18px;
+$lg-title-line-height: 22px;
+
+@mixin input-title {
+  &.size-sm {
+    font-size: $sm-title-font-size;
+    line-height: $sm-title-line-height;
+  }
+
+  &.size-md {
+    font-size: $md-title-font-size;
+    line-height: $md-title-line-height;
+  }
+
+  &.size-lg {
+    font-size: $lg-title-font-size;
+    line-height: $lg-title-line-height;
+  }
+}

package/dist/runtime/assets/scss/variables/_grid.scss

@@ -0,0 +1,12 @@
+$grid-columns-lg: repeat(12, 1fr);
+$grid-column-gap-lg: 24px;
+$grid-side-padding-lg: 32px;
+$grid-side-padding-xl: 64px;
+
+$grid-columns-md: repeat(4, 1fr);
+$grid-column-gap-md: 24px;
+$grid-side-padding-md: 40px;
+
+$grid-columns-sm: repeat(2, 1fr);
+$grid-column-gap-sm: 16px;
+$grid-side-padding-sm: 24px;

package/dist/runtime/assets/scss/variables/_index.scss

@@ -0,0 +1,6 @@
+@forward "grid";
+@forward "colors";
+@forward "z-index";
+@forward "breakpoints";
+@forward "forms";
+@forward "shadows";

package/dist/runtime/assets/scss/variables/_shadows.scss

@@ -0,0 +1,7 @@
+$box-shadow-s: 0px 2px 10px rgba(0, 0, 0, 0.1);
+$box-shadow-s-dark: 0px 2px 10px rgba(0, 0, 0, 0.15);
+$box-shadow-s-inner-bottom: inset 0px -22px 20px -20px rgba(0, 0, 0, 0.1);
+$box-shadow-m: 0px 4px 20px rgba(0, 0, 0, 0.1);
+$box-shadow-m-dark: 0px 4px 20px rgba(0, 0, 0, 0.15);
+$box-shadow-m-inner-bottom: inset 0px -24px 20px -20px rgba(0, 0, 0, 0.1);
+$box-shadow-l: 0px 4px 40px rgba(0, 0, 0, 0.15);

package/dist/runtime/assets/scss/variables/_z-index.scss

@@ -0,0 +1,6 @@
+$level-over-content: 100;
+$level-drawer: 200;
+$level-navbar: 300;
+$level-modal: 400;
+$level-select: 500;
+$level-toast: 600;