@colijnit/configurator 262.1.3 → 262.1.4

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;

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,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configuration-preset-dialog-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-dialog-layout') {
   .co-configuration-preset-dialog {
     .configuration-preset-dialog {
       position: fixed;

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

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

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,6 +1,5 @@
-@import "../../../style/mixin";
-
-@include export-module('co-configurator-dialog-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-dialog-layout') {
   .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
     .dialog {
       width: 550px;

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin";
-
-@include export-module('co-configurator-dialog-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-dialog-theme') {
   .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
     .dialog {
       background-color: var(--overlay-background);

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;
@@ -70,3 +69,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-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;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-option-checkbox-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-option-checkbox-layout') {
   .co-product-configurator-option-checkbox {
     .configurator-option-checkbox-container {
       display: flex;

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-tile-theme') {
+@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 {

package/lib/components/progress-bar/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-progress-bar-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-progress-bar-layout') {
   .co-progress-bar {
     position: fixed;
     width: 100%;

package/lib/components/progress-bar/style/_theme.scss

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