@colijnit/inphoto 300.1.9 → 301.1.0

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

@@ -1,40 +1,40 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-overlay-theme') {
-  .co-image-overlay {
-    font-family: var(--co-inphoto-image-overlay-font-family);
-    font-size: var(--co-inphoto-image-overlay-font-size-text);
-    background: var(--co-inphoto-loader-background-dark);
-
-    .dialog-container {
-      .close-dialog-button, .dialog-prev-button, .dialog-next-button {
-        background: var(--co-inphoto-loader-background-dark);
-        border-radius: var(--co-inphoto-image-overlay-button-radius);
-        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
-      }
-
-      .dialog-toolbar {
-        .co-button {
-          background: var(--co-inphoto-loader-background-dark);
-          color: var(--co-inphoto-color-light);
-          border-radius: var(--co-inphoto-border-radius);
-          font-size: var(--co-inphoto-font-size-label);
-
-          @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
-        }
-
-        .options-menu {
-          .options-menu-list {
-            background: transparent;
-            border-radius: var(--co-inphoto-border-radius);
-            box-shadow: var(--co-inphoto-container-box-shadow);
-          }
-        }
-      }
-    }
-
-    .large-image {
-      border-radius: var(--co-inphoto-border-radius);
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-overlay-theme') {
+  .co-image-overlay {
+    font-family: var(--co-inphoto-image-overlay-font-family);
+    font-size: var(--co-inphoto-image-overlay-font-size-text);
+    background: var(--co-inphoto-loader-background-dark);
+
+    .dialog-container {
+      .close-dialog-button, .dialog-prev-button, .dialog-next-button {
+        background: var(--co-inphoto-loader-background-dark);
+        border-radius: var(--co-inphoto-image-overlay-button-radius);
+        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
+      }
+
+      .dialog-toolbar {
+        .co-button {
+          background: var(--co-inphoto-loader-background-dark);
+          color: var(--co-inphoto-color-light);
+          border-radius: var(--co-inphoto-border-radius);
+          font-size: var(--co-inphoto-font-size-label);
+
+          @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+        }
+
+        .options-menu {
+          .options-menu-list {
+            background: transparent;
+            border-radius: var(--co-inphoto-border-radius);
+            box-shadow: var(--co-inphoto-container-box-shadow);
+          }
+        }
+      }
+    }
+
+    .large-image {
+      border-radius: var(--co-inphoto-border-radius);
+    }
+  }
+}

package/lib/component/image-overlay/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/image-process-complete/style/_layout.scss

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

package/lib/component/image-process-complete/style/_material-definition.scss

@@ -1,13 +1,13 @@
-.co-image-process-complete {
-  --co-inphoto-image-process-complete-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-process-complete-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-process-complete-icon-color: #7274FD;
-  --co-inphoto-image-process-complete-icon-background: #EDEDF9;
-  --co-inphoto-image-process-complete-full-width: 100%;
-  --co-inphoto-image-process-complete-min-height: 100vh;
-  --co-inphoto-image-process-complete-preview-margin: 20px;
-  --co-inphoto-image-process-complete-preview-padding: 20px;
-  --co-inphoto-image-process-complete-preview-max-width: 100%;
-  --co-inphoto-image-process-complete-image-height: auto;
-  --co-inphoto-image-process-complete-header-icon-size: 95px;
-}
+.co-image-process-complete {
+  --co-inphoto-image-process-complete-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-process-complete-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-process-complete-icon-color: #7274FD;
+  --co-inphoto-image-process-complete-icon-background: #EDEDF9;
+  --co-inphoto-image-process-complete-full-width: 100%;
+  --co-inphoto-image-process-complete-min-height: 100vh;
+  --co-inphoto-image-process-complete-preview-margin: 20px;
+  --co-inphoto-image-process-complete-preview-padding: 20px;
+  --co-inphoto-image-process-complete-preview-max-width: 100%;
+  --co-inphoto-image-process-complete-image-height: auto;
+  --co-inphoto-image-process-complete-header-icon-size: 95px;
+}

package/lib/component/image-process-complete/style/_theme.scss

@@ -1,24 +1,24 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-process-complete-theme') {
-  .co-image-process-complete {
-    font-family: var(--co-inphoto-image-process-complete-font-family);
-    font-size: var(--co-inphoto-image-process-complete-font-size-text);
-
-    .image-process-complete {
-      .image-process-preview {
-        box-shadow: var(--co-inphoto-container-box-shadow);
-      }
-    }
-
-    .image-process-complete-dialog {
-      .image-process-complete-dialog-header {
-        .header-icon {
-          background: var(--co-inphoto-image-process-complete-icon-background);
-          color: var(--co-inphoto-image-process-complete-icon-color);
-          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-image-process-complete-icon-color));
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-process-complete-theme') {
+  .co-image-process-complete {
+    font-family: var(--co-inphoto-image-process-complete-font-family);
+    font-size: var(--co-inphoto-image-process-complete-font-size-text);
+
+    .image-process-complete {
+      .image-process-preview {
+        box-shadow: var(--co-inphoto-container-box-shadow);
+      }
+    }
+
+    .image-process-complete-dialog {
+      .image-process-complete-dialog-header {
+        .header-icon {
+          background: var(--co-inphoto-image-process-complete-icon-background);
+          color: var(--co-inphoto-image-process-complete-icon-color);
+          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-image-process-complete-icon-color));
+        }
+      }
+    }
+  }
+}

package/lib/component/image-tile/components/color-palette-option/style/_layout.scss

@@ -1,15 +1,15 @@
-@use '../../../../../style' as cfg;
-
-@include cfg.export-module('co-color-palette-option-layout') {
-  .color-palette-option {
-    width: var(--co-inphoto-color-palette-option-size);
-    height: var(--co-inphoto-color-palette-option-size);
-    cursor: pointer;
-    padding: var(--co-inphoto-color-palette-option-padding);
-
-    .color-palette-option-circle {
-      height: var(--co-inphoto-color-palette-option-full-size);
-      width: var(--co-inphoto-color-palette-option-full-size);
-    }
-  }
-}
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-color-palette-option-layout') {
+  .color-palette-option {
+    width: var(--co-inphoto-color-palette-option-size);
+    height: var(--co-inphoto-color-palette-option-size);
+    cursor: pointer;
+    padding: var(--co-inphoto-color-palette-option-padding);
+
+    .color-palette-option-circle {
+      height: var(--co-inphoto-color-palette-option-full-size);
+      width: var(--co-inphoto-color-palette-option-full-size);
+    }
+  }
+}

package/lib/component/image-tile/components/color-palette-option/style/_material-definition.scss

@@ -1,9 +1,9 @@
-.color-palette-option {
-  --co-inphoto-color-palette-option-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-color-palette-option-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-color-palette-option-size: 25px;
-  --co-inphoto-color-palette-option-full-size: 100%;
-  --co-inphoto-color-palette-option-padding: 2px;
-  --co-inphoto-color-palette-option-border: 2px solid;
-  --co-inphoto-color-palette-option-radius: 50%;
-}
+.color-palette-option {
+  --co-inphoto-color-palette-option-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-color-palette-option-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-color-palette-option-size: 25px;
+  --co-inphoto-color-palette-option-full-size: 100%;
+  --co-inphoto-color-palette-option-padding: 2px;
+  --co-inphoto-color-palette-option-border: 2px solid;
+  --co-inphoto-color-palette-option-radius: 50%;
+}

package/lib/component/image-tile/components/color-palette-option/style/_theme.scss

@@ -1,15 +1,15 @@
-@use '../../../../../style' as cfg;
-
-@include cfg.export-module('co-color-palette-option-theme') {
-  .color-palette-option {
-    font-family: var(--co-inphoto-color-palette-option-font-family);
-    font-size: var(--co-inphoto-color-palette-option-font-size-text);
-    border: var(--co-inphoto-color-palette-option-border);
-    border-radius: var(--co-inphoto-color-palette-option-radius);
-
-    .color-palette-option-circle {
-      border-radius: var(--co-inphoto-color-palette-option-radius);
-      @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
-    }
-  }
-}
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-color-palette-option-theme') {
+  .color-palette-option {
+    font-family: var(--co-inphoto-color-palette-option-font-family);
+    font-size: var(--co-inphoto-color-palette-option-font-size-text);
+    border: var(--co-inphoto-color-palette-option-border);
+    border-radius: var(--co-inphoto-color-palette-option-radius);
+
+    .color-palette-option-circle {
+      border-radius: var(--co-inphoto-color-palette-option-radius);
+      @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+    }
+  }
+}

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