@colijnit/inphoto 262.1.0

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

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

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

@@ -0,0 +1,92 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-upload-layout') {
+  .co-image-upload {
+    .upload-container {
+      border-radius: 10px;
+      padding: 40px;
+      text-align: center;
+      cursor: pointer;
+      position: relative;
+
+      .image-upload-icon {
+        width: 75px;
+        height: 75px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+      }
+    }
+
+    .preview {
+      margin-top: 20px;
+    }
+
+    .preview img {
+      max-width: 300px;
+      border-radius: 8px;
+    }
+
+
+    .uploaded-files-preview-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: 10px;
+      margin-top: 10px;
+      .uploaded-file-preview {
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 10px;
+        }
+        .uploaded-file-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          text-align: center;
+          width: 100%;
+          visibility: hidden;
+
+          .remove-button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            cursor: pointer;
+          }
+        }
+
+        &:hover .uploaded-file-overlay {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  .image-upload-compact {
+    .upload-container {
+      padding: 20px;
+
+      .image-upload-icon {
+        visibility: hidden;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+
+
+
+}

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

@@ -0,0 +1,6 @@
+:root {
+  --co-inphoto-upload-border-width: 3px;
+  --co-inphoto-upload-border-color: #ccc;
+  --co-inphoto-upload-dragging-border-color: #3f51b5;
+  --co-inphoto-upload-dragging-background: #f5f7ff;
+}

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

@@ -0,0 +1,54 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-image-upload-theme') {
+  .co-image-upload {
+    .upload-container {
+      border: var(--co-inphoto-upload-border-width) dotted var(--co-inphoto-upload-border-color);
+
+      .image-upload-icon {
+        background: #f0f0f0;
+        @include default-icon(50px, 50px, #000);
+      }
+
+      .upload-content-text {
+        font-size: var(--co-inphoto-font-size-label);
+        padding: 5px;
+      }
+    }
+
+    .upload-container.dragging {
+      border-color: var(--co-inphoto-upload-dragging-border-color);
+      background: var(--co-inphoto-upload-dragging-background);
+    }
+
+    .upload-container.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .upload-content .upload-button {
+      @include primary-button;
+    }
+
+    .uploaded-files-preview-container {
+      .uploaded-file-preview {
+        .uploaded-file-overlay {
+          background-color: var(--co-inphoto-loader-background-dark);
+
+          .remove-button {
+            @include default-icon(20px, 20px, #fff);
+          }
+        }
+      }
+    }
+  }
+
+  .image-upload-compact {
+    .upload-container {
+      p {
+        font-size: 10px;
+      }
+    }
+  }
+}
+

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

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

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

@@ -0,0 +1,14 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-inphoto-layout') {
+  .co-inphoto {
+    .co-inphoto-container {
+      width: 100%;
+      max-width: 1600px;
+      margin: 0 auto;
+      .co-inphoto-body {
+
+      }
+    }
+  }
+}

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

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

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

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

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

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

package/lib/component/model-list/style/_layout.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-model-list-layout') {
+  .co-model-list {
+
+  }
+}

package/lib/component/model-list/style/_material-definition.scss

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

package/lib/component/model-list/style/_theme.scss

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

package/lib/component/model-list/style/material.scss

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

package/lib/component/model-list-item/style/_layout.scss

@@ -0,0 +1,69 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-model-list-item-layout') {
+  .co-model-list-item {
+
+    .model-item-container {
+      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);
+
+
+      .header-collapsable {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .header {
+          font-size: var(--co-inphoto-font-size-base);
+          font-weight: 600;
+        }
+
+        .header-icon {
+          display: none;
+        }
+
+        .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%;
+        }
+      }
+
+      .buttons {
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+        align-items: center;
+
+        .button-configure {
+          @include primary-button;
+        }
+        .button-remove {
+          @include secondary-button;
+        }
+      }
+    }
+  }
+}

package/lib/component/model-list-item/style/_material-definition.scss

@@ -0,0 +1,4 @@
+:root {
+  --co-model-list-item-border-color: #eee;
+  --co-model-list-item-border-radius: 10px;
+}

package/lib/component/model-list-item/style/_theme.scss

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

package/lib/component/model-list-item/style/material.scss

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

package/lib/component/photo-editor/style/_layout.scss

@@ -0,0 +1,30 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-photo-editor-layout') {
+  .co-photo-editor {
+    .photo-editor-dialog {
+      .photo-editor-container {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        gap: 20px;
+
+        .photo-editor-canvas {
+          width: 70%;
+          height: auto;
+        }
+
+        .enhancer-container {
+          width: 30%;
+        }
+      }
+
+      .photo-editor-upload {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+      }
+    }
+  }
+}

package/lib/component/photo-editor/style/_material-definition.scss

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

package/lib/component/photo-editor/style/_theme.scss

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

package/lib/component/photo-editor/style/material.scss

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

package/lib/component/prepare-starting-image/style/_layout.scss

@@ -0,0 +1,35 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-prepare-starting-image-layout') {
+  .co-prepare-starting-image {
+    .prepare-starting-image-container {
+      display: flex;
+      gap: 20px;
+
+      .prepare-starting-image-canvas-container {
+        width: 70%;
+      }
+
+      .prepare-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;
+          }
+        }
+
+        .co-button.disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}

package/lib/component/prepare-starting-image/style/_material-definition.scss

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

package/lib/component/prepare-starting-image/style/_theme.scss

@@ -0,0 +1,37 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-prepare-starting-image-theme') {
+  .co-prepare-starting-image {
+    .prepare-starting-image-container {
+      .prepare-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);
+            }
+          }
+          p {
+            font-size: var(--co-inphoto-font-size-label);
+            color: var(--co-inphoto-color-dark);
+          }
+        }
+
+        .action-button {
+          margin: 20px 0;
+          @include primary-button;
+        }
+
+        .process-button {
+          margin: 20px 0;
+          @include secondary-button;
+        }
+
+      }
+    }
+  }
+}
+
+
+

package/lib/component/prepare-starting-image/style/material.scss

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

package/lib/component/process-loader/style/_layout.scss

@@ -0,0 +1,38 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-process-loader-layout') {
+  .co-process-loader {
+
+    .loader-wrapper {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 50;
+    }
+
+    .loader-container {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 250px;
+      padding: 20px;
+      border-radius: 10px;
+
+      .loader-estimated-time {
+        span {
+          font-size: var(--co-inphoto-font-size-label);
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .percentage {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/lib/component/process-loader/style/_material-definition.scss

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

package/lib/component/process-loader/style/_theme.scss

@@ -0,0 +1,27 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-process-loader-theme') {
+  .co-process-loader {
+
+    .loader-wrapper {
+      background: var(--co-inphoto-loader-background-dark);
+    }
+
+    .loader-container {
+      background: #fff;
+    }
+
+    .percentage {
+      font-size: var(--co-inphoto-font-size-sub-head);
+      font-weight: 600;
+    }
+
+    p {
+      margin-top: 16px;
+      font-size: var(--co-inphoto-font-size-base);
+    }
+  }
+}
+
+
+

package/lib/component/process-loader/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

@@ -0,0 +1,40 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-side-bar-menu-layout') {
+  .co-side-bar-menu {
+    .lib-menu-bar {
+      position: absolute;
+      // todo revert tot 1
+      z-index: 5;
+      width: 50px;
+      top: 0;
+      left: 0;
+      height: 100vh;
+
+      .lib-menu-bar-item {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        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;
+        }
+
+        &:hover {
+          .lib-menu-tooltip {
+            left: 50px;
+          }
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-side-bar-menu-theme') {
+  .co-side-bar-menu {
+    .lib-menu-bar {
+      background-color: var(--co-inphoto-loader-background-dark);
+
+      .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/side-bar-menu/style/material.scss

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

package/lib/component/step-menu/style/_layout.scss

@@ -0,0 +1,43 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-step-menu-layout') {
+  .co-step-menu {
+    .step-menu-container {
+      width: 100%;
+      max-width: 1200px;
+      margin: 20px auto;
+      display: flex;
+      gap: 50px;
+      justify-content: space-between;
+      justify-items: center;
+
+      .step-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        cursor: pointer;
+
+        .step-menu-item-number {
+          height: 40px;
+          width: 40px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      .step-disabled {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      .step-finished {
+        .step-menu-item-finished {
+          box-sizing: border-box;
+          padding: 5px;
+        }
+      }
+    }
+  }
+}

package/lib/component/step-menu/style/_material-definition.scss

@@ -0,0 +1,7 @@
+:root {
+  --co-inphoto-step-menu-number-background-color: #f0f0f0;
+  --co-inphoto-step-menu-number-color: #fff;
+  --co-inphoto-step-menu-active-background-color: #3f51b5;
+  --co-inphoto-step-menu-finished-background-color: #4caf50;
+  --co-inphoto-step-menu-default-icon-color: #000;
+}