@colijnit/inphoto 300.1.0 → 300.1.2

package/lib/component/ready-to-add-articles/style/_theme.scss

@@ -0,0 +1,95 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ready-to-add-articles-theme') {
+  .co-ready-to-add-articles {
+    .ready-to-add-articles-container {
+      background-color: var(--co-inphoto-dialog-background-color);
+      border-radius: var(--co-inphoto-border-radius);
+      padding: 20px;
+
+      .ready-to-add-article-top {
+        padding: 0 0 20px;
+        border-bottom: 1px solid #eee;
+
+        .top-left-container {
+
+          .icon-container {
+            border: 5px solid #eee;
+            @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-success-color));
+          }
+        }
+
+        .top-right-container {
+          .top-head {
+            font-size: var(--co-inphoto-font-size-head);
+            font-weight: bold;
+          }
+
+          .top-text {
+            font-size: var(--co-inphoto-font-size-text);
+          }
+        }
+
+        .top-close-container {
+          .co-icon {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .ready-to-add-article-bottom {
+        padding: 20px 0;
+
+        .bottom-left-container {
+          .icon-container {
+            background: #eee;
+            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-success-color));
+          }
+        }
+
+        .bottom-right-container {
+          .bottom-text {
+            font-size: var(--co-inphoto-font-size-text);
+          }
+        }
+      }
+
+      .ready-to-add-article-buttons {
+
+        .action-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-action-button-background),
+                  var(--co-inphoto-action-button-background),
+                  var(--co-inphoto-action-button-color),
+                  var(--co-inphoto-action-button-font-size),
+                  var(--co-inphoto-action-button-icon-size),
+                  var(--co-inphoto-action-button-icon-color),
+                  var(--co-inphoto-action-button-border),
+                  var(--co-inphoto-action-button-radius),
+                  var(--co-inphoto-action-button-padding))
+        }
+
+        .has-left-icon {
+          .co-icon {
+            margin-right: 5px;
+          }
+        }
+
+        .text-button {
+          margin-top: 15px;
+          display: block;
+          cursor: pointer;
+          text-align: center;
+          text-decoration: underline;
+          font-size: var(--co-inphoto-font-size-text);
+          box-sizing: border-box;
+          padding: var(--co-inphoto-action-button-padding)
+        }
+
+      }
+    }
+  }
+}
+
+
+

package/lib/component/ready-to-add-articles/style/material.scss

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

package/lib/component/scene-context-menu/style/_layout.scss

@@ -0,0 +1,90 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-layout') {
+  .co-scene-context-menu {
+    .scene-context-menu-container {
+      position: absolute;
+      bottom: 70px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      box-sizing: border-box;
+      padding: 6px;
+      background: var(--co-inphoto-dialog-background-color);
+      border-radius: 999px;
+      box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
+
+      .scene-context-menu-body {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .scene-context-menu-item {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          padding: 0;
+          position: relative;
+          border-radius: 50%;
+          transition: background 0.15s ease;
+
+          .scene-context-menu-item-icon {
+            display: flex;
+            @include cfg.default-icon(18px, 18px, #172533);
+          }
+
+          .scene-context-menu-item-text {
+            visibility: hidden;
+            opacity: 0;
+            white-space: nowrap;
+            position: absolute;
+            top: calc(100% + 10px);
+            left: 50%;
+            transform: translateX(-50%);
+            box-sizing: border-box;
+            padding: 6px 12px;
+            border-radius: 8px;
+            background: #fff;
+            box-shadow: 0 4px 14px rgba(23, 37, 51, 0.18);
+            font-size: 12px;
+            font-weight: 400;
+            color: #172533;
+            transition: opacity 0.15s ease, visibility 0.15s ease;
+
+            &::before {
+              content: '';
+              position: absolute;
+              bottom: 100%;
+              left: 50%;
+              transform: translateX(-50%);
+              border: 5px solid transparent;
+              border-bottom-color: #fff;
+            }
+          }
+
+          &:hover {
+            background: #f0f2f5;
+
+            .scene-context-menu-item-text {
+              visibility: visible;
+              opacity: 1;
+            }
+          }
+
+          &.active {
+            background: var(--co-inphoto-accent-color);
+
+            @include cfg.default-icon(25px, 25px, #fff);
+
+            &:hover {
+              background: var(--co-inphoto-accent-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/scene-context-menu/style/_material-definition.scss

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

package/lib/component/scene-context-menu/style/_theme.scss

@@ -0,0 +1,8 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-theme') {
+  .co-scene-context-menu {
+
+  }
+}
+

package/lib/component/scene-context-menu/style/material.scss

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

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_layout.scss

@@ -0,0 +1,49 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-inpaint-info-card-layout') {
+  .co-inpaint-info-card {
+    flex: 1;
+
+    .inpaint-info-container {
+      display: flex;
+      justify-content: space-between;
+
+      .number-container {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        justify-self: center;
+        align-items: center;
+        justify-content: space-around;
+        background: var(--co-inphoto-accent-color);
+        color: var(--co-inphoto-icon-color-light);
+      }
+
+      .col-right {
+        box-sizing: border-box;
+        padding: 0 4px 4px 15px;
+
+        .card-icon {
+          width: 50px;
+          height: 50px;
+          background: var(--co-inphoto-info-dialog-icon-bg);
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          margin-bottom: 10px;
+          border-radius: 4px;
+        }
+
+        .card-title {
+          @include cfg.sub-header-text();
+          margin-bottom: 10px;
+        }
+
+        .card-description {
+          @include cfg.text()
+        }
+      }
+    }
+  }
+}

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+  --co-inphoto-info-dialog-icon-bg: #EEE;
+}

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_theme.scss

@@ -0,0 +1,10 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-inpaint-info-card-theme') {
+  .co-inpaint-info-card {
+
+  }
+}
+
+
+

package/lib/component/segment-inpaint/components/inpaint-info-card/style/material.scss

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

package/lib/component/segment-inpaint/style/_layout.scss

@@ -0,0 +1,52 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-segment-inpaint-layout') {
+  .co-segment-inpaint {
+    .segment-inpaint-container {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+      position: relative;
+    }
+
+    .inpaint-info-dialog-container {
+      position: absolute;
+      z-index: 10000;
+      bottom: 20%;
+      left: calc(50% - 490px);
+      background: var(--co-inphoto-dialog-background-color);
+      width: 100%;
+      max-width: 980px;
+      box-sizing: border-box;
+      padding: 20px 20px 30px;
+      border-radius: var(--co-inphoto-border-radius);
+
+      .inpaint-info-dialog-header {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 10px 0 25px;
+
+        .dialog-header {
+          @include cfg.sub-header-text()
+        }
+
+        .close-click {
+          cursor: pointer;
+        }
+      }
+
+      .dialog-content {
+        display: flex;
+        justify-content: space-between;
+
+        .arrow-next {
+          width: 50px;
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
+        }
+      }
+    }
+  }
+}

package/lib/component/segment-inpaint/style/_material-definition.scss

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

package/lib/component/segment-inpaint/style/_theme.scss

@@ -0,0 +1,11 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-segment-inpaint-theme') {
+  .co-segment-inpaint {
+
+
+  }
+}
+
+
+

package/lib/component/segment-inpaint/style/material.scss

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

package/lib/component/side-bar-menu/style/_layout.scss

@@ -1,40 +1,45 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-side-bar-menu-layout') {
+@include cfg.export-module('co-side-bar-menu-layout') {
   .co-side-bar-menu {
-    .lib-menu-bar {
-      position: absolute;
-      // todo revert tot 1
+    .side-bar-menu {
+      position: fixed;
+      background-color: #fff;
       z-index: 5;
-      width: 50px;
+      width: 85px;
       top: 0;
       left: 0;
       height: 100vh;
 
-      .lib-menu-bar-item {
-        width: 50px;
-        height: 50px;
+      .side-bar-menu-item {
+        width: 85px;
+        min-height: 85px;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         position: relative;
 
-        .lib-menu-tooltip {
-          position: absolute;
-          top: 0;
-          left: -250px;
-          box-sizing: border-box;
-          padding: 0 10px;
-          line-height: 50px;
+        @include cfg.default-icon(25px, 25px, #333);
+
+        .side-bar-menu-text {
+          font-size: 13px;
+          text-align: center;
         }
 
         &:hover {
-          .lib-menu-tooltip {
-            left: 50px;
-          }
+          @include cfg.default-icon(25px, 25px, #da9803);
         }
       }
+
+      .side-bar-menu-item-active {
+        @include cfg.default-icon(25px, 25px, #da9803);
+      }
+
+      .side-bar-menu-item-disabled {
+        @include cfg.default-icon(25px, 25px, #eee);
+      }
     }
   }
 }

package/lib/component/side-bar-menu/style/_theme.scss

@@ -1,19 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-side-bar-menu-theme') {
-  .co-side-bar-menu {
-    .lib-menu-bar {
-      background-color: var(--co-inphoto-loader-background-dark);
+@include cfg.export-module('co-side-bar-menu-theme') {
 
-      .lib-menu-bar-item {
-        .lib-menu-tooltip {
-          background-color: var(--co-inphoto-loader-background-dark);
-          color: var(--co-inphoto-color-light);
-        }
-
-        @include default-icon(40px, 40px, #fff);
-      }
-    }
-  }
 }
 

package/lib/component/threed-to-ai/style/_layout.scss

@@ -0,0 +1,38 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-threed-to-ai-layout') {
+  .threed-to-ai-container {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+    box-sizing: border-box;
+    padding: 20px;
+    background: var(--co-inphoto-dialog-background-color);
+    border-radius: var(--co-inphoto-border-radius);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .threed-to-ai-icon {
+      margin-right: 10px;
+      @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color))
+    }
+
+    .threed-to-ai-body {
+      .threed-to-ai-body-head {
+        font-weight: bold;
+        font-size: var(--co-inphoto-font-size-text);
+      }
+
+      .threed-to-ai-body-text {
+        font-size: var(--co-inphoto-font-size-label);
+      }
+    }
+
+    &:hover {
+      .threed-to-ai-icon {
+        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-color))
+      }
+    }
+  }
+}

package/lib/component/threed-to-ai/style/_material-definition.scss

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

package/lib/component/threed-to-ai/style/_theme.scss

@@ -0,0 +1,6 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-threed-to-ai-theme') {
+
+}
+

package/lib/component/threed-to-ai/style/material.scss

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

package/lib/component/threedscene/style/_layout.scss

@@ -1,50 +1,21 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-threedscene-layout') {
-  .co-threedscene {
-
-
-    .co-product-configurator {
-      .product-configurator-container {
-        top: 10px;
-        height: calc(100% - 20px);
-        max-height: calc(100% - 20px);
-        border: 1px solid #000;
-
-        .product-configurator-details {
-          overflow-x: hidden;
-        }
-      }
-    }
-
+@use '../../../style' as cfg;
 
+@include cfg.export-module('co-inphoto-threed-scene-layout') {
+  .co-inphoto-threed-scene {
     .threed-container {
-      display: flex;
-      gap: 20px;
-
       .scene-container {
-        width: 70%;
-
         .three-container {
           width: 100%;
           height: 100%;
-          min-height: 500px;
-        }
-      }
-    }
-
-    .scene-info-container {
-      width: 30%;
-
-      .info-container {
-        box-sizing: border-box;
-        padding: 10px;
-
-        .header-icon-container {
-          margin-bottom: 10px;
-          display: flex;
-          align-items: center;
-          gap: 10px;
+          min-height: 100vh;
+          min-width: 100vw;
+
+          canvas {
+            width: 100%;
+            height: 100%;
+            min-height: 100vh;
+            min-width: 100vw;
+          }
         }
       }
     }

package/lib/component/threedscene/style/_theme.scss

@@ -1,38 +1,8 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-threedscene-theme') {
-  .co-threedscene {
-    .scene-info-container {
-      .info-container {
-        .header-icon-container {
-          margin-bottom: 10px;
-          h2 {
-            font-size: var(--co-inphoto-font-size-head);
-            color: var(--co-inphoto-color-dark);
-          }
-        }
+@include cfg.export-module('co-inphoto-threed-scene-theme') {
+  .co-inphoto-threed-scene {
 
-        p {
-          font-size: var(--co-inphoto-font-size-label);
-          color: var(--co-inphoto-color-dark);
-        }
-
-        .action-button {
-          margin: 20px 0;
-          @include action-button(
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-color),
-                          var(--co-inphoto-action-button-font-size),
-                          var(--co-inphoto-action-button-icon-size),
-                          var(--co-inphoto-action-button-icon-color),
-                          var(--co-inphoto-action-button-border),
-                          var(--co-inphoto-action-button-radius),
-                          var(--co-inphoto-action-button-padding)
-          )
-        }
-      }
-    }
   }
 }