@colijnit/inphoto 300.1.0 → 300.1.2

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

@@ -1,14 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-inphoto-layout') {
+@include cfg.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/_theme.scss

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

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

@@ -1,30 +1,15 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-photo-editor-layout') {
+@include cfg.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;
-        }
+    .photo-editor-upload {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: 100vh;
+      width: 100vw;
+    }
 
-        .enhancer-container {
-          width: 30%;
-        }
-      }
 
-      .photo-editor-upload {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-      }
-    }
   }
 }

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

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

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

@@ -1,42 +1,101 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-prepare-starting-image-layout') {
+@include cfg.export-module('co-prepare-starting-image-layout') {
   .co-prepare-starting-image {
     .prepare-starting-image-container {
+      background-size: contain;
       display: flex;
-      gap: 20px;
+      justify-content: space-around;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
+      background-repeat: no-repeat;
+      background-position: center;
 
-      .prepare-starting-image-canvas-container {
-        width: 70%;
-      }
-
-      .prepare-info-container {
-        width: 30%;
+      .prepare-starting-image-dialog {
+        width: 100%;
+        max-width: 960px;
+        box-sizing: border-box;
+        padding: 25px;
+        position: relative;
 
-        .info-container {
-          box-sizing: border-box;
-          padding: 10px;
+        .prepare-starting-dialog-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 25px;
 
-          .header-icon-container {
-            margin-bottom: 10px;
+          .header-icon {
+            width: 50px;
+            height: 50px;
             display: flex;
+            justify-content: space-around;
             align-items: center;
-            gap: 10px;
+            border-radius: 50%;
           }
 
-          .main-action-buttons {
-            display: flex;
-            justify-content: space-between;
+          .header-info {
+            max-width: 500px;
+          }
 
-            .remove-all-button, .make-selection-button {
-              min-width: 45%;
+          .header-button {
+            .co-button {
+              display: flex;
+              box-sizing: border-box;
+              cursor: pointer;
             }
           }
         }
 
-        .co-button.disabled {
-          cursor: not-allowed;
-          opacity: 0.5;
+        .dialog-container {
+          display: grid;
+          grid-gap: 15px;
+          grid-template-columns: repeat(3, minmax(100px, .5fr));
+
+          .button-container {
+            cursor: pointer;
+            position: relative;
+
+            .image-container {
+              min-width: 100%;
+              min-height: 200px;
+              max-height: 250px;
+              display: flex;
+              align-items: center;
+              align-content: center;
+            }
+
+            .button-container-text-container {
+              box-sizing: border-box;
+
+              .tile-head-new-container {
+                margin-bottom: 10px;
+              }
+
+              .tile-next-icon {
+                width: 45px;
+                height: 45px;
+                display: flex;
+                align-items: center;
+                position: absolute;
+                bottom: 8px;
+                right: 8px;
+
+                .co-icon {
+                  flex: 1;
+                }
+              }
+            }
+          }
+        }
+
+        .prepare-image-disclaimer {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
         }
       }
     }

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

@@ -1,5 +1,3 @@
 :root {
-  --co-inphoto-make-selection-button-background: #17953a;
-  --co-inphoto-make-selection-button-border-color: #17953a;
-  --co-inphoto-make-selection-button-hover-background: #158a36;
+  --co-inphoto-tile-next-background: #EFEEEE;
 }

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

@@ -1,69 +1,124 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-prepare-starting-image-theme') {
+@include cfg.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);
+
+      .prepare-starting-image-dialog {
+        background: var(--co-inphoto-dialog-background-color);
+        border-radius: var(--co-inphoto-border-radius);
+
+        .prepare-starting-dialog-header {
+          text-align: center;
+
+          .header-icon {
+            background: #FFF7ED;
+            color: #D29428;
+            @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), #D29428);
+          }
+
+          .header-info {
+
+            .header-text {
+              @include cfg.header-text();
+            }
+
+            .explain-text {
+              @include cfg.text();
             }
           }
 
-          p {
-            font-size: var(--co-inphoto-font-size-label);
-            color: var(--co-inphoto-color-dark);
+          .header-button {
+            .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;
+              }
+            }
           }
         }
 
-        .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))
-        }
+        .dialog-container {
+          display: grid;
+          grid-gap: 15px;
+          grid-template-columns: repeat(3, minmax(100px, .5fr));
 
-        .remove-all-button, .make-selection-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)
-          )
-        }
+          .button-container {
+            border-radius: var(--co-inphoto-border-radius);
+            background: var(--co-inphoto-background-white);
+            border: 1px solid var(--co-inphoto-border-color);
+            box-shadow: var(--co-inphoto-dialog-box-shadow);
+            box-sizing: border-box;
+            padding: 8px 8px 25px;
+
+            .image-container {
+              border-radius: var(--co-inphoto-border-radius);
 
-        .process-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)
-          )
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: var(--co-inphoto-border-radius);
+              }
+            }
+
+            .button-container-text-container {
+              padding: 16px 8px 40px;
+
+              .tile-head {
+                @include cfg.sub-header-text();
+                margin-bottom: 10px;
+              }
+
+              .tile-text {
+                @include cfg.text();
+              }
+
+              .tile-head-new-container {
+
+                .text-head-new {
+                  margin-left: 10px;
+                  box-sizing: border-box;
+                  padding: 4px 12px;
+                  border-radius: var(--co-inphoto-border-radius);
+                  background: var(--co-inphoto-header-icon-background);
+                  color: var(--co-inphoto-success-color);
+                  font-size: var(--co-inphoto-font-size-label);
+                  font-weight: bold;
+                }
+              }
+
+              .tile-next-icon {
+                border-radius: 50%;
+                background: var(--co-inphoto-dialog-background-color);
+                @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
+              }
+            }
+
+            &:hover {
+              border-color: var(--co-inphoto-accent-color);
+            }
+          }
         }
 
+        .prepare-image-disclaimer {
+          margin-top: 20px;
+          @include cfg.text();
+          color: var(--co-inphoto-accent-text);
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
+        }
       }
     }
   }

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

@@ -1,15 +1,14 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-process-loader-layout') {
+@include cfg.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;
+      z-index: 101;
     }
 
     .loader-container {
@@ -17,22 +16,78 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 250px;
-      padding: 20px;
-      border-radius: 10px;
+      width: 375px;
+      padding: 25px;
+
+      .loading-icon {
+        width: 100px;
+        height: 100px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        border-radius: 50%;
+        box-sizing: border-box;
+        padding: 15px;
+      }
+
+      .loading-text-carousel {
+        margin-top: 30px;
+        width: 450px;
+        height: 60px;
+        overflow: hidden;
+      }
+
+      .loading-text-track {
+        display: flex;
+        flex-direction: column;
+        transform: translateY(calc(var(--active, 0) * 60px * -1));
+        transition: transform 0.5s ease-in-out;
+
+        &.no-transition {
+          transition: none;
+        }
+      }
+
+      .loading-text-item {
+        flex: 0 0 auto;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        white-space: normal;
+        @include cfg.sub-header-text();
+
+        &::before {
+          content: '';
+          flex: none;
+          width: 1.5em;
+        }
+      }
+
+      .lt-dots {
+        display: inline-flex;
+        flex: none;
+        width: 1.5em;
 
-      .loader-estimated-time {
         span {
-          font-size: var(--co-inphoto-font-size-label);
-          margin-right: 5px;
+          animation: drop 1.4s ease-in-out infinite;
+
+          &:nth-child(2) {
+            animation-delay: 0.15s;
+          }
+
+          &:nth-child(3) {
+            animation-delay: 0.30s;
+          }
         }
       }
     }
 
-    .percentage {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    @media (prefers-reduced-motion: reduce) {
+      .loading-text-track {
+        transition: none;
+      }
     }
   }
 }

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

@@ -1,3 +1,6 @@
 :root {
 
+  --co-inphoto-loader-icon-size: 220px;
+  --co-inphoto-loader-pulse-duration: 2.4s;
+  --co-inphoto-loader-twinkle-duration: 1.6s;
 }

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

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-process-loader-theme') {
+@include cfg.export-module('co-process-loader-theme') {
   .co-process-loader {
 
     .loader-wrapper {
@@ -8,17 +8,93 @@
     }
 
     .loader-container {
-      background: #fff;
+      border-radius: var(--co-inphoto-border-radius);
+      background: var(--co-inphoto-dialog-background-color);
     }
 
-    .percentage {
-      font-size: var(--co-inphoto-font-size-sub-head);
-      font-weight: 600;
+    .loading-icon {
+      background: var(--co-inphoto-header-icon-background);
+      animation: wrap-pulse 2.4s ease-in-out infinite;
+
+      svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+
+      .spark {
+        fill: var(--co-inphoto-success-color);
+        transform-box: fill-box;
+        transform-origin: center;
+        transform-style: preserve-3d;
+
+        &--big {
+          animation: pulse var(--co-inphoto-loader-pulse-duration) ease-in-out infinite;
+        }
+
+        &--small-a {
+          animation: twinkle var(--co-inphoto-loader-twinkle-duration) ease-in-out infinite;
+          animation-delay: 0.3s;
+        }
+
+        &--small-b {
+          animation: twinkle var(--co-inphoto-loader-twinkle-duration) ease-in-out infinite;
+          animation-delay: 0.9s;
+        }
+      }
+    }
+
+    @keyframes wrap-pulse {
+      0% {
+        box-shadow: 0 0 0 0 rgba(222, 241, 221, 0.7);
+      }
+      70% {
+        box-shadow: 0 0 0 20px rgba(222, 241, 221, 0);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(222, 241, 221, 0);
+      }
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+      }
+      50% {
+        transform: scale(1.12) rotate(8deg);
+        opacity: 0.85;
+      }
+    }
+
+    @keyframes twinkle {
+      0%, 100% {
+        transform: scale(0.5);
+        opacity: 0.25;
+      }
+      50% {
+        transform: scale(1.15);
+        opacity: 1;
+      }
     }
 
-    p {
-      margin-top: 16px;
-      font-size: var(--co-inphoto-font-size-base);
+    @keyframes drop {
+      0% {
+        transform: translateY(-0.6em);
+        opacity: 0;
+      }
+      20% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+      80% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-0.6em);
+        opacity: 0;
+      }
     }
   }
 }

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

@@ -0,0 +1,65 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ready-to-add-articles-layout') {
+  .co-ready-to-add-articles {
+    .ready-to-add-articles-container {
+      position: absolute;
+      left: 135px;
+      top: 100px;
+      box-sizing: border-box;
+      max-width: 450px;
+
+      .ready-to-add-article-top {
+        display: flex;
+        box-sizing: border-box;
+        justify-content: space-between;
+
+        .top-left-container {
+          width: 20%;
+
+          .icon-container {
+            border-radius: 50%;
+            height: 50px;
+            width: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+          }
+        }
+
+        .top-right-container {
+          margin-left: 20px;
+          max-width: 80%;
+        }
+
+        .top-close-container {
+          .co-icon {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .ready-to-add-article-bottom {
+        display: flex;
+        box-sizing: border-box;
+        justify-content: space-between;
+
+        .bottom-left-container {
+          .icon-container {
+            border-radius: 50%;
+            height: 35px;
+            width: 35px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+          }
+        }
+
+        .bottom-right-container {
+          margin-left: auto;
+          max-width: 85%;
+        }
+      }
+    }
+  }
+}

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

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