@colijnit/inphoto 300.1.0 → 300.1.2

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

@@ -1,52 +1,66 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-history-tile-layout') {
+@include cfg.export-module('co-image-history-tile-layout') {
   .co-image-history-tile {
+    flex: 0 0 auto;
+    width: 160px;
 
     .image-history-item {
-      width: 100%;
-      height: 100%;
-      max-height: 250px;
       position: relative;
+      width: 100%;
+      height: 115px;
+      border-radius: var(--co-inphoto-border-radius);
+      overflow: hidden;
+      cursor: pointer;
 
-      .image-history-hover {
-        visibility: hidden;
-        position: absolute;
-        top: 0;
-        left: 0;
+      img {
+        display: block;
         width: 100%;
         height: 100%;
-        border-radius: 10px;
+        object-fit: cover;
+      }
+
+      .tile-action {
+        position: absolute;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: space-around;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        color: #ffffff;
+        background: rgba(0, 0, 0, 0.55);
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        z-index: 1;
 
-        .image-history-item-zoom {
-          cursor: pointer;
-        }
+        @include cfg.default-icon(20px, 20px, #fff);
+      }
 
-        .tile-toolbar {
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-          gap: 25px;
-          cursor: pointer;
-        }
+      &:hover .tile-action {
+        opacity: 1;
+      }
 
+      .tile-action-select {
+        top: 6px;
+        right: 6px;
       }
 
-      &:hover {
-        .image-history-hover {
-          visibility: visible;
-        }
+      .tile-action-download {
+        bottom: 6px;
+        left: 6px;
       }
 
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 10px;
+      .tile-action-remove {
+        bottom: 6px;
+        right: 6px;
+      }
+
+      &--selected {
+        .tile-action-select {
+          opacity: 1;
+          background: #f5a623;
+        }
       }
     }
   }

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

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-history-tile-theme') {
+@include cfg.export-module('co-image-history-tile-theme') {
 
   .co-image-history-tile {
     .image-history-item {
@@ -12,11 +12,11 @@
         }
 
         .image-history-item-zoom {
-          @include default-icon(40px, 40px, #fff)
+          @include cfg.default-icon(40px, 40px, #fff)
         }
 
         .tile-toolbar {
-          @include default-icon(40px, 40px, #fff);
+          @include cfg.default-icon(40px, 40px, #fff);
         }
       }
     }

package/lib/component/image-process-complete/components/image-process-complete-next/style/_layout.scss

@@ -0,0 +1,45 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-image-process-complete-next-layout') {
+  .co-image-process-complete-next {
+    flex: 1;
+
+    .image-process-complete-next {
+      .image-process-complete-dialog-next-step {
+        background: var(--co-inphoto-background-white);
+        display: flex;
+        align-items: start;
+        justify-content: space-between;
+        border: 1px solid var(--co-inphoto-next-stop-border-color);
+        box-sizing: border-box;
+        padding: 10px;
+        border-radius: var(--co-inphoto-border-radius);
+        cursor: pointer;
+        min-height: 100px;
+
+        &:hover {
+          border-color: var(--co-inphoto-accent-color);
+        }
+
+        .next-step-icon {
+          margin-right: 15px;
+        }
+
+        .next-body {
+          .next-body-head {
+            @include cfg.sub-header-text();
+            margin-bottom: 15px;
+          }
+
+          .next-body-text {
+            @include cfg.text();
+          }
+        }
+
+        .next-step-continue {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

package/lib/component/image-process-complete/components/image-process-complete-next/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+  --co-inphoto-next-stop-border-color: #ECEDEE;
+}

package/lib/component/image-process-complete/components/image-process-complete-next/style/_theme.scss

@@ -0,0 +1,10 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-image-process-complete-next-theme') {
+  .co-image-process-complete-next {
+
+  }
+}
+
+
+

package/lib/component/image-process-complete/components/image-process-complete-next/style/material.scss

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

package/lib/component/image-process-complete/style/_layout.scss

@@ -0,0 +1,56 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-process-complete-layout') {
+  .co-image-process-complete {
+    .image-process-complete {
+      background-size: contain;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    .image-process-complete-dialog {
+      position: absolute;
+      width: 100%;
+      max-width: 980px;
+      top: 20%;
+      left: calc(50% - 490px);
+      box-sizing: border-box;
+      z-index: 10;
+
+      .image-process-complete-dialog-header {
+        display: flex;
+        align-items: center;
+
+        .header-icon {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          border-radius: 50%;
+        }
+
+        .header-button {
+          .co-button {
+            display: flex;
+            box-sizing: border-box;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .image-process-complete-dialog-body {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 20px;
+      }
+    }
+  }
+}

package/lib/component/image-process-complete/style/_material-definition.scss

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

package/lib/component/image-process-complete/style/_theme.scss

@@ -0,0 +1,66 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-process-complete-theme') {
+  .co-image-process-complete {
+
+    .image-process-complete-dialog {
+      background: var(--co-inphoto-dialog-background-color);
+      border-radius: var(--co-inphoto-border-radius);
+      padding: 15px 25px 25px;
+
+
+      .image-process-complete-dialog-header {
+        margin-bottom: 25px;
+
+        .header-icon {
+          background: var(--co-inphoto-header-icon-background);
+          color: var(--co-inphoto-success-color);
+          margin-right: 25px;
+          height: 50px;
+          width: 50px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          border-radius: 50%;
+          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-success-color));
+        }
+
+        .header-info {
+          .header-text {
+            @include cfg.header-text();
+          }
+
+          .explain-text {
+            @include cfg.text();
+          }
+        }
+
+        .header-button {
+          margin-left: auto;
+
+          .co-button {
+            @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;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+

package/lib/component/image-process-complete/style/material.scss

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

package/lib/component/image-tile/components/color-palette-option/style/_layout.scss

@@ -0,0 +1,17 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-color-palette-option-layout') {
+  .color-palette-option {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    border: 2px solid;
+    border-radius: 50%;
+
+    .color-palette-option-circle {
+      height: 100%;
+      width: 100%;
+      border-radius: 50%;
+    }
+  }
+}

package/lib/component/image-tile/components/color-palette-option/style/_material-definition.scss

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

package/lib/component/image-tile/components/color-palette-option/style/_theme.scss

@@ -0,0 +1,12 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-color-palette-option-theme') {
+  .color-palette-option {
+    padding: 2px;
+
+    .color-palette-option-circle {
+      @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+    }
+  }
+}
+

package/lib/component/image-tile/components/color-palette-option/style/material.scss

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

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

@@ -0,0 +1,100 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-title-layout') {
+  .co-image-title {
+
+    .image-tile {
+      border-radius: var(--co-inphoto-border-radius);
+      overflow: hidden;
+      width: 95%;
+      background: var(--co-inphoto-background-white);
+      cursor: pointer;
+
+      .image-tile-top {
+        position: relative;
+
+        .image-tile-index, .image-tile-remove {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          text-align: center;
+          background: var(--co-inphoto-background-white);
+        }
+
+        .image-tile-index {
+          top: 5px;
+          left: 5px;
+          font-size: 14px;
+        }
+
+        .image-tile-remove {
+          top: 5px;
+          right: 5px;
+          cursor: pointer;
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var( --co-inphoto-icon-color));
+        }
+
+        .image-tile-container {
+          min-height: 100px;
+
+          .mask-no-image-explain {
+            box-sizing: border-box;
+            padding: 30px 8px 0;
+            font-size: var(--co-inphoto-font-size-label)
+          }
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+      }
+
+      .image-tile-bottom {
+        box-sizing: border-box;
+        padding: 8px;
+
+        .brush-icon, .delete-icon {
+          cursor: pointer;
+          @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var( --co-inphoto-icon-color));
+
+          .co-icon {
+            display: block;
+            margin: 5px auto;
+          }
+        }
+
+        .hide-delete-button, .hide-brush-button {
+          display: none;
+        }
+
+        .color-palette-wrapper {
+          cursor: pointer;
+
+          .color-palette {
+            display: grid;
+            grid-template-columns: repeat(5, 25px);
+          }
+
+          .color-palette-disabled {
+            pointer-events: none;
+          }
+
+          .color-palette-hidden {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .active-item {
+      .image-tile-top {
+        .image-tile-index {
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+    }
+  }
+}

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

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

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

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

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

@@ -1,23 +1,42 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-upload-layout') {
+@include cfg.export-module('co-image-upload-layout') {
   .co-image-upload {
     .upload-container {
-      border-radius: 10px;
-      padding: 40px;
+      min-width: 400px;
+      border-radius: var(--co-inphoto-border-radius);
+      padding: 20px;
       text-align: center;
       cursor: pointer;
       position: relative;
 
       .image-upload-icon {
-        width: 75px;
-        height: 75px;
-        border-radius: 50%;
+        width: 40px;
+        height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
       }
+
+      .upload-supported-formats-container {
+        margin-top: 15px;
+        width: 200px;
+        display: flex;
+        justify-self: center;
+        justify-content: space-between;
+
+        .supported-format {
+          border: 1px solid var(--co-inphoto-upload-border-color);
+          color: var(--co-inphoto-accent-text);
+          font-size: var(--co-inphoto-font-size-label);
+          font-weight: bold;
+          border-radius: 15px;
+          box-sizing: border-box;
+          padding: 4px 10px;
+          margin: 0 4px;
+        }
+      }
     }
 
     .preview {
@@ -35,21 +54,24 @@
       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;
+          border-radius: var(--co-inphoto-border-radius);
         }
+
         .uploaded-file-overlay {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
-          border-radius: 10px;
+          border-radius: var(--co-inphoto-border-radius);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -71,17 +93,11 @@
         }
       }
     }
-  }
 
-  .image-upload-compact {
-    .upload-container {
-      padding: 20px;
 
-      .image-upload-icon {
-        visibility: hidden;
-        width: 0;
-        height: 0;
-        overflow: hidden;
+    .compact {
+      .upload-container {
+        padding: 10px;
       }
     }
   }

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

@@ -1,7 +1,7 @@
 :root {
-  --co-inphoto-upload-border-width: 3px;
-  --co-inphoto-upload-background: #f9fbfd;
-  --co-inphoto-upload-border-color: #ccc;
+  --co-inphoto-upload-border-width: 2px;
+  --co-inphoto-upload-background: #fff;
+  --co-inphoto-upload-border-color: #CBD5E1;
   --co-inphoto-upload-dragging-border-color: #1A73E8;
   --co-inphoto-upload-dragging-background: #f5f7ff;
   --co-inphoto-upload-icon-background: #e2e8f0;

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

@@ -1,25 +1,26 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-upload-theme') {
+@include cfg.export-module('co-image-upload-theme') {
   .co-image-upload {
     .upload-container {
-
       background: var(--co-inphoto-upload-background);
-      border: var(--co-inphoto-upload-border-width) dotted var(--co-inphoto-upload-border-color);
+      border: var(--co-inphoto-upload-border-width) dashed var(--co-inphoto-upload-border-color);
 
       .image-upload-icon {
-        background: var(--co-inphoto-upload-icon-background);
-        @include default-icon(50px, 50px, var(--co-inphoto-upload-icon-color));
+        @include cfg.default-icon(30px, 30px, var(--co-inphoto-upload-icon-color));
+      }
+
+      .upload-content-header {
+        @include cfg.sub-header-text();
       }
 
       .upload-content-text {
-        font-size: var(--co-inphoto-font-size-label);
-        padding: 5px;
+        @include cfg.text();
+        color: var(--co-inphoto-accent-text);
       }
 
       .upload-content {
         margin: 5px auto;
-        max-width: 280px;
       }
     }
 
@@ -34,16 +35,16 @@
     }
 
     .upload-content .upload-button {
-      @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)
+      @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)
       );
     }
 
@@ -53,7 +54,7 @@
           background-color: var(--co-inphoto-loader-background-dark);
 
           .remove-button {
-            @include default-icon(20px, 20px, #fff);
+            @include cfg.default-icon(20px, 20px, #fff);
           }
         }
       }
@@ -67,5 +68,13 @@
       }
     }
   }
+
+  .compact {
+    .upload-container {
+      .upload-content-text {
+        font-size: var(--co-inphoto-font-size-label);
+      }
+    }
+  }
 }