@colijnit/configurator 262.1.8 → 262.1.10

package/lib/components/answer-info-dialog/style/_theme.scss

@@ -6,7 +6,7 @@
 
       .info-text {
         color: #FFF;
-        font-size: var(--font-size-small);
+        font-size: var(--co-configurator-font-size-small);
       }
     }
 
@@ -29,11 +29,11 @@
           font-weight: bold;
           p {
             font-weight: normal;
-            font-size: var(--font-size-normal);
+            font-size: var(--co-configurator-font-size-normal);
 
             &.info-heading {
               font-weight: 600;
-              font-size: var(--font-size-medium);
+              font-size: var(--co-configurator-\font-size-medium);
             }
           }
         }

package/lib/components/answers-slideout/style/_layout.scss

@@ -74,15 +74,6 @@
       line-height: 40px;
     }
 
-    .search-wrapper {
-      display: flex;
-      z-index: 2;
-      position: absolute;
-      top: .3em;
-      width: 98%;
-      padding-left: .3em;
-      padding-right: .3em;
-    }
 
     .text-chips {
       width: 100%;
@@ -107,7 +98,16 @@
         display: flex;
         align-items: center;
         gap: 5px;
-        margin-bottom: 30px;
+      }
+      .search-wrapper {
+        margin-bottom: 15px;
+        display: flex;
+        justify-content: space-between;
+        .co-button {
+          margin-left: 5px;
+          background: none;
+          cursor: pointer;
+        }
       }
     }
 

package/lib/components/configuration-preset/style/_layout.scss

@@ -20,7 +20,7 @@
     }
 
     .save-load-configuration-buttons {
-      background: var(--configutator-dialog-background);
+      background: var(--co-configurator-dialog-background);
       position: absolute;
       top: 100%;
       right: 0;

package/lib/components/configuration-preset/style/_theme.scss

@@ -5,11 +5,11 @@
       box-shadow: 1px 1px 4px 1px rgba(151, 146, 132, 0.3);
       padding: 5px;
       .preset-button {
-        color: var(--link-text-color);
+        color: var(--co-configurator-link-text-color);
         .co-icon {
           svg {
             path {
-              fill: var(--link-text-color);
+              fill: var(--co-configurator-link-text-color);
             }
           }
         }

package/lib/components/configuration-preset-dialog/style/_theme.scss

@@ -4,11 +4,11 @@
   .co-configuration-preset-dialog {
     .configuration-preset-dialog {
       .configuration-preset-dialog-backdrop {
-        background: var(--configurator-dialog-backdrop);
+        background: var(--co-configurator-dialog-backdrop);
       }
 
       .configuration-preset-dialog-container {
-        background-color: var(--configutator-dialog-background);
+        background-color: var(--co-configurator-dialog-background);
 
         .configuration-preset-dialog-container-header {
           border-bottom: 1px solid var(--configutator-dialog-header-border-color);
@@ -16,13 +16,13 @@
 
         .configuration-preset-dialog-container-body {
           .validation-error {
-            font-size: var(--font-size-small);
+            font-size: var(--co-configurator-font-size-small);
           }
 
           .save-success {
-            color: var(--success-text-color);
-            background-color: var(--success-background-color);
-            border: 1px solid var(--success-border-color);
+            color: var(--co-configurator-success-text-color);
+            background-color: var(--co-configurator-success-background-color);
+            border: 1px solid var(--co-configurator-success-border-color);
 
             .save-success-text {
               text-align: center;
@@ -43,7 +43,7 @@
 
           .button-as-link {
             background: none;
-            color: var(--text-color);
+            color: var(--co-configurator-text-color);
             text-decoration: underline;
           }
         }

package/lib/components/configurator-dialog/style/_theme.scss

@@ -10,7 +10,7 @@
 
         h2 {
           margin: 0;
-          font-size: var(--font-size-medium);
+          font-size: var(--co-configurator-\font-size-medium);
         }
 
         .close-button {
@@ -36,10 +36,10 @@
         .export-options-list {
           .export-option {
             h4 {
-              font-size: var(--font-size-medium);
+              font-size: var(--co-configurator-\font-size-medium);
             }
             p {
-              font-size: var(--font-size-small);
+              font-size: var(--co-configurator-font-size-small);
             }
             &:hover {
               background-color: var(--hover-background-color);
@@ -51,7 +51,7 @@
       &-body {
         .camera-setting-option {
           p {
-            font-size: var(--font-size-normal);
+            font-size: var(--co-configurator-font-size-normal);
             font-weight: bold;
           }
           input {
@@ -60,7 +60,7 @@
         }
         .save-option-button {
           &:hover {
-            color: var(--text-color-hover);
+            color: var(--co-configurator-text-color-hover);
           }
         }
       }

package/lib/components/configurator-scene/style/_layout.scss

@@ -4,6 +4,7 @@
     display: block;
     width: 100%;
     height: 100%;
+    overflow: hidden;
     .configurator-scene-wrapper {
       position: relative;
       width: 100%;

package/lib/components/element-buttons/style/_layout.scss

@@ -1,4 +1,5 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-element-buttons-layout') {
   .co-element-buttons {
     pointer-events: all;
@@ -23,17 +24,16 @@
       cursor: pointer;
       flex-shrink: 0;
       position: absolute;
-      min-height: 30px;
-      min-width: 30px;
-      height: 35px;
-      width: 35px;
-      max-height: 30px;
-      max-width: 30px;
+      height: var(--co-configurator-element-add-button-height);
+      width: var(--co-configurator-element-add-button-width);
       transform: translate(-15px, -15px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-      ::ng-deep co-icon {
-        width: 16px;
-        height: 16px;
+      .co-icon {
+        width: var(--co-configurator-element-add-button-icon-width);
+        height: var(--co-configurator-element-add-button-icon-height);
       }
     }
 
@@ -44,11 +44,11 @@
       height: 10px;
       width: 10px;
       cursor: default;
-
       transform: translate(-5px, -5px);
     }
+
     &.animate {
-      ::ng-deep .element-add-button {
+      .element-add-button {
         animation-name: pulse-add-buttons;
         animation-duration: 400ms;
         animation-iteration-count: 6;
@@ -57,8 +57,9 @@
     }
   }
 }
+
 @keyframes pulse-add-buttons {
   50% {
-    box-shadow: 0 0 20px hsl(12, 100%, 60%);
+    box-shadow: 0 0 20px var(--co-configurator-element-add-button-animation-color);
   }
 }

package/lib/components/element-buttons/style/_material-definition.scss

@@ -1,3 +1,12 @@
 :root {
+  --co-configurator-element-add-button-icon-height: 16px;
+  --co-configurator-element-add-button-icon-width: 16px;
+  --co-configurator-element-add-button-height: 30px;
+  --co-configurator-element-add-button-width: 30px;
+  --co-configurator-element-add-button-outline: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
+  --co-configurator-element-add-button-background: rgba(0, 0, 0, 0.3);
+  --co-configurator-element-add-button-background-hover: rgba(0, 0, 0, 0.5);
+  --co-configurator-element-add-button-shadow: 0 0 0 5px rgb(0 0 0 / 7%);
 
+  --co-configurator-element-add-button-animation-color: hsl(12, 100%, 60%);
 }

package/lib/components/element-buttons/style/_theme.scss

@@ -1,20 +1,28 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-element-buttons-theme') {
   .co-element-buttons {
 
     .add-button-label {
-      color: white;
-      text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
+      color: var(--co-configurator-white-text-color);
+      text-shadow: var(--co-configurator-element-add-button-outline);
     }
+
     .element-add-button {
-      background: #17253391;
-      box-shadow: 0 0 0 5px rgb(0 0 0 / 7%);
-      ::ng-deep co-icon {
-        svg {
-          fill: #FFF;
+      background: var(--co-configurator-element-add-button-background);
+      box-shadow: var(--co-configurator-element-add-button-shadow);
+
+      .co-icon {
+        svg, svg {
+          fill: var(--co-configurator-checked-icon-color);
         }
       }
+
+      &:hover {
+        background: var(--co-configurator-element-add-button-background-hover);
+      }
     }
+
     .element-bullet {
       background: #2c67ff;
     }

package/lib/components/element-toolbar/style/_layout.scss

@@ -1,4 +1,5 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-element-toolbar-layout') {
   .co-element-toolbar {
     position: absolute;
@@ -57,7 +58,7 @@
           display: flex;
           align-items: center;
 
-          ::ng-deep co-icon {
+          .co-icon {
             margin-right: 7px;
             border: none;
             width: 16px;
@@ -82,10 +83,35 @@
         font-weight: bold;
         margin-right: 22px;
       }
+    }
+
+    .edit-menu-wrapper {
+      left: 0;
+      transform: translateX(0);
+      background: #fff;
+      border-radius: var(--co-configurator-container-border-radius);
 
-      .edit-menu-wrapper {
-        left: 0;
-        transform: translateX(0);
+      .edit-menu {
+        display: flex;
+        justify-content: space-between;
+        font-size: var(--co-configurator-font-size-small);
+        color: var(--co-configurator-text-color);
+        padding: 5px;
+        box-sizing: border-box;
+        margin: 5px 0;
+        align-items: center;
+        cursor: pointer;
+        border-bottom: 1px solid transparent;
+        overflow: hidden;
+
+        .co-icon {
+          height: var(--co-configurator-xs-icon-height);
+          width: var(--co-configurator-xs-icon-width);
+        }
+
+        &:hover {
+          border-bottom: 1px solid var(--co-configurator-text-color);
+        }
       }
     }
 

package/lib/components/element-toolbar/style/_material-definition.scss

@@ -1,3 +1,5 @@
 :root {
-
+  --co-configurator-toolbar-button-background: rgba(0, 0, 0, 0.4);
+  --co-configurator-toolbar-button-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
+  --co-configurator-instant-edit-button-background: #000;
 }

package/lib/components/element-toolbar/style/_theme.scss

@@ -1,16 +1,19 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-element-toolbar-theme') {
   .co-element-toolbar {
     .toolbar-wrapper {
       .toolbar-button {
-        background-color: #17253391;
-        box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
+        background-color: var(--co-configurator-toolbar-button-background);
+        box-shadow: var(--co-configurator-toolbar-button-shadow);
 
-        .co-icon svg {
-          fill: #fff;
-        }
-        & [fill] {
-          fill: #fff;
+        .co-icon {
+          height: var(--co-configurator-xs-icon-height);
+          width: var(--co-configurator-xs-icon-width);
+
+          svg {
+            fill: var(--co-configurator-checked-icon-color);
+          }
         }
       }
     }
@@ -21,15 +24,14 @@
         display: flex;
         align-items: center;
 
-
         .instant-edit-button {
           svg g {
             polygon {
-              fill: black;
+              fill: var(--co-configurator-instant-edit-button-background);
             }
 
             path {
-              fill: black;
+              fill: var(--co-configurator-instant-edit-button-background);
             }
           }
         }
@@ -37,12 +39,11 @@
 
       button {
         border: 1px solid rgba(0, 0, 0, 0.1);
-
       }
     }
 
     .toolbar-label {
-      font-size: var(--font-size-small);
+      font-size: var(--co-configurator-font-size-small);
     }
   }
 }

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

@@ -1,15 +1,17 @@
 @use '../../../style' as cfg;
+
 @include cfg.export-module('co-product-configurator-layout') {
   .product-configurator-container {
     box-sizing: border-box;
     position: absolute;
     z-index: 1;
-    max-height: calc(100vh - 120px);
-    top: 64px;
-    padding: 15px;
-    border-radius: 10px;
-    right: 10px;
-    width: 505px;
+    max-height: var(--co-configurator-container-max-height);
+    top: var(--co-configurator-container-top);
+    padding: var(--co-configurator-container-padding);
+    border-radius: var(--co-configurator-container-border-radius);
+    right: var(--co-configurator-container-right);
+    width: var(--co-configurator-container-width);
+    transition: right .5s ease;
 
     .product-configurator-header {
       display: flex;
@@ -25,11 +27,12 @@
           margin: 0;
         }
       }
+
       .product-configurator-header-actions {
         display: flex;
         gap: 5px;
-
       }
+
       .product-configurator-close {
         cursor: pointer;
       }
@@ -38,6 +41,7 @@
     .product-configurator-details {
       max-height: calc(100vh - 320px);
       overflow-y: scroll;
+      overflow-x: hidden;
     }
 
     .product-configurator-summary-price-container {
@@ -45,4 +49,11 @@
       padding: 10px 0;
     }
   }
+
+  .hide-main-configuration {
+    right: calc(-1 * var(--co-configurator-container-width)); // Go out of view
+    padding: 0;
+    width: 0;
+    overflow: hidden;
+  }
 }

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

@@ -3,16 +3,16 @@
   .co-product-configurator {
     .product-configurator-container {
       background: var(--product-configurator-background-color);
-      color: var(--text-color);
+      color: var(--co-configurator-text-color);
 
       .product-configurator-header {
         .product-configurator-head {
           .product-configurator-header-text {
-            font-size: var(--font-size-large);
+            font-size: var(--co-configurator-font-size-large);
           }
 
           .product-configurator-text {
-            font-size: var(--font-size-small);
+            font-size: var(--co-configurator-font-size-small);
           }
         }
         .product-configurator-header-actions {

package/lib/components/product-configurator-grouped-repeatable-options/style/_layout.scss

@@ -0,0 +1,74 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-grouped-repeatable-options-layout') {
+  .co-product-configurator-grouped-repeatable-options {
+
+    // TEMP stylo
+    .repeatable-options-hidden {
+      display: none !important;
+    }
+
+    .grouped-repeatable-display-tabs {
+      margin-top: 15px;
+      display: flex;
+      justify-content: inherit;
+
+      .co-button {
+        cursor: pointer;
+      }
+    }
+
+    .grouped-repeatable-display-body {
+      .repeat-explainer {
+        width: 90%;
+        display: flex;
+        margin: 15px auto;
+        box-sizing: border-box;
+        padding: 12px;
+
+        .info-icon {
+          display: flex;
+          justify-items: center;
+          align-items: center;
+          margin-right: 10px;
+
+          .co-icon {
+            margin: 0 auto;
+          }
+        }
+
+        .info-text {
+          width: calc(100% - 35px);
+        }
+      }
+
+      .grouped-repeatable-items {
+        .grouped-items-container {
+          display: flex;
+          align-items: center;
+
+          .selector-options {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .show-filtered {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(90px, 0.5px));
+        grid-auto-rows: 1fr;
+        z-index: 1;
+        padding: 5px 0;
+        position: relative;
+
+        .co-product-configurator-selector-option {
+          width: 100%;
+
+          .selection-container-06 {
+            grid-template-columns: repeat(auto-fill, minmax(80px, 0.5px));
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/product-configurator-grouped-repeatable-options/style/_material-definition.scss

@@ -0,0 +1,12 @@
+:root {
+  --co-configurator-repeated-options-border-radius: 6px;
+  --co-configurator-repeated-options-border-color: #eee;
+  --co-configurator-repeated-options-default-tab-background: #eee;
+  --co-configurator-repeated-options-active-tab-background: #fff;
+  --co-configurator-repeated-options-explainer-background: #cce5ff;
+  --co-configurator-repeated-options-explainer-border-color: #b8daff;
+  --co-configurator-repeated-options-explainer-color: #004085;
+  --co-configurator-repeated-options-explainer-icon-height: 12px;
+  --co-configurator-repeated-options-explainer-icon-width: 12px;
+  --co-configurator-repeated-options-repeat-index-width: 25px;
+}

package/lib/components/product-configurator-grouped-repeatable-options/style/_theme.scss

@@ -0,0 +1,75 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-grouped-repeatable-options-theme') {
+  .co-product-configurator-grouped-repeatable-options {
+    .grouped-repeatable-display-tabs {
+
+      .co-button {
+        color: var(--co-configurator-text-color);
+        font-size: var(--co-configurator-font-size-small);
+        border: 1px solid var(--co-configurator-repeated-options-border-color);
+        background: var(--co-configurator-repeated-options-default-tab-background);
+      }
+
+      .left-button {
+        border-radius: var(--co-configurator-repeated-options-border-radius) 0 0 0;
+      }
+
+      .right-button {
+        border-radius: 0 var(--co-configurator-repeated-options-border-radius) 0 0;
+      }
+
+      .active-button {
+        background: var(--co-configurator-repeated-options-active-tab-background);
+      }
+    }
+
+    .grouped-repeatable-display-body {
+      border: 1px solid var(--co-configurator-repeated-options-border-color);
+      border-top-right-radius: var(--co-configurator-repeated-options-border-radius);
+      border-bottom-left-radius: var(--co-configurator-repeated-options-border-radius);
+      border-bottom-right-radius: var(--co-configurator-repeated-options-border-radius);
+
+      .repeat-explainer {
+        border-radius: var(--co-configurator-repeated-options-border-radius);
+        border: 1px solid var(--co-configurator-repeated-options-explainer-border-color);
+        color: var(--co-configurator-repeated-options-explainer-color);
+        background-color: var(--co-configurator-repeated-options-explainer-background);
+
+        .info-icon {
+          border: 2px solid var(--co-configurator-repeated-options-explainer-color);
+          border-radius: 50%;
+          width: calc(2 * var(--co-configurator-repeated-options-explainer-icon-width));
+          height: calc(2 * var(--co-configurator-repeated-options-explainer-icon-height));
+
+          .co-icon {
+            width: var(--co-configurator-repeated-options-explainer-icon-width);
+            height: var(--co-configurator-repeated-options-explainer-icon-height);
+            color: var(--co-configurator-repeated-options-explainer-color);
+
+            svg, path {
+              fill: var(--co-configurator-repeated-options-explainer-color);
+            }
+          }
+        }
+
+        .info-text {
+          font-size: var(--co-configurator-font-size-small);
+        }
+      }
+
+      .grouped-repeatable-items {
+        .grouped-items-container {
+          .index-indicator {
+            width: var(--co-configurator-repeated-options-repeat-index-width);
+            font-size: var(--co-configurator-font-size-small);
+          }
+
+          .selector-options {
+            width: calc(100% - 35px);
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/product-configurator-grouped-repeatable-options/style/material.scss

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

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

@@ -0,0 +1,24 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-product-configurator-repeat-buttons-layout') {
+  .co-product-configurator-repeat-buttons {
+    margin-left: auto;
+
+    .button-container {
+      display: flex;
+      justify-content: space-between;
+
+      .repeat-button-container, .delete-button-container {
+        cursor: pointer;
+
+        .co-button {
+          padding: 0 5px;
+        }
+      }
+
+      .delete-button-container {
+        margin-left: 5px;
+      }
+    }
+  }
+}

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

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