@colijnit/inphoto 300.1.8 → 301.1.0

package/lib/component/image-tile/style/_layout.scss

@@ -1,102 +1,102 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-title-layout') {
-  .co-image-title {
-    .image-tile {
-      overflow: hidden;
-      width: var(--co-inphoto-image-title-tile-width);
-      cursor: pointer;
-
-      .image-tile-top {
-        position: var(--co-inphoto-image-title-position-relative);
-
-        .image-tile-index, .image-tile-remove {
-          position: var(--co-inphoto-image-title-position-absolute);
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-          width: var(--co-inphoto-image-title-badge-size);
-          height: var(--co-inphoto-image-title-badge-size);
-          text-align: center;
-        }
-
-        .image-tile-index {
-          top: var(--co-inphoto-image-title-badge-offset);
-          left: var(--co-inphoto-image-title-badge-offset);
-        }
-
-        .image-tile-remove {
-          top: var(--co-inphoto-image-title-badge-offset);
-          right: var(--co-inphoto-image-title-badge-offset);
-          cursor: pointer;
-
-          .co-button {
-            width: var(--co-inphoto-image-title-badge-size);
-            height: var(--co-inphoto-image-title-badge-size);
-          }
-
-        }
-
-        .image-tile-container {
-          min-height: var(--co-inphoto-image-title-container-height);
-          max-height: var(--co-inphoto-image-title-container-height);
-          overflow: hidden;
-
-          .mask-no-image-explain {
-            padding: var(--co-inphoto-image-title-explain-padding);
-          }
-
-          img {
-            width: var(--co-inphoto-image-title-full-size);
-            height: var(--co-inphoto-image-title-full-size);
-            max-height: var(--co-inphoto-image-title-container-height);
-            object-fit: contain;
-          }
-        }
-      }
-
-      .image-tile-bottom {
-        padding: var(--co-inphoto-image-title-bottom-padding);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .co-button {
-          width: var(--co-inphoto-image-title-badge-size);
-          height: var(--co-inphoto-image-title-badge-size);
-
-          .brush-icon, .delete-icon {
-            cursor: pointer;
-
-            .co-icon {
-              display: block;
-              margin: var(--co-inphoto-image-title-icon-margin);
-            }
-          }
-        }
-
-
-        .hide-delete-button, .hide-brush-button {
-          display: none;
-        }
-
-        .color-palette-wrapper {
-          cursor: pointer;
-
-          .color-palette {
-            display: grid;
-            grid-template-columns: var(--co-inphoto-image-title-palette-columns);
-          }
-
-          .color-palette-disabled {
-            pointer-events: none;
-          }
-
-          .color-palette-hidden {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-title-layout') {
+  .co-image-title {
+    .image-tile {
+      overflow: hidden;
+      width: var(--co-inphoto-image-title-tile-width);
+      cursor: pointer;
+
+      .image-tile-top {
+        position: var(--co-inphoto-image-title-position-relative);
+
+        .image-tile-index, .image-tile-remove {
+          position: var(--co-inphoto-image-title-position-absolute);
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          width: var(--co-inphoto-image-title-badge-size);
+          height: var(--co-inphoto-image-title-badge-size);
+          text-align: center;
+        }
+
+        .image-tile-index {
+          top: var(--co-inphoto-image-title-badge-offset);
+          left: var(--co-inphoto-image-title-badge-offset);
+        }
+
+        .image-tile-remove {
+          top: var(--co-inphoto-image-title-badge-offset);
+          right: var(--co-inphoto-image-title-badge-offset);
+          cursor: pointer;
+
+          .co-button {
+            width: var(--co-inphoto-image-title-badge-size);
+            height: var(--co-inphoto-image-title-badge-size);
+          }
+
+        }
+
+        .image-tile-container {
+          min-height: var(--co-inphoto-image-title-container-height);
+          max-height: var(--co-inphoto-image-title-container-height);
+          overflow: hidden;
+
+          .mask-no-image-explain {
+            padding: var(--co-inphoto-image-title-explain-padding);
+          }
+
+          img {
+            width: var(--co-inphoto-image-title-full-size);
+            height: var(--co-inphoto-image-title-full-size);
+            max-height: var(--co-inphoto-image-title-container-height);
+            object-fit: contain;
+          }
+        }
+      }
+
+      .image-tile-bottom {
+        padding: var(--co-inphoto-image-title-bottom-padding);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .co-button {
+          width: var(--co-inphoto-image-title-badge-size);
+          height: var(--co-inphoto-image-title-badge-size);
+
+          .brush-icon, .delete-icon {
+            cursor: pointer;
+
+            .co-icon {
+              display: block;
+              margin: var(--co-inphoto-image-title-icon-margin);
+            }
+          }
+        }
+
+
+        .hide-delete-button, .hide-brush-button {
+          display: none;
+        }
+
+        .color-palette-wrapper {
+          cursor: pointer;
+
+          .color-palette {
+            display: grid;
+            grid-template-columns: var(--co-inphoto-image-title-palette-columns);
+          }
+
+          .color-palette-disabled {
+            pointer-events: none;
+          }
+
+          .color-palette-hidden {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/image-tile/style/_material-definition.scss

@@ -1,18 +1,18 @@
-.co-image-title {
-  --co-inphoto-image-title-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-title-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-title-position-relative: relative;
-  --co-inphoto-image-title-position-absolute: absolute;
-  --co-inphoto-image-title-tile-width: 95%;
-  --co-inphoto-image-title-badge-size: 28px;
-  --co-inphoto-image-title-badge-radius: 50%;
-  --co-inphoto-image-title-badge-offset: 5px;
-  --co-inphoto-image-title-index-font-size: 14px;
-  --co-inphoto-image-title-container-height: 130px;
-  --co-inphoto-image-title-explain-padding: 30px 8px 0;
-  --co-inphoto-image-title-full-size: 100%;
-  --co-inphoto-image-title-bottom-padding: 8px;
-  --co-inphoto-image-title-icon-margin: 5px auto;
-  --co-inphoto-image-title-palette-columns: repeat(5, 30px);
-  --co-inphoto-image-title-remove-border: 1px solid var(--co-inphoto-icon-color);
-}
+.co-image-title {
+  --co-inphoto-image-title-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-title-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-title-position-relative: relative;
+  --co-inphoto-image-title-position-absolute: absolute;
+  --co-inphoto-image-title-tile-width: 95%;
+  --co-inphoto-image-title-badge-size: 28px;
+  --co-inphoto-image-title-badge-radius: 50%;
+  --co-inphoto-image-title-badge-offset: 5px;
+  --co-inphoto-image-title-index-font-size: 14px;
+  --co-inphoto-image-title-container-height: 130px;
+  --co-inphoto-image-title-explain-padding: 30px 8px 0;
+  --co-inphoto-image-title-full-size: 100%;
+  --co-inphoto-image-title-bottom-padding: 8px;
+  --co-inphoto-image-title-icon-margin: 5px auto;
+  --co-inphoto-image-title-palette-columns: repeat(5, 30px);
+  --co-inphoto-image-title-remove-border: 1px solid var(--co-inphoto-icon-color);
+}

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

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

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

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