npm - @colijnit/inphoto - Versions diffs - 300.1.9 → 301.1.0 - Mend

@colijnit/inphoto 300.1.9 → 301.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

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

@@ -1,58 +1,58 @@
-@use '../../../style' as cfg;
-@include cfg.export-module('co-image-title-theme') {
-  .co-image-title {
-    font-family: var(--co-inphoto-image-title-font-family);
-    font-size: var(--co-inphoto-image-title-font-size-text);
-    .image-tile {
-      background: var(--co-inphoto-background-white);
-      border-radius: var(--co-inphoto-border-radius);
-      .image-tile-top {
-        .image-tile-index, .image-tile-remove {
-          background: var(--co-inphoto-background-white);
-          border-radius: var(--co-inphoto-image-title-badge-radius);
-        }
-        .image-tile-index {
-          font-size: var(--co-inphoto-image-title-index-font-size);
-        }
-        .image-tile-remove {
-          border: var(--co-inphoto-image-title-remove-border);
-          .co-button {
-            background: none;
-            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
-          }
-        }
-        .image-tile-container {
-          .mask-no-image-explain {
-            font-size: var(--co-inphoto-font-size-label);
-          }
-        }
-      }
-      .image-tile-bottom {
-        .co-button {
-          background: none;
-          .brush-icon, .delete-icon {
-            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
-          }
-        }
-      }
-    }
-    .active-item {
-      .image-tile-top {
-        .image-tile-index {
-          background: var(--co-inphoto-accent-color);
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+@include cfg.export-module('co-image-title-theme') {
+  .co-image-title {
+    font-family: var(--co-inphoto-image-title-font-family);
+    font-size: var(--co-inphoto-image-title-font-size-text);
+    .image-tile {
+      background: var(--co-inphoto-background-white);
+      border-radius: var(--co-inphoto-border-radius);
+      .image-tile-top {
+        .image-tile-index, .image-tile-remove {
+          background: var(--co-inphoto-background-white);
+          border-radius: var(--co-inphoto-image-title-badge-radius);
+        }
+        .image-tile-index {
+          font-size: var(--co-inphoto-image-title-index-font-size);
+        }
+        .image-tile-remove {
+          border: var(--co-inphoto-image-title-remove-border);
+          .co-button {
+            background: none;
+            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
+          }
+        }
+        .image-tile-container {
+          .mask-no-image-explain {
+            font-size: var(--co-inphoto-font-size-label);
+          }
+        }
+      }
+      .image-tile-bottom {
+        .co-button {
+          background: none;
+          .brush-icon, .delete-icon {
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+          }
+        }
+      }
+    }
+    .active-item {
+      .image-tile-top {
+        .image-tile-index {
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+    }
+  }
+}

package/lib/component/image-upload/style/_layout.scss CHANGED Viewed

@@ -1,93 +1,93 @@
-@use '../../../style' as cfg;
-@include cfg.export-module('co-image-upload-layout') {
-  .co-image-upload {
-    .upload-container {
-      min-width: var(--co-inphoto-image-upload-container-min-width);
-      padding: var(--co-inphoto-image-upload-container-padding);
-      text-align: center;
-      cursor: pointer;
-      position: var(--co-inphoto-image-upload-position-relative);
-      .image-upload-icon {
-        width: var(--co-inphoto-image-upload-icon-preview-size);
-        height: var(--co-inphoto-image-upload-icon-preview-size);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: var(--co-inphoto-image-upload-icon-margin);
-      }
-      .upload-supported-formats-container {
-        margin-top: var(--co-inphoto-image-upload-formats-container-margin-top);
-        width: var(--co-inphoto-image-upload-formats-container-width);
-        display: flex;
-        justify-self: center;
-        justify-content: space-between;
-        .supported-format {
-          padding: var(--co-inphoto-image-upload-format-padding);
-          margin: var(--co-inphoto-image-upload-format-margin);
-        }
-      }
-    }
-    .preview {
-      margin-top: var(--co-inphoto-image-upload-preview-margin-top);
-    }
-    .preview img {
-      max-width: var(--co-inphoto-image-upload-preview-image-max-width);
-    }
-    .uploaded-files-preview-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-      gap: var(--co-inphoto-image-upload-preview-container-gap);
-      margin-top: var(--co-inphoto-image-upload-preview-container-margin-top);
-      .uploaded-file-preview {
-        position: var(--co-inphoto-image-upload-position-relative);
-        img {
-          width: var(--co-inphoto-image-upload-preview-full-size);
-          height: var(--co-inphoto-image-upload-preview-full-size);
-          object-fit: cover;
-        }
-        .uploaded-file-overlay {
-          position: var(--co-inphoto-image-upload-position-absolute);
-          top: var(--co-inphoto-image-upload-overlay-inset-zero);
-          left: var(--co-inphoto-image-upload-overlay-inset-zero);
-          right: var(--co-inphoto-image-upload-overlay-inset-zero);
-          bottom: var(--co-inphoto-image-upload-overlay-inset-zero);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-          width: var(--co-inphoto-image-upload-preview-full-size);
-          visibility: hidden;
-          .remove-button {
-            position: var(--co-inphoto-image-upload-position-absolute);
-            top: var(--co-inphoto-image-upload-overlay-remove-button-offset);
-            right: var(--co-inphoto-image-upload-overlay-remove-button-offset);
-            cursor: pointer;
-          }
-        }
-        &:hover .uploaded-file-overlay {
-          visibility: visible;
-        }
-      }
-    }
-    .compact {
-      .upload-container {
-        padding: var(--co-inphoto-image-upload-compact-padding);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+@include cfg.export-module('co-image-upload-layout') {
+  .co-image-upload {
+    .upload-container {
+      min-width: var(--co-inphoto-image-upload-container-min-width);
+      padding: var(--co-inphoto-image-upload-container-padding);
+      text-align: center;
+      cursor: pointer;
+      position: var(--co-inphoto-image-upload-position-relative);
+      .image-upload-icon {
+        width: var(--co-inphoto-image-upload-icon-preview-size);
+        height: var(--co-inphoto-image-upload-icon-preview-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: var(--co-inphoto-image-upload-icon-margin);
+      }
+      .upload-supported-formats-container {
+        margin-top: var(--co-inphoto-image-upload-formats-container-margin-top);
+        width: var(--co-inphoto-image-upload-formats-container-width);
+        display: flex;
+        justify-self: center;
+        justify-content: space-between;
+        .supported-format {
+          padding: var(--co-inphoto-image-upload-format-padding);
+          margin: var(--co-inphoto-image-upload-format-margin);
+        }
+      }
+    }
+    .preview {
+      margin-top: var(--co-inphoto-image-upload-preview-margin-top);
+    }
+    .preview img {
+      max-width: var(--co-inphoto-image-upload-preview-image-max-width);
+    }
+    .uploaded-files-preview-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: var(--co-inphoto-image-upload-preview-container-gap);
+      margin-top: var(--co-inphoto-image-upload-preview-container-margin-top);
+      .uploaded-file-preview {
+        position: var(--co-inphoto-image-upload-position-relative);
+        img {
+          width: var(--co-inphoto-image-upload-preview-full-size);
+          height: var(--co-inphoto-image-upload-preview-full-size);
+          object-fit: cover;
+        }
+        .uploaded-file-overlay {
+          position: var(--co-inphoto-image-upload-position-absolute);
+          top: var(--co-inphoto-image-upload-overlay-inset-zero);
+          left: var(--co-inphoto-image-upload-overlay-inset-zero);
+          right: var(--co-inphoto-image-upload-overlay-inset-zero);
+          bottom: var(--co-inphoto-image-upload-overlay-inset-zero);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          width: var(--co-inphoto-image-upload-preview-full-size);
+          visibility: hidden;
+          .remove-button {
+            position: var(--co-inphoto-image-upload-position-absolute);
+            top: var(--co-inphoto-image-upload-overlay-remove-button-offset);
+            right: var(--co-inphoto-image-upload-overlay-remove-button-offset);
+            cursor: pointer;
+          }
+        }
+        &:hover .uploaded-file-overlay {
+          visibility: visible;
+        }
+      }
+    }
+    .compact {
+      .upload-container {
+        padding: var(--co-inphoto-image-upload-compact-padding);
+      }
+    }
+  }
+}

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

@@ -1,35 +1,35 @@
-.co-image-upload {
-  --co-inphoto-image-upload-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-upload-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-upload-border-width: 2px;
-  --co-inphoto-image-upload-border-color: #CBD5E1;
-  --co-inphoto-image-upload-format-border: 1px solid var(--co-inphoto-image-upload-border-color);
-  --co-inphoto-image-upload-dragging-border-color: #1A73E8;
-  --co-inphoto-image-upload-dragging-background: #f5f7ff;
-  --co-inphoto-image-upload-container-min-width: 400px;
-  --co-inphoto-image-upload-container-padding: 20px;
-  --co-inphoto-image-upload-icon-size: 30px;
-  --co-inphoto-image-upload-icon-preview-size: 40px;
-  --co-inphoto-image-upload-icon-margin: 0 auto;
-  --co-inphoto-image-upload-formats-container-margin-top: 15px;
-  --co-inphoto-image-upload-formats-container-width: 200px;
-  --co-inphoto-image-upload-format-border-radius: 15px;
-  --co-inphoto-image-upload-format-padding: 4px 10px;
-  --co-inphoto-image-upload-format-margin: 0 4px;
-  --co-inphoto-image-upload-format-font-weight: bold;
-  --co-inphoto-image-upload-preview-margin-top: 20px;
-  --co-inphoto-image-upload-preview-image-max-width: 300px;
-  --co-inphoto-image-upload-preview-container-gap: 10px;
-  --co-inphoto-image-upload-preview-container-margin-top: 10px;
-  --co-inphoto-image-upload-preview-full-size: 100%;
-  --co-inphoto-image-upload-position-relative: relative;
-  --co-inphoto-image-upload-position-absolute: absolute;
-  --co-inphoto-image-upload-overlay-inset-zero: 0;
-  --co-inphoto-image-upload-overlay-font-size: 14px;
-  --co-inphoto-image-upload-overlay-remove-button-offset: 5px;
-  --co-inphoto-image-upload-compact-padding: 10px;
-  --co-inphoto-image-upload-content-margin: 5px auto;
-  --co-inphoto-image-upload-disabled-opacity: 0.5;
-  --co-inphoto-image-upload-remove-icon-size: 20px;
-  --co-inphoto-image-upload-compact-font-size: 10px;
-}
+.co-image-upload {
+  --co-inphoto-image-upload-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-upload-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-upload-border-width: 2px;
+  --co-inphoto-image-upload-border-color: #CBD5E1;
+  --co-inphoto-image-upload-format-border: 1px solid var(--co-inphoto-image-upload-border-color);
+  --co-inphoto-image-upload-dragging-border-color: #1A73E8;
+  --co-inphoto-image-upload-dragging-background: #f5f7ff;
+  --co-inphoto-image-upload-container-min-width: 400px;
+  --co-inphoto-image-upload-container-padding: 20px;
+  --co-inphoto-image-upload-icon-size: 30px;
+  --co-inphoto-image-upload-icon-preview-size: 40px;
+  --co-inphoto-image-upload-icon-margin: 0 auto;
+  --co-inphoto-image-upload-formats-container-margin-top: 15px;
+  --co-inphoto-image-upload-formats-container-width: 200px;
+  --co-inphoto-image-upload-format-border-radius: 15px;
+  --co-inphoto-image-upload-format-padding: 4px 10px;
+  --co-inphoto-image-upload-format-margin: 0 4px;
+  --co-inphoto-image-upload-format-font-weight: bold;
+  --co-inphoto-image-upload-preview-margin-top: 20px;
+  --co-inphoto-image-upload-preview-image-max-width: 300px;
+  --co-inphoto-image-upload-preview-container-gap: 10px;
+  --co-inphoto-image-upload-preview-container-margin-top: 10px;
+  --co-inphoto-image-upload-preview-full-size: 100%;
+  --co-inphoto-image-upload-position-relative: relative;
+  --co-inphoto-image-upload-position-absolute: absolute;
+  --co-inphoto-image-upload-overlay-inset-zero: 0;
+  --co-inphoto-image-upload-overlay-font-size: 14px;
+  --co-inphoto-image-upload-overlay-remove-button-offset: 5px;
+  --co-inphoto-image-upload-compact-padding: 10px;
+  --co-inphoto-image-upload-content-margin: 5px auto;
+  --co-inphoto-image-upload-disabled-opacity: 0.5;
+  --co-inphoto-image-upload-remove-icon-size: 20px;
+  --co-inphoto-image-upload-compact-font-size: 10px;
+}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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