@colijnit/inphoto 262.1.0

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

@@ -0,0 +1,15 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-back-next-buttons-layout') {
+  .co-back-next-buttons {
+    .info-navigation-buttons {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .co-button.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}

package/lib/component/back-next-buttons/style/_material-definition.scss

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

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

@@ -0,0 +1,18 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-back-next-buttons-theme') {
+  .co-back-next-buttons {
+    .info-navigation-buttons {
+      .back-button {
+        @include secondary-button;
+      }
+
+      .next-button, .generate-button {
+        @include primary-button;
+      }
+    }
+  }
+}
+
+
+

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

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

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

@@ -0,0 +1,84 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('cco-catalog-layout') {
+  .co-catalog {
+    .catalog-dialog {
+      width: 100vw;
+      height: 100vh;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      z-index: 10;
+      overflow: hidden;
+      box-sizing: border-box;
+
+      .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;
+
+        .catalog-dialog-wrapper {
+          display: flex;
+          align-items: center;
+          padding: 10px;
+
+          .back-button {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+          }
+
+          .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;
+              position: relative;
+              display: flex;
+              flex-direction: column;
+              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

@@ -0,0 +1,3 @@
+:root {
+  --co-photo-editor-background-color: #ffffff;
+}

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

@@ -0,0 +1,17 @@
+@import "../../../style/mixin.scss";
+
+@include 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));
+          }
+        }
+      }
+    }
+  }
+}
+

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

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

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

@@ -0,0 +1,87 @@
+@import "../../../style/mixin.scss";
+
+@include 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;
+          }
+        }
+      }
+
+      .canvas-container {
+        position: relative;
+
+        canvas {
+          max-width: 100%;
+        }
+
+        canvas.object-picker {
+          cursor: crosshair;
+        }
+
+        .close-canvas-button, .open-canvas-button {
+          position: absolute;
+          cursor: pointer;
+        }
+
+        .close-canvas-button {
+          top: 20px;
+          right: 20px;
+        }
+
+        .open-canvas-button {
+          bottom: 20px;
+          right: 20px;
+        }
+      }
+
+      .canvas-container.canvas-full-screen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        canvas {
+          max-height: 100%;
+        }
+      }
+    }
+  }
+}

package/lib/component/edit-canvas/style/_material-definition.scss

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

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

@@ -0,0 +1,33 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-edit-canvas-theme') {
+  .co-edit-canvas {
+
+    .edit-canvas-container {
+      .toolbar {
+        background-color: var(--co-inphoto-loader-background-light);
+
+        .toolbar-item {
+          .toolbar-item-option {
+            background: #fff;
+          }
+
+          &:hover {
+            background-color: rgba(255, 255, 255, 1);
+          }
+        }
+      }
+
+      .canvas-container {
+        .close-canvas-button, .open-canvas-button {
+          @include default-icon(30px, 30px, #fff);
+        }
+      }
+
+      .canvas-container.canvas-full-screen {
+        background-color: var(--co-inphoto-loader-background-dark);
+      }
+    }
+  }
+}
+

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

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

package/lib/component/error-dialog/style/_layout.scss

@@ -0,0 +1,40 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-error-dialog-layout') {
+  .co-error-dialog {
+
+    .error-dialog {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background:var(--co-inphoto-loader-background-dark);
+      z-index: 120;
+
+      .error-dialog-container {
+        background: #fff;
+        padding: 20px;
+        border-radius: 10px;
+        max-width: 550px;
+        width: 100%;
+
+        .error-dialog-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 5px;
+
+          h3 {
+            margin: 0;
+          }
+
+          .co-button {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+  }
+}

package/lib/component/error-dialog/style/_material-definition.scss

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

package/lib/component/error-dialog/style/_theme.scss

@@ -0,0 +1,10 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-error-dialog-theme') {
+  .co-error-dialog {
+
+  }
+}
+
+
+

package/lib/component/error-dialog/style/material.scss

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

package/lib/component/image-enhancer/style/_layout.scss

@@ -0,0 +1,38 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-enhancer-layout') {
+  .co-image-enhancer {
+    .image-enhancer-container {
+      width: 100%;
+
+      .header {
+        .header-icon-container {
+          margin-bottom: 10px;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+      }
+
+      .tabs {
+        align-items: center;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        border-radius: 5px;
+
+        .instruction-dialog {
+          font-size: var(--font-size-small);
+        }
+
+        .tab-button {
+          box-sizing: border-box;
+          padding: 10px;
+          cursor: pointer;
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}

package/lib/component/image-enhancer/style/_material-definition.scss

@@ -0,0 +1,7 @@
+:root {
+  --co-inphoto-tab-header-font-size: 12px;
+  --co-inphoto-tab-background-color: #f0f0f0;
+  --co-inphoto-tab-border-color: #f0f0f0;
+  --co-inphoto-tab-active-background-color: #ffffff;
+  --co-inphoto-tab-active-color: #3f51b5;
+}

package/lib/component/image-enhancer/style/_theme.scss

@@ -0,0 +1,40 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-enhancer-theme') {
+  .co-image-enhancer {
+    .image-enhancer-container {
+      .header {
+        .header-icon-container {
+          margin-bottom: 10px;
+          h2 {
+            font-size: var(--co-inphoto-font-size-head);
+            color: var(--co-inphoto-color-dark);
+          }
+        }
+      }
+
+      .tabs {
+        background: var(--co-inphoto-tab-background-color);
+        border-radius: 5px;
+
+        .tab-button {
+          border-radius: 5px;
+          background: var(--co-inphoto-tab-background-color);
+          color: var(--co-inphoto-color-dark);
+          font-size: var(--co-inphoto-tab-header-font-size);
+          border: 2px solid var(--co-inphoto-tab-border-color);
+
+          &:hover {
+            background: var(--co-inphoto-tab-active-background-color);
+          }
+
+          &.active {
+            background: var(--co-inphoto-tab-active-background-color);
+            color: var(--co-inphoto-tab-active-color);
+          }
+        }
+      }
+    }
+  }
+}
+

package/lib/component/image-enhancer/style/material.scss

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

package/lib/component/image-enhancer-style/style/_layout.scss

@@ -0,0 +1,15 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-enhancer-style-layout') {
+  .co-image-enhancer-style {
+    .form-part-container, .custom-prompt-container {
+      margin: 20px auto;
+    }
+
+    .custom-prompt-container {
+      .co-input-checkbox {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

package/lib/component/image-enhancer-style/style/_material-definition.scss

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

package/lib/component/image-enhancer-style/style/_theme.scss

@@ -0,0 +1,10 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-enhancer-style-theme') {
+  .co-image-enhancer-style {
+
+  }
+}
+
+
+

package/lib/component/image-enhancer-style/style/material.scss

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

package/lib/component/image-enhancer-upload/style/_layout.scss

@@ -0,0 +1,18 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-enhancer-upload-layout') {
+  .co-image-enhancer-upload {
+
+    .image-enhancer-upload {
+      box-sizing: border-box;
+      padding: 20px 10px;
+
+      .custom-prompt-container {
+        margin: 20px 0;
+        .co-input-checkbox {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+}

package/lib/component/image-enhancer-upload/style/_material-definition.scss

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

package/lib/component/image-enhancer-upload/style/_theme.scss

@@ -0,0 +1,10 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-enhancer-upload-theme') {
+  .co-image-enhancer-upload {
+
+  }
+}
+
+
+

package/lib/component/image-enhancer-upload/style/material.scss

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

package/lib/component/image-history/style/_layout.scss

@@ -0,0 +1,46 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-history-layout') {
+  .co-image-history {
+    .image-history-container {
+      box-sizing: border-box;
+      padding: 20px;
+
+      .image-history-header {
+
+      }
+
+      .image-history-tiles {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 10px;
+      }
+    }
+
+    .larger-image-dialog {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1000;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .close-dialog-button {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        cursor: pointer;
+      }
+
+      .large-image {
+        max-width: 90%;
+        max-height: 90%;
+        object-fit: contain;
+      }
+    }
+  }
+}

package/lib/component/image-history/style/_material-definition.scss

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

package/lib/component/image-history/style/_theme.scss

@@ -0,0 +1,16 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-history-theme') {
+  .co-image-history {
+    .larger-image-dialog {
+      background-color: var(--co-inphoto-loader-background-dark);
+
+      .close-dialog-button {
+        @include default-icon(30px, 30px, #fff);
+      }
+    }
+  }
+}
+
+
+

package/lib/component/image-history/style/material.scss

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

package/lib/component/image-history-tile/style/_layout.scss

@@ -0,0 +1,53 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-history-tile-layout') {
+  .co-image-history-tile {
+
+    .image-history-item {
+      width: 100%;
+      height: 100%;
+      max-height: 250px;
+      position: relative;
+
+      .image-history-hover {
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+
+        .image-history-item-zoom {
+          cursor: pointer;
+        }
+
+        .tile-toolbar {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          gap: 25px;
+          cursor: pointer;
+        }
+
+      }
+
+      &:hover {
+        .image-history-hover {
+          visibility: visible;
+        }
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 10px;
+      }
+    }
+  }
+}

package/lib/component/image-history-tile/style/_material-definition.scss

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

package/lib/component/image-history-tile/style/_theme.scss

@@ -0,0 +1,27 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-history-tile-theme') {
+
+  .co-image-history-tile {
+    .image-history-item {
+      .image-history-hover {
+        background-color: var(--co-inphoto-loader-background-dark);
+
+        .co-button {
+          background: none;
+        }
+
+        .image-history-item-zoom {
+          @include default-icon(40px, 40px, #fff)
+        }
+
+        .tile-toolbar {
+          @include default-icon(40px, 40px, #fff);
+        }
+      }
+    }
+  }
+}
+
+
+