@colijnit/inphoto 300.1.8 → 301.1.0

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

@@ -1,74 +1,74 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-process-loader-layout') {
-  .co-process-loader {
-    .loader-wrapper {
-      position: var(--co-inphoto-process-loader-position-fixed);
-      inset: var(--co-inphoto-process-loader-inset-zero);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: var(--co-inphoto-process-loader-wrapper-z-index);
-    }
-
-    .loader-container {
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: var(--co-inphoto-process-loader-container-width);
-      padding: var(--co-inphoto-process-loader-container-padding);
-
-      .loading-icon {
-        width: var(--co-inphoto-process-loader-icon-size);
-        height: var(--co-inphoto-process-loader-icon-size);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        padding: var(--co-inphoto-process-loader-icon-padding);
-      }
-
-      .loading-text-carousel {
-        margin-top: var(--co-inphoto-process-loader-carousel-margin-top);
-        width: var(--co-inphoto-process-loader-carousel-width);
-        height: var(--co-inphoto-process-loader-text-item-height);
-        overflow: hidden;
-      }
-
-      .loading-text-track {
-        display: flex;
-        flex-direction: column;
-        transform: var(--co-inphoto-process-loader-track-transform);
-      }
-
-      .loading-text-item {
-        flex: 0 0 auto;
-        height: var(--co-inphoto-process-loader-text-item-height);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        white-space: normal;
-        @include cfg.sub-header-text();
-
-        &::before {
-          content: '';
-          flex: none;
-          width: var(--co-inphoto-process-loader-dots-size);
-        }
-      }
-
-      .lt-dots {
-        display: inline-flex;
-        flex: none;
-        width: var(--co-inphoto-process-loader-dots-size);
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .loading-text-track {
-        transition: var(--co-inphoto-process-loader-track-transition-none);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-process-loader-layout') {
+  .co-process-loader {
+    .loader-wrapper {
+      position: var(--co-inphoto-process-loader-position-fixed);
+      inset: var(--co-inphoto-process-loader-inset-zero);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--co-inphoto-process-loader-wrapper-z-index);
+    }
+
+    .loader-container {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: var(--co-inphoto-process-loader-container-width);
+      padding: var(--co-inphoto-process-loader-container-padding);
+
+      .loading-icon {
+        width: var(--co-inphoto-process-loader-icon-size);
+        height: var(--co-inphoto-process-loader-icon-size);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: var(--co-inphoto-process-loader-icon-padding);
+      }
+
+      .loading-text-carousel {
+        margin-top: var(--co-inphoto-process-loader-carousel-margin-top);
+        width: var(--co-inphoto-process-loader-carousel-width);
+        height: var(--co-inphoto-process-loader-text-item-height);
+        overflow: hidden;
+      }
+
+      .loading-text-track {
+        display: flex;
+        flex-direction: column;
+        transform: var(--co-inphoto-process-loader-track-transform);
+      }
+
+      .loading-text-item {
+        flex: 0 0 auto;
+        height: var(--co-inphoto-process-loader-text-item-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        white-space: normal;
+        @include cfg.sub-header-text();
+
+        &::before {
+          content: '';
+          flex: none;
+          width: var(--co-inphoto-process-loader-dots-size);
+        }
+      }
+
+      .lt-dots {
+        display: inline-flex;
+        flex: none;
+        width: var(--co-inphoto-process-loader-dots-size);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .loading-text-track {
+        transition: var(--co-inphoto-process-loader-track-transition-none);
+      }
+    }
+  }
+}

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

@@ -1,24 +1,24 @@
-.co-process-loader {
-  --co-inphoto-process-loader-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-process-loader-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-loader-pulse-duration: 2.4s;
-  --co-inphoto-loader-twinkle-duration: 1.6s;
-  --co-inphoto-process-loader-position-fixed: fixed;
-  --co-inphoto-process-loader-inset-zero: 0;
-  --co-inphoto-process-loader-wrapper-z-index: 101;
-  --co-inphoto-process-loader-container-width: 375px;
-  --co-inphoto-process-loader-container-padding: 25px;
-  --co-inphoto-process-loader-icon-size: 100px;
-  --co-inphoto-process-loader-icon-radius: 50%;
-  --co-inphoto-process-loader-icon-padding: 15px;
-  --co-inphoto-process-loader-carousel-margin-top: 30px;
-  --co-inphoto-process-loader-carousel-width: 450px;
-  --co-inphoto-process-loader-text-item-height: 60px;
-  --co-inphoto-process-loader-track-transform: translateY(calc(var(--active, 0) * var(--co-inphoto-process-loader-text-item-height) * -1));
-  --co-inphoto-process-loader-track-transition: transform 0.5s ease-in-out;
-  --co-inphoto-process-loader-track-transition-none: none;
-  --co-inphoto-process-loader-dots-size: 1.5em;
-  --co-inphoto-process-loader-dots-animation: drop 1.4s ease-in-out infinite;
-  --co-inphoto-process-loader-dots-delay-2: 0.15s;
-  --co-inphoto-process-loader-dots-delay-3: 0.30s;
-}
+.co-process-loader {
+  --co-inphoto-process-loader-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-process-loader-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-loader-pulse-duration: 2.4s;
+  --co-inphoto-loader-twinkle-duration: 1.6s;
+  --co-inphoto-process-loader-position-fixed: fixed;
+  --co-inphoto-process-loader-inset-zero: 0;
+  --co-inphoto-process-loader-wrapper-z-index: 101;
+  --co-inphoto-process-loader-container-width: 375px;
+  --co-inphoto-process-loader-container-padding: 25px;
+  --co-inphoto-process-loader-icon-size: 100px;
+  --co-inphoto-process-loader-icon-radius: 50%;
+  --co-inphoto-process-loader-icon-padding: 15px;
+  --co-inphoto-process-loader-carousel-margin-top: 30px;
+  --co-inphoto-process-loader-carousel-width: 450px;
+  --co-inphoto-process-loader-text-item-height: 60px;
+  --co-inphoto-process-loader-track-transform: translateY(calc(var(--active, 0) * var(--co-inphoto-process-loader-text-item-height) * -1));
+  --co-inphoto-process-loader-track-transition: transform 0.5s ease-in-out;
+  --co-inphoto-process-loader-track-transition-none: none;
+  --co-inphoto-process-loader-dots-size: 1.5em;
+  --co-inphoto-process-loader-dots-animation: drop 1.4s ease-in-out infinite;
+  --co-inphoto-process-loader-dots-delay-2: 0.15s;
+  --co-inphoto-process-loader-dots-delay-3: 0.30s;
+}

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

@@ -1,128 +1,128 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-process-loader-theme') {
-  .co-process-loader {
-    font-family: var(--co-inphoto-process-loader-font-family);
-    font-size: var(--co-inphoto-process-loader-font-size-text);
-
-    .loader-wrapper {
-      background: var(--co-inphoto-loader-background-dark);
-    }
-
-    .loader-container {
-      border-radius: var(--co-inphoto-border-radius);
-      background: var(--co-inphoto-dialog-background-color);
-
-      .loading-icon {
-        border-radius: var(--co-inphoto-process-loader-icon-radius);
-      }
-
-      .loading-text-track {
-        transition: var(--co-inphoto-process-loader-track-transition);
-
-        &.no-transition {
-          transition: var(--co-inphoto-process-loader-track-transition-none);
-        }
-      }
-
-      .lt-dots {
-        span {
-          animation: var(--co-inphoto-process-loader-dots-animation);
-
-          &:nth-child(2) {
-            animation-delay: var(--co-inphoto-process-loader-dots-delay-2);
-          }
-
-          &:nth-child(3) {
-            animation-delay: var(--co-inphoto-process-loader-dots-delay-3);
-          }
-        }
-      }
-    }
-
-    .loading-icon {
-      background: var(--co-inphoto-header-icon-background);
-      animation: wrap-pulse var(--co-inphoto-loader-pulse-duration) 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;
-      }
-    }
-
-    @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;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-process-loader-theme') {
+  .co-process-loader {
+    font-family: var(--co-inphoto-process-loader-font-family);
+    font-size: var(--co-inphoto-process-loader-font-size-text);
+
+    .loader-wrapper {
+      background: var(--co-inphoto-loader-background-dark);
+    }
+
+    .loader-container {
+      border-radius: var(--co-inphoto-border-radius);
+      background: var(--co-inphoto-dialog-background-color);
+
+      .loading-icon {
+        border-radius: var(--co-inphoto-process-loader-icon-radius);
+      }
+
+      .loading-text-track {
+        transition: var(--co-inphoto-process-loader-track-transition);
+
+        &.no-transition {
+          transition: var(--co-inphoto-process-loader-track-transition-none);
+        }
+      }
+
+      .lt-dots {
+        span {
+          animation: var(--co-inphoto-process-loader-dots-animation);
+
+          &:nth-child(2) {
+            animation-delay: var(--co-inphoto-process-loader-dots-delay-2);
+          }
+
+          &:nth-child(3) {
+            animation-delay: var(--co-inphoto-process-loader-dots-delay-3);
+          }
+        }
+      }
+    }
+
+    .loading-icon {
+      background: var(--co-inphoto-header-icon-background);
+      animation: wrap-pulse var(--co-inphoto-loader-pulse-duration) 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;
+      }
+    }
+
+    @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/scene-context-menu/style/_layout.scss

@@ -1,59 +1,59 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-scene-context-menu-layout') {
-  .co-scene-context-menu {
-    .scene-context-menu-container {
-      position: var(--co-inphoto-scene-context-menu-position-absolute);
-      bottom: var(--co-inphoto-scene-context-menu-container-bottom);
-      left: var(--co-inphoto-scene-context-menu-center-x);
-      transform: var(--co-inphoto-scene-context-menu-translate-center-x);
-      width: var(--co-inphoto-scene-context-menu-container-width);
-      padding: var(--co-inphoto-scene-context-menu-container-padding);
-
-      .scene-context-menu-body {
-        display: flex;
-        align-items: center;
-        gap: var(--co-inphoto-scene-context-menu-body-gap);
-
-        .scene-context-menu-item {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: var(--co-inphoto-scene-context-menu-item-size);
-          height: var(--co-inphoto-scene-context-menu-item-size);
-          padding: var(--co-inphoto-scene-context-menu-item-padding-zero);
-          position: var(--co-inphoto-scene-context-menu-position-relative);
-
-          .scene-context-menu-item-icon {
-            display: flex;
-          }
-
-          .scene-context-menu-item-text {
-            visibility: hidden;
-            white-space: nowrap;
-            position: var(--co-inphoto-scene-context-menu-position-absolute);
-            top: var(--co-inphoto-scene-context-menu-item-text-top);
-            left: var(--co-inphoto-scene-context-menu-center-x);
-            transform: var(--co-inphoto-scene-context-menu-translate-center-x);
-            padding: var(--co-inphoto-scene-context-menu-item-text-padding);
-
-            &::before {
-              content: '';
-              position: var(--co-inphoto-scene-context-menu-position-absolute);
-              bottom: var(--co-inphoto-scene-context-menu-item-text-arrow-bottom);
-              left: var(--co-inphoto-scene-context-menu-center-x);
-              transform: var(--co-inphoto-scene-context-menu-translate-center-x);
-            }
-          }
-
-          &:hover {
-            .scene-context-menu-item-text {
-              visibility: visible;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-layout') {
+  .co-scene-context-menu {
+    .scene-context-menu-container {
+      position: var(--co-inphoto-scene-context-menu-position-absolute);
+      bottom: var(--co-inphoto-scene-context-menu-container-bottom);
+      left: var(--co-inphoto-scene-context-menu-center-x);
+      transform: var(--co-inphoto-scene-context-menu-translate-center-x);
+      width: var(--co-inphoto-scene-context-menu-container-width);
+      padding: var(--co-inphoto-scene-context-menu-container-padding);
+
+      .scene-context-menu-body {
+        display: flex;
+        align-items: center;
+        gap: var(--co-inphoto-scene-context-menu-body-gap);
+
+        .scene-context-menu-item {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--co-inphoto-scene-context-menu-item-size);
+          height: var(--co-inphoto-scene-context-menu-item-size);
+          padding: var(--co-inphoto-scene-context-menu-item-padding-zero);
+          position: var(--co-inphoto-scene-context-menu-position-relative);
+
+          .scene-context-menu-item-icon {
+            display: flex;
+          }
+
+          .scene-context-menu-item-text {
+            visibility: hidden;
+            white-space: nowrap;
+            position: var(--co-inphoto-scene-context-menu-position-absolute);
+            top: var(--co-inphoto-scene-context-menu-item-text-top);
+            left: var(--co-inphoto-scene-context-menu-center-x);
+            transform: var(--co-inphoto-scene-context-menu-translate-center-x);
+            padding: var(--co-inphoto-scene-context-menu-item-text-padding);
+
+            &::before {
+              content: '';
+              position: var(--co-inphoto-scene-context-menu-position-absolute);
+              bottom: var(--co-inphoto-scene-context-menu-item-text-arrow-bottom);
+              left: var(--co-inphoto-scene-context-menu-center-x);
+              transform: var(--co-inphoto-scene-context-menu-translate-center-x);
+            }
+          }
+
+          &:hover {
+            .scene-context-menu-item-text {
+              visibility: visible;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/scene-context-menu/style/_material-definition.scss

@@ -1,27 +1,27 @@
-.co-scene-context-menu {
-  --co-inphoto-scene-context-menu-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-scene-context-menu-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-context-menu-box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
-  --co-inphoto-context-menu-hover-background: #f0f2f5;
-  --co-inphoto-scene-context-menu-position-absolute: absolute;
-  --co-inphoto-scene-context-menu-position-relative: relative;
-  --co-inphoto-scene-context-menu-container-bottom: 70px;
-  --co-inphoto-scene-context-menu-center-x: 50%;
-  --co-inphoto-scene-context-menu-translate-center-x: translateX(-50%);
-  --co-inphoto-scene-context-menu-container-width: auto;
-  --co-inphoto-scene-context-menu-container-padding: 6px;
-  --co-inphoto-scene-context-menu-container-radius: 999px;
-  --co-inphoto-scene-context-menu-body-gap: 4px;
-  --co-inphoto-scene-context-menu-item-size: 40px;
-  --co-inphoto-scene-context-menu-item-padding-zero: 0;
-  --co-inphoto-scene-context-menu-item-radius: 50%;
-  --co-inphoto-scene-context-menu-item-transition: background 0.15s ease;
-  --co-inphoto-scene-context-menu-item-text-hidden-opacity: 0;
-  --co-inphoto-scene-context-menu-item-text-visible-opacity: 1;
-  --co-inphoto-scene-context-menu-item-text-top: calc(100% + 10px);
-  --co-inphoto-scene-context-menu-item-text-padding: 6px 12px;
-  --co-inphoto-scene-context-menu-item-text-radius: 8px;
-  --co-inphoto-scene-context-menu-item-text-transition: opacity 0.15s ease, visibility 0.15s ease;
-  --co-inphoto-scene-context-menu-item-text-arrow-bottom: 100%;
-  --co-inphoto-scene-context-menu-arrow-border: 5px solid transparent;
-}
+.co-scene-context-menu {
+  --co-inphoto-scene-context-menu-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-scene-context-menu-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-context-menu-box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
+  --co-inphoto-context-menu-hover-background: #f0f2f5;
+  --co-inphoto-scene-context-menu-position-absolute: absolute;
+  --co-inphoto-scene-context-menu-position-relative: relative;
+  --co-inphoto-scene-context-menu-container-bottom: 70px;
+  --co-inphoto-scene-context-menu-center-x: 50%;
+  --co-inphoto-scene-context-menu-translate-center-x: translateX(-50%);
+  --co-inphoto-scene-context-menu-container-width: auto;
+  --co-inphoto-scene-context-menu-container-padding: 6px;
+  --co-inphoto-scene-context-menu-container-radius: 999px;
+  --co-inphoto-scene-context-menu-body-gap: 4px;
+  --co-inphoto-scene-context-menu-item-size: 40px;
+  --co-inphoto-scene-context-menu-item-padding-zero: 0;
+  --co-inphoto-scene-context-menu-item-radius: 50%;
+  --co-inphoto-scene-context-menu-item-transition: background 0.15s ease;
+  --co-inphoto-scene-context-menu-item-text-hidden-opacity: 0;
+  --co-inphoto-scene-context-menu-item-text-visible-opacity: 1;
+  --co-inphoto-scene-context-menu-item-text-top: calc(100% + 10px);
+  --co-inphoto-scene-context-menu-item-text-padding: 6px 12px;
+  --co-inphoto-scene-context-menu-item-text-radius: 8px;
+  --co-inphoto-scene-context-menu-item-text-transition: opacity 0.15s ease, visibility 0.15s ease;
+  --co-inphoto-scene-context-menu-item-text-arrow-bottom: 100%;
+  --co-inphoto-scene-context-menu-arrow-border: 5px solid transparent;
+}