@colijnit/inphoto 300.1.0 → 300.1.2

package/lib/component/ai-prompt/style/_layout.scss

@@ -0,0 +1,125 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ai-prompt-layout') {
+  .co-ai-prompt {
+    .custom-prompt-container {
+      margin: 20px auto;
+      background: var(--co-inphoto-background-white);
+      border-radius: var(--co-inphoto-border-radius);
+      box-sizing: border-box;
+      padding: 15px;
+
+      .custom-height {
+        height: 100px;
+        overflow: hidden;
+        .input-textarea-wrapper {
+          label {
+            top: 20%;
+          }
+        }
+      }
+
+      .hasvalue {
+        .input-textarea-wrapper {
+          label {
+            top: 5%;
+          }
+        }
+      }
+
+      .prompt-head {
+        @include cfg.sub-header-text();
+      }
+
+      .prompt-text {
+        @include cfg.text();
+        margin-bottom: 10px;
+      }
+
+      .prompt-mode {
+        margin: 10px auto;
+        display: flex;
+        align-items: center;
+
+        .prompt-mode-text {
+          font-size: var(--co-inphoto-font-size-label);
+          .active {
+            font-weight: bold;
+          }
+
+          .spacer {
+            margin: 0 4px;
+            color: #CCC;
+          }
+        }
+
+        .prompt-mode-switch {
+          margin-right: 15px;
+
+          .switch {
+            position: relative;
+            display: inline-block;
+            width: 44px;
+            height: 24px;
+
+            input {
+              opacity: 0;
+              width: 0;
+              height: 0;
+
+              &:checked + .slider {
+                background-color: var(--co-inphoto-accent-color);
+
+                &:before {
+                  -webkit-transform: translateX(20px);
+                  -ms-transform: translateX(20px);
+                  transform: translateX(20px);
+                }
+              }
+
+              &:focus + .slider {
+                box-shadow: 0 0 1px var(--co-inphoto-accent-color);
+              }
+            }
+          }
+
+          .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: 0.4s;
+
+            &:before {
+              position: absolute;
+              content: "";
+              height: 16px;
+              width: 16px;
+              left: 4px;
+              bottom: 4px;
+              background-color: white;
+              transition: 0.4s;
+            }
+
+            &.round {
+              border-radius: 34px;
+
+              &:before {
+                border-radius: 50%;
+              }
+            }
+          }
+        }
+      }
+
+
+      .required-input-empty {
+        border: 1px solid #dc3545;
+        background-color: rgba(220, 53, 69, 0.25);
+      }
+    }
+  }
+}

package/lib/component/ai-prompt/style/_theme.scss

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

package/lib/component/back-next-buttons/style/_layout.scss

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-back-next-buttons-layout') {
+@include cfg.export-module('co-back-next-buttons-layout') {
   .co-back-next-buttons {
     .info-navigation-buttons {
       display: flex;

package/lib/component/back-next-buttons/style/_theme.scss

@@ -1,34 +1,45 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-back-next-buttons-theme') {
+@include cfg.export-module('co-back-next-buttons-theme') {
   .co-back-next-buttons {
     .info-navigation-buttons {
       .back-button {
         min-width: 150px;
-        @include action-button(
-                        var(--co-inphoto-prev-button-background),
-                        var(--co-inphoto-prev-button-background),
-                        var(--co-inphoto-prev-button-color),
-                        var(--co-inphoto-prev-button-font-size),
-                        var(--co-inphoto-prev-button-icon-size),
-                        var(--co-inphoto-prev-button-icon-color),
-                        var(--co-inphoto-prev-button-border),
-                        var(--co-inphoto-prev-button-radius),
-                        var(--co-inphoto-prev-button-padding))
+        @include cfg.action-button(
+                var(--co-inphoto-button-background),
+                var(--co-inphoto-button-background),
+                var(--co-inphoto-button-color),
+                var(--co-inphoto-button-font-size),
+                var(--co-inphoto-button-icon-size),
+                var(--co-inphoto-button-icon-color),
+                var(--co-inphoto-button-border),
+                var(--co-inphoto-button-radius),
+                var(--co-inphoto-button-padding)
+        );
+
+        .label {
+          margin-left: 15px;
+        }
       }
 
       .next-button, .generate-button {
+        margin-left: auto;
         min-width: 300px;
-        @include action-button(
-                        var(--co-inphoto-next-button-background),
-                        var(--co-inphoto-next-button-background),
-                        var(--co-inphoto-next-button-color),
-                        var(--co-inphoto-next-button-font-size),
-                        var(--co-inphoto-next-button-icon-size),
-                        var(--co-inphoto-next-button-icon-color),
-                        var(--co-inphoto-next-button-border),
-                        var(--co-inphoto-next-button-radius),
-                        var(--co-inphoto-next-button-padding))
+        font-weight: bold;
+        @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));
+
+        .label {
+          margin-left: 15px;
+        }
       }
     }
 

package/lib/component/canvas-tool-bar/style/_layout.scss

@@ -0,0 +1,135 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-canvas-tool-bar-layout') {
+  .co-canvas-tool-bar {
+    .canvas-toolbar {
+      display: flex;
+      align-items: center;
+      background: var(--co-inphoto-dialog-background-color);
+      position: absolute;
+      top: 50px;
+      left: calc(50% - 400px);
+      z-index: 100;
+      border-radius: var(--co-inphoto-border-radius);
+      box-sizing: border-box;
+      padding: 15px 15px 15px 0;
+      justify-content: space-around;
+
+      .drag-indicator-icon {
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-text));
+      }
+
+      .modus-indicator, .tool-selection, .actions {
+        display: flex;
+        align-items: center;
+        margin: 0 10px;
+      }
+
+
+      .modus-indicator {
+        .modus-indicator-text {
+          @include cfg.sub-header-text();
+          margin-right: 10px;
+        }
+
+        .modus-indicator-info-icon {
+          .info-button {
+            @include cfg.default-icon(var(--co-inphoto-toolbar-info-icon-size), var(--co-inphoto-toolbar-info-icon-size), var(--co-inphoto-icon-color));
+            cursor: pointer;
+          }
+        }
+      }
+
+      .spacer {
+        color: var(--co-inphoto-toolbar-spacer-color);
+        font-size: 30px;
+        font-weight: lighter;
+        margin: 0 10px;
+      }
+
+      .tool-selection {
+        .brush-button, .eraser-button {
+          background-color: var(--co-inphoto-button-background);
+          color: var(--co-inphoto-button-color);
+          font-size: var(--co-inphoto-button-font-size);
+          border: var(--co-inphoto-button-border);
+          cursor: pointer;
+          padding: var(--co-inphoto-button-padding);
+          border-radius: var(--co-inphoto-button-radius);
+          margin: 0 4px;
+
+          .co-icon {
+            height: var(--co-inphoto-button-icon-size);
+            width: var(--co-inphoto-button-icon-size);
+
+            svg, path {
+              fill: var(--co-inphoto-button-icon-color);
+            }
+          }
+        }
+
+        .selected {
+          color: var(--co-inphoto-active-button-color);
+          background: var(--co-inphoto-active-button-background);
+          border: 1px solid var(--co-inphoto-active-button-background);
+
+          .co-icon {
+            svg, path {
+              fill: var(--co-inphoto-active-button-color);
+            }
+          }
+        }
+      }
+
+      .actions {
+        gap: 20px;
+
+        .cancel-button, .action-button {
+          display: flex;
+          align-content: center;
+          align-items: center;
+          cursor: pointer;
+          box-sizing: border-box;
+        }
+
+        .cancel-button {
+          background-color: transparent;
+          color: var(--co-inphoto-button-color);
+          font-size: var(--co-inphoto-button-font-size);
+          padding: var(--co-inphoto-button-padding);
+          font-weight: 500;
+          @include cfg.default-icon(var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-color));
+
+          .label {
+            margin-right: 10px;
+          }
+
+        }
+
+        .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));
+
+          .label {
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/canvas-tool-bar/style/_material-definition.scss

@@ -0,0 +1,4 @@
+:root {
+  --co-inphoto-toolbar-info-icon-size: 28px;
+  --co-inphoto-toolbar-spacer-color: #D9D9DF;
+}

package/lib/component/canvas-tool-bar/style/_theme.scss

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

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

@@ -1,32 +1,23 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('cco-catalog-layout') {
+@include cfg.export-module('cco-catalog-layout') {
   .co-catalog {
     .catalog-dialog {
-      width: 100vw;
-      height: 100vh;
+      z-index: 1;
       top: 0;
-      left: 0;
+      left: 85px;
       right: 0;
       bottom: 0;
       position: absolute;
-      z-index: 10;
-      overflow: hidden;
-      box-sizing: border-box;
+      overflow-y: scroll;
+      overflow-x: hidden;
 
       .catalog-container {
-        background-color: var(--co-inphoto-dialog-background-color);
-        width: 90vw;
-        height: 90vh;
-        max-height: 1000px;
-        margin: 5vh auto;
-        border-radius: 10px;
-        overflow: hidden;
+        box-sizing: border-box;
 
         .catalog-dialog-wrapper {
           display: flex;
           align-items: center;
-          padding: 10px;
 
           .back-button {
             display: flex;
@@ -37,23 +28,16 @@
           .close-button {
             display: flex;
             align-items: center;
-            cursor: pointer;
-            margin-left: auto;
           }
         }
 
         .catalog-body {
           box-sizing: border-box;
-          padding: 20px;
-          overflow-y: scroll;
           max-height: 100%;
 
           .catalog-tile-wrapper {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(10px, 150px));
             overflow: hidden;
-            padding: 0;
-            grid-gap: 10px;
 
             .catalog-tile {
               cursor: pointer;
@@ -63,18 +47,7 @@
               height: 100%;
               width: 100%;
               min-height: 150px;
-
-              p {
-                display: block;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                font-size: var(--ca-font-size);
-                font-weight: bold;
-                text-shadow: none;
-                text-transform: capitalize;
-                margin: 10px 0;
-              }
+              
             }
           }
         }

package/lib/component/catalog/style/_material-definition.scss

@@ -1,3 +1,4 @@
 :root {
-  --co-photo-editor-background-color: #ffffff;
+  --co-photo-catalog-border-color: #ccc;
+
 }

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

@@ -1,13 +1,47 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-catalog-theme') {
+@include cfg.export-module('co-catalog-theme') {
   .co-catalog {
     .catalog-dialog {
-      background-color: var(--co-inphoto-loader-background-dark);
-      .catalog-body {
-        .catalog-tile-wrapper {
-          .catalog-tile {
-            @include default-icon(150px, 150px, var(--co-inphoto-icon-color));
+      background-color: var(--co-inphoto-dialog-background-color);
+      border-left: 1px solid var(--co-photo-catalog-border-color);
+
+      .catalog-container {
+        padding-left: 25px;
+
+        .catalog-dialog-wrapper {
+          padding: 10px;
+
+          .back-button {
+            align-items: center;
+          }
+
+          .close-button {
+            margin-left: auto;
+          }
+        }
+
+        .catalog-body {
+          max-height: 100%;
+
+          .catalog-tile-wrapper {
+            grid-template-columns: repeat(auto-fit, minmax(10px, 150px));
+            padding: 0;
+            grid-gap: 10px;
+
+            .catalog-tile {
+              p {
+                display: block;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                font-size: var(--ca-font-size);
+                font-weight: bold;
+                text-shadow: none;
+                text-transform: capitalize;
+                margin: 10px 0;
+              }
+            }
           }
         }
       }

package/lib/component/{model-list-item → configuration-side-bar-menu}/style/_layout.scss

@@ -1,53 +1,35 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-model-list-item-layout') {
-  .co-model-list-item {
-
-    .model-item-container {
+@include cfg.export-module('co-configuration-side-bar-menu-layout') {
+  co-configuration-side-bar-menu {
+    .configuration-side-bar-menu {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 30%;
+      background: var(--co-inphoto-dialog-background-color);
+      border-radius: var(--co-inphoto-border-radius);
       box-sizing: border-box;
-      padding: 10px;
-      border: 1px solid var(--co-model-list-item-border-color);
-      border-radius: var(--co-model-list-item-border-radius);
-
+      padding: 15px 25px;
 
-      .header-collapsable {
+      .configuration-side-bar-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-
         .header {
-          font-size: var(--co-inphoto-font-size-base);
+          font-size: var(--co-inphoto-font-size-text);
           font-weight: 600;
         }
-
-        .header-icon {
-          display: none;
+        
+        .header-close {
+          cursor: pointer;
         }
-
-        .header-icon-show {
-          display: block;
-        }
-      }
-
-      .collapsable-container {
-        height: 0;
-
-        overflow: hidden;
-        transition: height 0.3s ease-in-out;
-      }
-
-      .collapsable-container.active {
-        height: auto;
-        min-height: 100px;
       }
 
       .slider-container {
         width: 100%;
-        display: flex;
-        justify-content: space-between;
-
         input {
-          min-width: 70%;
+          width: 100%;
         }
       }
 
@@ -58,7 +40,7 @@
         align-items: center;
 
         .button-configure {
-          @include action-button(
+          @include cfg.action-button(
                           var(--co-inphoto-action-button-background),
                           var(--co-inphoto-action-button-background),
                           var(--co-inphoto-action-button-color),
@@ -71,7 +53,7 @@
           )
         }
         .button-remove {
-          @include action-button(
+          @include cfg.action-button(
                           var(--co-inphoto-action-button-background),
                           var(--co-inphoto-action-button-background),
                           var(--co-inphoto-action-button-color),

package/lib/component/configuration-side-bar-menu/style/_material-definition.scss

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

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

@@ -0,0 +1,10 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-configuration-side-bar-menu-theme') {
+  .co-configuration-side-bar-menu {
+
+  }
+}
+
+
+

package/lib/component/edit-canvas/style/_layout.scss

@@ -1,50 +1,21 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-edit-canvas-layout') {
+@include cfg.export-module('co-edit-canvas-layout') {
   .co-edit-canvas {
     .edit-canvas-container {
       position: relative;
-      max-height: 100vh;
-      overflow: scroll;
-
-      .toolbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        max-width: 120px;
-        position: absolute;
-        top: 20px;
-        left: calc(50% - 60px);
-        z-index: 1;
-        border-radius: 10px;
-
-        .toolbar-item {
-          border-radius: 10px;
-          cursor: pointer;
-          box-sizing: border-box;
-          padding: 10px;
-
-          .hidden-input {
-            display: none;
-          }
-
-          .toolbar-item-option {
-            position: absolute;
-            top: 50px;
-            box-sizing: border-box;
-            padding: 10px;
-            left: 0;
-            border-radius: 10px;
-          }
-        }
-      }
+      width: 100vw;
+      height: 100vh;
 
       .canvas-container {
         position: relative;
+        width: 100%;
+        height: 100%;
 
         canvas {
-          max-width: 100%;
+          width: 100%;
+          height: 100%;
+          display: block;
         }
 
         canvas.object-picker {
@@ -78,6 +49,7 @@
         align-items: center;
         justify-content: center;
         overflow: hidden;
+
         canvas {
           max-height: 100%;
         }