@colijnit/inphoto 300.1.9 → 301.1.0

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

@@ -1,30 +1,30 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-marker-theme') {
-  .co-marker {
-    font-family: var(--co-inphoto-marker-font-family);
-    font-size: var(--co-inphoto-marker-font-size-text);
-
-    .marker-container {
-      .marker-icon {
-        background: var(--co-inphoto-background-white);
-        box-shadow: var(--co-inphoto-container-box-shadow);
-        border-radius: var(--co-inphoto-marker-icon-radius);
-        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-color-dark));
-      }
-
-      .marker-label {
-        background: var(--co-inphoto-marker-label-background);
-        color: var(--co-inphoto-color-light);
-        border-radius: var(--co-inphoto-marker-label-radius);
-      }
-
-      &.marker-selected {
-        .marker-icon {
-          background: var(--co-inphoto-active-button-background);
-          @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-active-button-color));
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-marker-theme') {
+  .co-marker {
+    font-family: var(--co-inphoto-marker-font-family);
+    font-size: var(--co-inphoto-marker-font-size-text);
+
+    .marker-container {
+      .marker-icon {
+        background: var(--co-inphoto-background-white);
+        box-shadow: var(--co-inphoto-container-box-shadow);
+        border-radius: var(--co-inphoto-marker-icon-radius);
+        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-color-dark));
+      }
+
+      .marker-label {
+        background: var(--co-inphoto-marker-label-background);
+        color: var(--co-inphoto-color-light);
+        border-radius: var(--co-inphoto-marker-label-radius);
+      }
+
+      &.marker-selected {
+        .marker-icon {
+          background: var(--co-inphoto-active-button-background);
+          @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-active-button-color));
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -1,38 +1,38 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-photo-editor-layout') {
-  .co-photo-editor {
-
-
-    .photo-editor-dialog {
-
-      .photo-editor-container {
-        position: var(--co-inphoto-photo-editor-position-relative);
-        width: var(--co-inphoto-photo-editor-full-size);
-        height: var(--co-inphoto-photo-editor-full-size);
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
-
-
-        .photo-editor-canvas {
-          width: var(--co-inphoto-left-container-width);
-        }
-
-        .photo-editor-panel {
-          width: var(--co-inphoto-right-container-width);
-        }
-
-      }
-    }
-
-
-    .photo-editor-upload {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      height: var(--co-inphoto-photo-editor-upload-height);
-      width: var(--co-inphoto-photo-editor-upload-width);
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-photo-editor-layout') {
+  .co-photo-editor {
+
+
+    .photo-editor-dialog {
+
+      .photo-editor-container {
+        position: var(--co-inphoto-photo-editor-position-relative);
+        width: var(--co-inphoto-photo-editor-full-size);
+        height: var(--co-inphoto-photo-editor-full-size);
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+
+
+        .photo-editor-canvas {
+          width: var(--co-inphoto-left-container-width);
+        }
+
+        .photo-editor-panel {
+          width: var(--co-inphoto-right-container-width);
+        }
+
+      }
+    }
+
+
+    .photo-editor-upload {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: var(--co-inphoto-photo-editor-upload-height);
+      width: var(--co-inphoto-photo-editor-upload-width);
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
-.co-photo-editor {
-  --co-inphoto-photo-editor-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-photo-editor-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-photo-editor-position-relative: relative;
-  --co-inphoto-photo-editor-full-size: 100%;
-  --co-inphoto-photo-editor-upload-height: 100vh;
-  --co-inphoto-photo-editor-upload-width: 100vw;
-}
+.co-photo-editor {
+  --co-inphoto-photo-editor-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-photo-editor-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-photo-editor-position-relative: relative;
+  --co-inphoto-photo-editor-full-size: 100%;
+  --co-inphoto-photo-editor-upload-height: 100vh;
+  --co-inphoto-photo-editor-upload-width: 100vw;
+}

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

@@ -1,34 +1,34 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-prepare-starting-image-layout') {
-  .co-prepare-starting-image {
-    .prepare-starting-image-container {
-      display: flex;
-      align-items: flex-start;
-      width: var(--co-inphoto-prepare-starting-image-full-width);
-      min-height: var(--co-inphoto-prepare-starting-image-min-height);
-
-
-      .prepare-image-preview {
-        width: var(--co-inphoto-left-container-width);
-        margin: var(--co-inphoto-prepare-starting-image-preview-margin);
-        padding: var(--co-inphoto-prepare-starting-image-preview-padding);
-        display: inline-flex;
-
-        .prepare-image-view-container {
-          max-width: var(--co-inphoto-prepare-starting-image-preview-max-width);
-          img {
-            display: block;
-            max-width: var(--co-inphoto-prepare-starting-image-preview-max-width);
-            height: var(--co-inphoto-prepare-starting-image-image-height);
-          }
-        }
-      }
-
-      .prepare-starting-image-dialog {
-        width: var(--co-inphoto-prepare-starting-image-full-width);
-        max-width: var(--co-inphoto-right-container-width);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-prepare-starting-image-layout') {
+  .co-prepare-starting-image {
+    .prepare-starting-image-container {
+      display: flex;
+      align-items: flex-start;
+      width: var(--co-inphoto-prepare-starting-image-full-width);
+      min-height: var(--co-inphoto-prepare-starting-image-min-height);
+
+
+      .prepare-image-preview {
+        width: var(--co-inphoto-left-container-width);
+        margin: var(--co-inphoto-prepare-starting-image-preview-margin);
+        padding: var(--co-inphoto-prepare-starting-image-preview-padding);
+        display: inline-flex;
+
+        .prepare-image-view-container {
+          max-width: var(--co-inphoto-prepare-starting-image-preview-max-width);
+          img {
+            display: block;
+            max-width: var(--co-inphoto-prepare-starting-image-preview-max-width);
+            height: var(--co-inphoto-prepare-starting-image-image-height);
+          }
+        }
+      }
+
+      .prepare-starting-image-dialog {
+        width: var(--co-inphoto-prepare-starting-image-full-width);
+        max-width: var(--co-inphoto-right-container-width);
+      }
+    }
+  }
+}

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

@@ -1,11 +1,11 @@
-.co-prepare-starting-image {
-  --co-inphoto-prepare-starting-image-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-prepare-starting-image-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-prepare-icon-background: #FFF7ED;
-  --co-inphoto-prepare-starting-image-full-width: 100%;
-  --co-inphoto-prepare-starting-image-min-height: 100vh;
-  --co-inphoto-prepare-starting-image-preview-margin: 20px;
-  --co-inphoto-prepare-starting-image-preview-padding: 20px;
-  --co-inphoto-prepare-starting-image-preview-max-width: 100%;
-  --co-inphoto-prepare-starting-image-image-height: auto;
-}
+.co-prepare-starting-image {
+  --co-inphoto-prepare-starting-image-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-prepare-starting-image-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-prepare-icon-background: #FFF7ED;
+  --co-inphoto-prepare-starting-image-full-width: 100%;
+  --co-inphoto-prepare-starting-image-min-height: 100vh;
+  --co-inphoto-prepare-starting-image-preview-margin: 20px;
+  --co-inphoto-prepare-starting-image-preview-padding: 20px;
+  --co-inphoto-prepare-starting-image-preview-max-width: 100%;
+  --co-inphoto-prepare-starting-image-image-height: auto;
+}

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;
+}