@colijnit/configurator 262.1.3 → 262.1.5

package/lib/components/answer-card/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-card-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-card-layout') {
   .co-answer-card {
     width: 23%;
 

package/lib/components/answer-card/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-card-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-card-theme') {
   .co-answer-card {
     background: #FFF;
 

package/lib/components/answer-card/style/material.scss

@@ -1,2 +1,3 @@
 @use './layout.scss';
+@use './material-definition';
 @use './theme.scss';

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-info-dialog-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-info-dialog-layout') {
   .co-answer-info-dialog{
     .answer-info-tooltip {
       position: fixed;

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-info-dialog-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-info-dialog-theme') {
   .co-answer-info-dialog {
     .answer-info-tooltip {
       background: #4a4a49;

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answers-slideout-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answers-slideout-layout') {
   .co-answers-slideout {
     .answer-slideout {
       overflow-y: auto;
@@ -60,10 +59,10 @@
     }
 
     &:not(.custom-dimensions) co-slideout {
-      width: 500px;
+      width: 640px;
       max-width: 60vw;
       top: 40px;
-      max-height: calc(100% - 100px);
+      max-height: calc(100% - 40px);
       padding: 30px;
     }
 

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answers-slideout-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answers-slideout-theme') {
   .co-answers-slideout {
 
     div.title {

package/lib/components/color-filter/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-color-filter-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-color-filter-layout') {
   .co-color-filter {
     display: flex;
     align-items: center;

package/lib/components/color-filter/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-color-filter-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-color-filter-theme') {
   .co-color-filter {
 
   }

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configuration-preset-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-layout') {
   .co-configuration-preset {
     .save-load-configuration-buttons {
       display: flex;
@@ -21,6 +20,7 @@
     }
 
     .save-load-configuration-buttons {
+      background: var(--configutator-dialog-background);
       position: absolute;
       top: 100%;
       right: 0;

package/lib/components/configuration-preset/style/_material-definition.scss

@@ -1,5 +1,3 @@
 :root {
-  --success-text-color: #155724;
-  --success-background-color: #d4edda;
-  --success-border-color: #c3e6cb;
+
 }

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configuration-preset-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-theme') {
   .co-configuration-preset {
     .save-load-configuration-buttons {
       box-shadow: 1px 1px 4px 1px rgba(151, 146, 132, 0.3);

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

@@ -1,21 +1,24 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-configuration-preset-dialog-layout') {
+@include cfg.export-module('co-configuration-preset-dialog-layout') {
   .co-configuration-preset-dialog {
     .configuration-preset-dialog {
-      position: fixed;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 100;
-      background-color: rgba(0, 0, 0, 0.5);
+      .configuration-preset-dialog {
+        position: relative;
+        z-index: 1000;
+      }
+
+      .configuration-preset-dialog-backdrop {
+        position: fixed;
+        inset: 0;
+      }
+
+      .configuration-preset-dialog-container {
+        position: relative;
+        z-index: 1;
+      }
 
       .configuration-preset-dialog-container {
-        background-color: #fff;
         box-sizing: border-box;
         min-width: 450px;
 
@@ -24,7 +27,6 @@
           gap: 10px;
           align-items: center;
           margin-bottom: 20px;
-          border-bottom: 1px solid #ccc;
           padding: 20px;
         }
 
@@ -34,14 +36,10 @@
 
           .validation-error {
             max-width: 450px;
-            font-size: var(--font-size-small);
           }
 
           .save-success {
             padding: 10px;
-            color: var(--success-text-color);
-            background-color: var(--success-background-color);
-            border: 1px solid var(--success-border-color);
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -64,17 +62,6 @@
           display: flex;
           gap: 10px;
           justify-content: space-evenly;
-
-          .co-button {
-            cursor: pointer;
-          }
-
-          .button-as-link {
-            background: none;
-            color: var(--text-color);
-            text-decoration: underline;
-          }
-
         }
       }
     }

package/lib/components/configuration-preset-dialog/style/_material-definition.scss

@@ -1,5 +1,3 @@
 :root {
-  --success-text-color: #155724;
-  --success-background-color: #d4edda;
-  --success-border-color: #c3e6cb;
+  --configutator-dialog-header-border-color: #ddd;
 }

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

@@ -1,7 +1,53 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-configuration-preset-dialog-theme') {
+@include cfg.export-module('co-configuration-preset-dialog-theme') {
   .co-configuration-preset-dialog {
+    .configuration-preset-dialog {
+      .configuration-preset-dialog-backdrop {
+        background: var(--configurator-dialog-backdrop);
+      }
 
+      .configuration-preset-dialog-container {
+        background-color: var(--configutator-dialog-background);
+
+        .configuration-preset-dialog-container-header {
+          border-bottom: 1px solid var(--configutator-dialog-header-border-color);
+        }
+
+        .configuration-preset-dialog-container-body {
+          .validation-error {
+            font-size: var(--font-size-small);
+          }
+
+          .save-success {
+            color: var(--success-text-color);
+            background-color: var(--success-background-color);
+            border: 1px solid var(--success-border-color);
+
+            .save-success-text {
+              text-align: center;
+              font-weight: bold;
+            }
+
+            .save-success-button {
+              background: none;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .configuration-preset-dialog-container-footer {
+          .co-button {
+            cursor: pointer;
+          }
+
+          .button-as-link {
+            background: none;
+            color: var(--text-color);
+            text-decoration: underline;
+          }
+        }
+      }
+    }
   }
 }

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

@@ -1,7 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-layout') {
   .co-configurator {
-
   }
 }

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-theme') {
   .co-configurator {
 
   }

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

@@ -1,7 +1,6 @@
-@import "../../../style/mixin";
-
-@include export-module('co-configurator-dialog-layout') {
-  .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-dialog-layout') {
+  .co-configurator-error-dialog, .co-configurator-export-dialog, .co-configurator-camera-settings-dialog {
     .dialog {
       width: 550px;
       position: fixed;

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

@@ -1,7 +1,6 @@
-@import "../../../style/mixin";
-
-@include export-module('co-configurator-dialog-theme') {
-  .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-dialog-theme') {
+  .co-configurator-error-dialog, .co-configurator-export-dialog, .co-configurator-camera-settings-dialog {
     .dialog {
       background-color: var(--overlay-background);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

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

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

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-loader-layout') {
   .co-configurator-loader {
     .loader-wrapper {
       z-index: 1100;
@@ -70,3 +69,13 @@
     }
   }
 }
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-loader-theme') {
   .co-configurator-loader {
     .bg {
       fill: none;

package/lib/components/configurator-loader/style/material.scss

@@ -1,14 +1,3 @@
 @use './_material-definition.scss';
 @use './_layout.scss';
 @use './_theme.scss';
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

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

@@ -1,22 +1,17 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-scene-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-scene-layout') {
   .co-configurator-scene {
-
-    .configurator-bundle-container {
+    display: block;
+    width: 100%;
+    height: 100%;
+    .configurator-scene-wrapper {
       position: relative;
-
-      .threedviewer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        min-height: 100%;
-        min-width: 100%;
-        height: 100vh;
-        width: 100vw;
-      }
+      width: 100%;
+      height: 100%;
+    }
+    .canvas {
+      height: 100%;
+      width: 100%;
     }
   }
 }

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

@@ -1,7 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-scene-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-scene-theme') {
   .co-configurator-scene {
-
   }
 }

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-scene-loader-layout') {
   .co-configurator-scene-loader {
     .loader-wrapper {
       z-index: 1100;
@@ -42,6 +41,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
+      z-index: 100;
     }
 
     .circular-progress {
@@ -70,3 +70,13 @@
     }
   }
 }
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/lib/components/configurator-scene-loader/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-scene-loader-theme') {
   .co-configurator-scene-loader {
     .bg {
       fill: none;

package/lib/components/configurator-scene-loader/style/material.scss

@@ -1,14 +1,3 @@
 @use './_material-definition.scss';
 @use './_layout.scss';
 @use './_theme.scss';
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-buttons') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-buttons-layout') {
   .co-element-buttons {
     pointer-events: all;
 
@@ -48,5 +47,18 @@
 
       transform: translate(-5px, -5px);
     }
+    &.animate {
+      ::ng-deep .element-add-button {
+        animation-name: pulse-add-buttons;
+        animation-duration: 400ms;
+        animation-iteration-count: 6;
+        animation-direction: alternate;
+      }
+    }
+  }
+}
+@keyframes pulse-add-buttons {
+  50% {
+    box-shadow: 0 0 20px hsl(12, 100%, 60%);
   }
 }

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-buttons-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-buttons-theme') {
   .co-element-buttons {
 
     .add-button-label {

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-toolbar-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-toolbar-layout') {
   .co-element-toolbar {
     position: absolute;
     display: block;
@@ -18,6 +17,7 @@
       .toolbar-button {
         display: flex;
         align-items: center;
+        justify-content: center;
         cursor: pointer;
         border: none;
         border-radius: 5px;
@@ -25,14 +25,6 @@
         width: 36px;
         box-sizing: border-box;
         padding: 5px;
-
-        button {
-          cursor: pointer;
-          background: none;
-          border: none;
-          height: 26px;
-          width: 26px;
-        }
       }
     }
 

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

@@ -1,14 +1,15 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-toolbar-theme') {
+@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;
 
-        button {
-          color: #fff;
+        .co-icon svg {
+          fill: #fff;
+        }
+        & [fill] {
           fill: #fff;
         }
       }

package/lib/components/image-zoom/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-image-zoom-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-image-zoom-layout') {
   .co-image-zoom {
 
     .zoom-layer {

package/lib/components/image-zoom/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-image-zoom-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-image-zoom-theme') {
   .co-image-zoom {
     .zoom-layer {
       background: rgba(0, 0, 0, 0.6);

package/lib/components/lite-selector/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-lite-selector-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-lite-selector-layout') {
   .co-lite-selector {
     &.floating co-selections-summary {
       position: absolute;

package/lib/components/lite-selector/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-lite-selector-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-lite-selector-theme') {
   .co-lite-selector {
 
   }

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

@@ -1,7 +1,5 @@
-@import "../../../style/mixin.scss";
-
-
-@include export-module('co-product-configurator') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-layout') {
   .product-configurator-container {
     box-sizing: border-box;
     position: absolute;

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-theme') {
   .co-product-configurator {
     .product-configurator-container {
       background: var(--product-configurator-background-color);

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-layout') {
   .co-product-configurator-selector {
     .selector-container {
       margin: 0 auto;