@colijnit/configurator 262.1.9 → 262.1.10

package/lib/components/product-configurator-repeat-buttons/style/_theme.scss

@@ -0,0 +1,24 @@
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-repeat-buttons-theme') {
+  .co-product-configurator-repeat-buttons {
+    .button-container {
+      .repeat-button-container, .delete-button-container {
+        .co-button {
+          font-size: var(--co-configurator-font-size-small);
+          background: none;
+          border: 1px solid var(--co-configurator-text-color);
+          color: var(--co-configurator-text-color);
+          font-weight: var(--co-configurator-font-weight-bold);
+
+          .co-icon {
+            svg {
+              path {
+                fill: var(--co-configurator-text-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/product-configurator-repeat-buttons/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/product-configurator-selector/style/_layout.scss

@@ -1,10 +1,12 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-product-configurator-selector-layout') {
   .co-product-configurator-selector {
     .selector-container {
-      margin: 0 auto;
+      margin: 0 auto 15px;
       box-sizing: border-box;
       padding: 0;
+      position: relative;
 
       .selector-container-header {
         display: flex;
@@ -42,6 +44,17 @@
           font-weight: lighter;
         }
       }
+
+      .input-marker {
+        position: absolute;
+        top: 40px;
+        z-index: 25;
+        left: 0;
+        .co-icon {
+          transform-origin: top center;
+          animation: bell-ring 1.2s ease-in-out infinite;
+        }
+      }
     }
 
     .selector-wrapper {
@@ -89,9 +102,11 @@
         box-sizing: border-box;
       }
     }
+
     // container for the displayOption SmallCircle and SmallSquare
     .selection-container-03, .selection-container-04 {
       grid-template-columns: repeat(auto-fill, minmax(50px, .5fr));
+
       .selector-option-wrapper {
         padding: 5px;
         align-items: center;
@@ -99,19 +114,23 @@
         background: none;
         border: none;
         box-sizing: border-box;
+
         .product-configurator-selector-option-tile-description {
           display: none;
         }
       }
     }
+
     .selection-container-03 {
       .selector-option-wrapper {
         border-radius: 100%;
+
         &.active {
           box-shadow: none;
         }
       }
     }
+
     // container for the displayOption small tile
     .selection-container-06 {
       grid-template-columns: repeat(auto-fill, minmax(70px, .5fr));
@@ -153,17 +172,31 @@
 
     .show-more-container {
       text-align: right;
+      cursor: pointer;
 
       span {
-        cursor: pointer;
-
         .show-more-text-link {
           margin-right: 5px;
         }
       }
     }
+
     &.hidden-frontend {
       display: none;
     }
   }
 }
+
+@keyframes bell-ring {
+  0%, 50%, 100% {
+    transform: rotate(0deg);
+  }
+
+  5%, 15%, 25%, 35%, 45% {
+    transform: rotate(14deg);
+  }
+
+  10%, 20%, 30%, 40% {
+    transform: rotate(-14deg);
+  }
+}

package/lib/components/product-configurator-selector/style/_theme.scss

@@ -1,53 +1,69 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-product-configurator-selector-theme') {
   .co-product-configurator-selector {
     .selector-container {
       background-color: #fff;
+
       .selector-container-header {
         .exception-icon {
           co-icon {
-            fill: var(--error-color);
+            fill: var(--co-configurator-error-color);
           }
         }
 
         .selector-option-header {
-          font-size: var(--font-size-normal);
-          font-weight: var(--font-weight-bold);
+          font-size: var(--co-configurator-font-size-normal);
+          font-weight: var(--co-configurator-font-weight-bold);
         }
 
         .selector-option-sub-header {
-          font-size: var(--font-size-small);
-          font-weight: var(--font-weight-normal);
+          font-size: var(--co-configurator-font-size-small);
+          font-weight: var(--co-configurator-font-weight-normal);
         }
 
         .selector-option-bold-text-header {
-          font-size: var(--font-size-normal);
+          font-size: var(--co-configurator-font-size-normal);
         }
 
         .selector-option-text-header {
-          font-size: var(--font-size-normal);
+          font-size: var(--co-configurator-font-size-normal);
         }
       }
     }
 
     .selector-wrapper {
       .selector-option-wrapper {
-        border: 2px solid var(--border-color);
-        border-radius: var(--default-border-radius);
-        background-color: var(--tile-background-color);
-        font-size: var(--font-size-normal);
-        padding: var(--default-padding);
+        border: 2px solid var(--co-configurator-border-color);
+        border-radius: var(--co-configurator-default-border-radius);
+        background-color: var(--co-configurator-tile-background-color);
+        font-size: var(--co-configurator-font-size-normal);
+        padding: var(--co-configurator-default-padding);
+
         &.active {
-          border: 2px solid var(--border-color-active);
+          border: 2px solid var(--co-configurator-border-color-active);
+        }
+
+        &.exception {
+          border: 2px solid var(--co-configurator-error-color);
+          &:hover {
+            border: 2px solid var(--co-configurator-error-color);
+          }
+        }
+
+        &:hover {
+          border: 2px solid var(--co-configurator-border-color-active);
         }
       }
+
       &.selection-container-03, &.selection-container-08 {
         .selector-option-wrapper {
           &.active {
-            border-radius: var(--circle-border-radius);
+            border-radius: var(--co-configurator-circle-border-radius);
           }
         }
       }
+
       &.selection-container-08 {
         .selector-option-wrapper {
           border: none;
@@ -56,18 +72,21 @@
     }
 
     .selection-exception {
-      border: 1px solid var(--error-color);
-      border-radius: var(--default-border-radius);
+      border: 1px solid var(--co-configurator-error-color);
+      border-radius: var(--co-configurator-default-border-radius);
     }
 
     .show-more-container {
-      span {
-        font-size: var(--font-size-small);
-        color: var(--load-more-link-color);
-        &:hover {
-          text-decoration: underline;
-        }
+      color: var(--co-configurator-load-more-link-color);
+      font-size: var(--co-configurator-font-size-small);
+
+      &:hover {
+        text-decoration: underline;
       }
     }
   }
+
+  .hide-from-selector {
+    display: none;
+  }
 }

package/lib/components/product-configurator-selector-child-article/style/_layout.scss

@@ -0,0 +1,40 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-selector-child-article-layout') {
+  .co-product-configurator-selector-child-article {
+    .product-configurator-selector-child-article-container-body {
+      position: fixed;
+      box-sizing: border-box;
+      z-index: 1000;
+
+      max-height: var(--co-configurator-container-max-height);
+      top: var(--co-configurator-container-top);
+      padding: var(--co-configurator-container-padding);
+
+      right: calc(-1 * var(--co-configurator-container-width));; // Go out of view
+      width: var(--co-configurator-container-width);
+      overflow: hidden;
+      transition: right .5s ease;
+
+      .product-configurator-selector-slideout-header {
+
+        .product-configurator-selector-slideout-close {
+          .co-button {
+            cursor: pointer;
+            background: none;
+            padding: 0;
+
+            .co-icon {
+              height: var(--co-configurator-small-icon-height);
+              width: var(--co-configurator-small-icon-width);
+            }
+          }
+        }
+      }
+    }
+
+    .show-slide-out {
+      right: var(--co-configurator-container-right);
+    }
+  }
+}

package/lib/components/product-configurator-selector-child-article/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+
+}

package/lib/components/product-configurator-selector-child-article/style/_theme.scss

@@ -0,0 +1,29 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-selector-child-article-theme') {
+  .co-product-configurator-selector-child-article {
+    .product-configurator-selector-child-article-container-body {
+      background: var(--co-configurator-container-background);
+      border-radius: var(--co-configurator-container-border-radius);
+
+      .product-configurator-selector-slideout-header {
+        .slideout-head {
+          font-size: var(--co-configurator-font-size-large);
+          font-weight: var(--co-configurator-font-weight-bold);
+        }
+
+        .product-configurator-selector-slideout-close {
+          .co-button {
+            font-size: var(--co-configurator-font-size-small);
+            color: var(--co-configurator-text-color);
+
+            .co-icon {
+              height: var(--co-configurator-small-icon-height);
+              width: var(--co-configurator-small-icon-width);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/product-configurator-selector-child-article/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/product-configurator-selector-option/style/_theme.scss

@@ -1,6 +1,23 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-product-configurator-selector-option-theme') {
-  .co-product-configurator-selector-option {
+  .co-product-configurator-selector-new-option {
+    display: block;
+    padding: 5px;
+    margin: 5px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    animation: new-item-pulse 2.5s ease-in-out infinite;
+  }
 
+  @keyframes new-item-pulse {
+    0%, 100% {
+      box-shadow: 0 0 0 0 rgba(24, 95, 165, 0.0);
+      background-color: transparent;
+    }
+    50% {
+      box-shadow: 0 0 0 4px rgba(24, 95, 165, 0.2);
+      background-color: rgba(24, 95, 165, 0.08);
+    }
   }
 }

package/lib/components/product-configurator-selector-option-button/style/_theme.scss

@@ -3,11 +3,11 @@
   .co-product-configurator-selector-option-button {
     .configurator-selector-option-button-container {
       .product-configurator-selector-option-button-checkmark {
-        fill: var(--checked-icon-color);
+        fill: var(--co-configurator-checked-icon-color);
 
         co-icon {
-          width: var(--xs-icon-width);
-          height: var(--xs-icon-height);
+          width: var(--co-configurator-xs-icon-width);
+          height: var(--co-configurator-xs-icon-height);
           background: rgba(255, 255, 255, 0.5);
           border-radius: 50%;
         }
@@ -15,7 +15,7 @@
 
       .product-configurator-selector-option-button-image {
         img {
-          border-radius: var(--default-border-radius);
+          border-radius: var(--co-configurator-default-border-radius);
         }
       }
 
@@ -23,7 +23,7 @@
         text-align: center;
 
         p {
-          font-size: var(--font-size-small);
+          font-size: var(--co-configurator-font-size-small);
           margin: 0;
         }
       }

package/lib/components/product-configurator-selector-option-checkbox/style/_theme.scss

@@ -3,25 +3,25 @@
   .co-product-configurator-option-checkbox {
     .configurator-option-checkbox-container {
       .product-configurator-checkbox-checkmark {
-        height: var(--big-icon-height);
-        width: var(--big-icon-width);
+        height: var(--co-configurator-big-icon-height);
+        width: var(--co-configurator-big-icon-width);
 
         .product-configurator-checkbox-select {
-          height: var(--big-icon-height);
-          width: var(--big-icon-width);
+          height: var(--co-configurator-big-icon-height);
+          width: var(--co-configurator-big-icon-width);
         }
 
         .product-configurator-checkbox-selected {
-          background: var(--checked-icon-background);
-          fill: var(--checked-icon-color);
-          padding: var(--checked-icon-padding);
-          border-radius: var(--checked-selected-icon-radius);
+          background: var(--co-configurator-checked-icon-background);
+          fill: var(--co-configurator-checked-icon-color);
+          padding: var(--co-configurator-checked-icon-padding);
+          border-radius: var(--co-configurator-checked-selected-icon-radius);
         }
       }
 
       .product-configurator-checkbox-description {
         p {
-          font-size: var(--font-size-small);
+          font-size: var(--co-configurator-font-size-small);
         }
       }
     }

package/lib/components/product-configurator-selector-option-dropdown/style/_theme.scss

@@ -15,8 +15,8 @@
       }
       .product-configurator-selector-option-dropdown-select {
         transform: translateY(-50%);
-        width: var(--xs-icon-width);
-        height: var(--xs-icon-height);
+        width: var(--co-configurator-xs-icon-width);
+        height: var(--co-configurator-xs-icon-height);
         svg {
           fill: #ccc;
         }

package/lib/components/product-configurator-selector-option-tile/style/_layout.scss

@@ -7,7 +7,7 @@
       flex-direction: column;
       align-items: center;
 
-      .product-configurator-selector-option-tile-checkmark {
+      .product-configurator-selector-option-tile-checkmark, .product-configurator-selector-option-tile-configurable {
         position: absolute;
         top: -7px;
         right: -7px;

package/lib/components/product-configurator-selector-option-tile/style/_theme.scss

@@ -1,30 +1,41 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-product-configurator-selector-option-tile-theme') {
   .co-product-configurator-selector-option-tile {
     .configurator-selector-option-tile-container {
-      .product-configurator-selector-option-tile-checkmark {
-
-        fill: var(--checked-icon-color);
-        height: var(--big-icon-height);
-        width: var(--big-icon-width);
-        background: var(--checked-icon-background);
-        border-radius: var(--checked-icon-radius);
-
-        co-icon {
-          width: var(--big-icon-width);
-          height: var(--big-icon-height);
-          padding: var(--checked-icon-padding);
+      .product-configurator-selector-option-tile-checkmark, .product-configurator-selector-option-tile-configurable {
+        fill: var(--co-configurator-checked-icon-color);
+        height: var(--co-configurator-big-icon-height);
+        width: var(--co-configurator-big-icon-width);
+        background: var(--co-configurator-checked-icon-background);
+        border-radius: var(--co-configurator-checked-icon-radius);
+        transition: all 0.3s;
+
+        .co-icon {
+          width: var(--co-configurator-big-icon-width);
+          height: var(--co-configurator-big-icon-height);
+          padding: var(--co-configurator-checked-icon-padding);
+          transition: all 0.5s;
+          svg {
+            path {
+              fill: var(--co-configurator-checked-icon-color);
+            }
+          }
         }
       }
 
+      .exception {
+        background: var(--co-configurator-error-color);
+      }
+
       .product-configurator-selector-option-tile-image {
         img {
-          border-radius: var(--default-border-radius);
+          border-radius: var(--co-configurator-default-border-radius);
         }
 
-        co-icon {
-          width: var(--big-icon-width);
-          height: var(--big-icon-height);
+        .co-icon {
+          width: var(--co-configurator-big-icon-width);
+          height: var(--co-configurator-big-icon-height);
           background: rgba(255, 255, 255, 0.5);
           border-radius: 50%;
         }
@@ -32,8 +43,9 @@
 
       .product-configurator-selector-option-tile-description {
         text-align: center;
+
         p {
-          font-size: var(--font-size-small);
+          font-size: var(--co-configurator-font-size-small);
         }
       }
 
@@ -48,33 +60,52 @@
 
       &.configurator-selector-option-tile-container-small-rounded, &.configurator-selector-option-tile-container-rounded {
         .product-configurator-selector-option-tile-checkmark {
-          border-radius: var(--circle-border-radius);
+          border-radius: var(--co-configurator-circle-border-radius);
         }
       }
 
       &.configurator-selector-option-tile-container-small {
         .product-configurator-selector-option-tile-description {
-          font-size: var(--font-size-small);
+          font-size: var(--co-configurator-font-size-small);
         }
       }
+
       &.configurator-selector-option-tile-container-rounded {
         .product-configurator-selector-option-tile-image {
           aspect-ratio: 1/1;
+
           img {
             height: 100%;
             max-height: 100%;
             object-fit: contain;
-            padding: var(--default-padding);
+            padding: var(--co-configurator-default-padding);
           }
         }
+
         &.active {
           .product-configurator-selector-option-tile-image {
             img {
-              border: 2px solid var(--border-color-active);
+              border: 2px solid var(--co-configurator-border-color-active);
               box-shadow: none;
             }
           }
         }
+
+        &.hidden {
+          display: none;
+        }
+      }
+
+      &:hover {
+        .product-configurator-selector-option-tile-configurable {
+          height: calc(var(--co-configurator-big-icon-height) * 1.2);
+          width: calc(var(--co-configurator-big-icon-width) * 1.2);
+
+          .co-icon {
+            width: calc(var(--co-configurator-big-icon-width) * 1.2);
+            height: calc(var(--co-configurator-big-icon-height) * 1.2);
+          }
+        }
       }
     }
   }

package/lib/components/product-configurator-slideout/style/_layout.scss

@@ -0,0 +1,38 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-slideout-layout') {
+  .co-product-configurator-slideout {
+    .product-configurator-slideout-body {
+      position: fixed;
+      box-sizing: border-box;
+      z-index: 1000;
+      max-height: var(--co-configurator-container-max-height);
+      top: var(--co-configurator-container-top);
+      padding: var(--co-configurator-container-padding);
+      right: calc(-1 * var(--co-configurator-container-width));; // Go out of view
+      width: var(--co-configurator-container-width);
+      overflow-y: scroll;
+      overflow-x: hidden;
+      transition: right .5s ease;
+
+      .product-configurator-selector-slideout-header {
+
+        .product-configurator-selector-slideout-close {
+          .co-button {
+            cursor: pointer;
+            padding: 0;
+
+            .co-icon {
+              height: var(--co-configurator-small-icon-height);
+              width: var(--co-configurator-small-icon-width);
+            }
+          }
+        }
+      }
+    }
+
+    .show-slide-out {
+      right: var(--co-configurator-container-right);
+    }
+  }
+}

package/lib/components/product-configurator-slideout/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+
+}

package/lib/components/product-configurator-slideout/style/_theme.scss

@@ -0,0 +1,30 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-slideout-theme') {
+  .co-product-configurator-slideout {
+    .product-configurator-slideout-body {
+      background: var(--co-configurator-container-background);
+      border-radius: var(--co-configurator-container-border-radius);
+
+      .product-configurator-selector-slideout-header {
+        .slideout-head {
+          font-size: var(--co-configurator-font-size-large);
+          font-weight: var(--co-configurator-font-weight-bold);
+        }
+
+        .product-configurator-selector-slideout-close {
+          .co-button {
+            background: none;
+            font-size: var(--co-configurator-font-size-small);
+            color: var(--co-configurator-text-color);
+
+            .co-icon {
+              height: var(--co-configurator-small-icon-height);
+              width: var(--co-configurator-small-icon-width);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/product-configurator-slideout/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/summary-line/style/_theme.scss

@@ -2,13 +2,13 @@
 @include cfg.export-module('co-summary-line-theme') {
   .co-summary-line {
     cursor: pointer;
-    background-color: var(--white-text-color);
+    background-color: var(--co-configurator-white-text-color);
     box-shadow: 0 0 2px 0 rgba(72, 79, 96, .25);
     .titles {
-      font-size: var(--font-size-normal);
+      font-size: var(--co-configurator-font-size-normal);
       label {
         flex-shrink: 0;
-        font-size: var(--font-size-small);
+        font-size: var(--co-configurator-font-size-small);
         font-style: italic;
         line-height: 200%;
         color: var(--summary-line-color-color);
@@ -16,13 +16,13 @@
     }
 
     .selection-price {
-      font-size:var(--font-size-small);
+      font-size:var(--co-configurator-font-size-small);
       font-style: italic;
     }
 
     .total-price {
-      background: var(--white-text-color);
-      font-size: var(--font-size-normal);
+      background: var(--co-configurator-white-text-color);
+      font-size: var(--co-configurator-font-size-normal);
       font-weight: bold;
       white-space: nowrap;
     }