@colijnit/inphoto 300.1.8 → 301.1.0

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

@@ -1,103 +1,103 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-upload-theme') {
-  .co-image-upload {
-    font-family: var(--co-inphoto-image-upload-font-family);
-    font-size: var(--co-inphoto-image-upload-font-size-text);
-
-    .upload-container {
-      background: var(--co-inphoto-background-white);
-      border: var(--co-inphoto-image-upload-border-width) dashed var(--co-inphoto-image-upload-border-color);
-      border-radius: var(--co-inphoto-border-radius);
-
-      .image-upload-icon {
-        @include cfg.default-icon(var(--co-inphoto-image-upload-icon-size), var(--co-inphoto-image-upload-icon-size), var(--co-inphoto-icon-color));
-      }
-
-      .upload-content-header {
-        @include cfg.sub-header-text();
-      }
-
-      .upload-content-text {
-        @include cfg.text();
-        color: var(--co-inphoto-accent-text);
-      }
-
-      .upload-content {
-        margin: var(--co-inphoto-image-upload-content-margin);
-      }
-
-      .upload-supported-formats-container {
-        .supported-format {
-          border: var(--co-inphoto-image-upload-format-border);
-          color: var(--co-inphoto-accent-text);
-          font-size: var(--co-inphoto-font-size-label);
-          font-weight: var(--co-inphoto-image-upload-format-font-weight);
-          border-radius: var(--co-inphoto-image-upload-format-border-radius);
-        }
-      }
-    }
-
-    .upload-container.dragging {
-      border-color: var(--co-inphoto-image-upload-dragging-border-color);
-      background: var(--co-inphoto-image-upload-dragging-background);
-    }
-
-    .upload-container.disabled {
-      opacity: var(--co-inphoto-image-upload-disabled-opacity);
-      pointer-events: none;
-    }
-
-    .upload-content .upload-button {
-      @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)
-      );
-    }
-
-    .preview img {
-      border-radius: var(--co-inphoto-border-radius);
-    }
-
-    .uploaded-files-preview-container {
-      .uploaded-file-preview {
-        img {
-          border-radius: var(--co-inphoto-border-radius);
-        }
-
-        .uploaded-file-overlay {
-          background-color: var(--co-inphoto-loader-background-dark);
-          border-radius: var(--co-inphoto-border-radius);
-          font-size: var(--co-inphoto-image-upload-overlay-font-size);
-
-          .remove-button {
-            @include cfg.default-icon(var(--co-inphoto-image-upload-remove-icon-size), var(--co-inphoto-image-upload-remove-icon-size), var(--co-inphoto-icon-color-light));
-          }
-        }
-      }
-    }
-  }
-
-  .image-upload-compact {
-    .upload-container {
-      p {
-        font-size: var(--co-inphoto-image-upload-compact-font-size);
-      }
-    }
-  }
-
-  .compact {
-    .upload-container {
-      .upload-content-text {
-        font-size: var(--co-inphoto-font-size-label);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-upload-theme') {
+  .co-image-upload {
+    font-family: var(--co-inphoto-image-upload-font-family);
+    font-size: var(--co-inphoto-image-upload-font-size-text);
+
+    .upload-container {
+      background: var(--co-inphoto-background-white);
+      border: var(--co-inphoto-image-upload-border-width) dashed var(--co-inphoto-image-upload-border-color);
+      border-radius: var(--co-inphoto-border-radius);
+
+      .image-upload-icon {
+        @include cfg.default-icon(var(--co-inphoto-image-upload-icon-size), var(--co-inphoto-image-upload-icon-size), var(--co-inphoto-icon-color));
+      }
+
+      .upload-content-header {
+        @include cfg.sub-header-text();
+      }
+
+      .upload-content-text {
+        @include cfg.text();
+        color: var(--co-inphoto-accent-text);
+      }
+
+      .upload-content {
+        margin: var(--co-inphoto-image-upload-content-margin);
+      }
+
+      .upload-supported-formats-container {
+        .supported-format {
+          border: var(--co-inphoto-image-upload-format-border);
+          color: var(--co-inphoto-accent-text);
+          font-size: var(--co-inphoto-font-size-label);
+          font-weight: var(--co-inphoto-image-upload-format-font-weight);
+          border-radius: var(--co-inphoto-image-upload-format-border-radius);
+        }
+      }
+    }
+
+    .upload-container.dragging {
+      border-color: var(--co-inphoto-image-upload-dragging-border-color);
+      background: var(--co-inphoto-image-upload-dragging-background);
+    }
+
+    .upload-container.disabled {
+      opacity: var(--co-inphoto-image-upload-disabled-opacity);
+      pointer-events: none;
+    }
+
+    .upload-content .upload-button {
+      @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)
+      );
+    }
+
+    .preview img {
+      border-radius: var(--co-inphoto-border-radius);
+    }
+
+    .uploaded-files-preview-container {
+      .uploaded-file-preview {
+        img {
+          border-radius: var(--co-inphoto-border-radius);
+        }
+
+        .uploaded-file-overlay {
+          background-color: var(--co-inphoto-loader-background-dark);
+          border-radius: var(--co-inphoto-border-radius);
+          font-size: var(--co-inphoto-image-upload-overlay-font-size);
+
+          .remove-button {
+            @include cfg.default-icon(var(--co-inphoto-image-upload-remove-icon-size), var(--co-inphoto-image-upload-remove-icon-size), var(--co-inphoto-icon-color-light));
+          }
+        }
+      }
+    }
+  }
+
+  .image-upload-compact {
+    .upload-container {
+      p {
+        font-size: var(--co-inphoto-image-upload-compact-font-size);
+      }
+    }
+  }
+
+  .compact {
+    .upload-container {
+      .upload-content-text {
+        font-size: var(--co-inphoto-font-size-label);
+      }
+    }
+  }
+}

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

@@ -1,30 +1,30 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-marker-layout') {
-  .co-marker {
-    position: var(--co-inphoto-marker-position);
-    transform: var(--co-inphoto-marker-transform);
-
-    .marker-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--co-inphoto-marker-container-gap);
-      cursor: pointer;
-
-      .marker-icon {
-        width: var(--co-inphoto-marker-icon-size);
-        height: var(--co-inphoto-marker-icon-size);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .marker-label {
-        font-size: var(--co-inphoto-font-size-label);
-        padding: var(--co-inphoto-marker-label-padding);
-        white-space: nowrap;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-marker-layout') {
+  .co-marker {
+    position: var(--co-inphoto-marker-position);
+    transform: var(--co-inphoto-marker-transform);
+
+    .marker-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--co-inphoto-marker-container-gap);
+      cursor: pointer;
+
+      .marker-icon {
+        width: var(--co-inphoto-marker-icon-size);
+        height: var(--co-inphoto-marker-icon-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .marker-label {
+        font-size: var(--co-inphoto-font-size-label);
+        padding: var(--co-inphoto-marker-label-padding);
+        white-space: nowrap;
+      }
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
-.co-marker {
-  --co-inphoto-marker-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-marker-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-marker-icon-size: 28px;
-  --co-inphoto-marker-label-background: rgba(0, 0, 0, 0.75);
-  --co-inphoto-marker-position: absolute;
-  --co-inphoto-marker-transform: translate(-50%, -50%);
-  --co-inphoto-marker-container-gap: 2px;
-  --co-inphoto-marker-icon-radius: 50%;
-  --co-inphoto-marker-label-padding: 1px 6px;
-  --co-inphoto-marker-label-radius: 3px;
-}
+.co-marker {
+  --co-inphoto-marker-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-marker-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-marker-icon-size: 28px;
+  --co-inphoto-marker-label-background: rgba(0, 0, 0, 0.75);
+  --co-inphoto-marker-position: absolute;
+  --co-inphoto-marker-transform: translate(-50%, -50%);
+  --co-inphoto-marker-container-gap: 2px;
+  --co-inphoto-marker-icon-radius: 50%;
+  --co-inphoto-marker-label-padding: 1px 6px;
+  --co-inphoto-marker-label-radius: 3px;
+}

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