@colijnit/inphoto 300.1.8 → 301.1.0

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

@@ -1,32 +1,32 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-history-tile-theme') {
-
-  .co-image-history-tile {
-    font-family: var(--co-inphoto-image-history-tile-font-family);
-    font-size: var(--co-inphoto-image-history-tile-font-size-text);
-
-    .image-history-item {
-      border-radius: var(--co-inphoto-border-radius);
-
-      .tile-action {
-        color: var(--co-inphoto-background-white);
-        background: var(--co-inphoto-loader-background-light);
-        border-radius: var(--co-inphoto-image-history-tile-action-radius);
-        transition: var(--co-inphoto-image-history-tile-action-transition);
-        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
-
-        &:hover {
-          background: var(--co-inphoto-accent-color);
-        }
-      }
-
-      &-selected {
-        .tile-action-select {
-          opacity: var(--co-inphoto-image-history-tile-action-visible-opacity);
-          background: var(--co-inphoto-accent-color);
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-history-tile-theme') {
+
+  .co-image-history-tile {
+    font-family: var(--co-inphoto-image-history-tile-font-family);
+    font-size: var(--co-inphoto-image-history-tile-font-size-text);
+
+    .image-history-item {
+      border-radius: var(--co-inphoto-border-radius);
+
+      .tile-action {
+        color: var(--co-inphoto-background-white);
+        background: var(--co-inphoto-loader-background-light);
+        border-radius: var(--co-inphoto-image-history-tile-action-radius);
+        transition: var(--co-inphoto-image-history-tile-action-transition);
+        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+
+        &:hover {
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+
+      &-selected {
+        .tile-action-select {
+          opacity: var(--co-inphoto-image-history-tile-action-visible-opacity);
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+    }
+  }
+}

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

@@ -1,84 +1,84 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-overlay-layout') {
-  .co-image-overlay {
-    position: var(--co-inphoto-image-overlay-position-fixed);
-    inset: var(--co-inphoto-image-overlay-inset-zero);
-    z-index: var(--co-inphoto-image-overlay-z-index);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .dialog-container {
-      position: var(--co-inphoto-image-overlay-position-relative);
-
-      .close-dialog-button, .dialog-prev-button, .dialog-next-button {
-        position: var(--co-inphoto-image-overlay-position-absolute);
-        cursor: pointer;
-        width: var(--co-inphoto-image-overlay-button-size);
-        height: var(--co-inphoto-image-overlay-button-size);
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-
-        .co-icon {
-          flex: 1
-        }
-      }
-
-      .close-dialog-button {
-        top: var(--co-inphoto-image-overlay-offset);
-        right: var(--co-inphoto-image-overlay-offset);
-      }
-
-      .dialog-prev-button {
-        left: var(--co-inphoto-image-overlay-offset);
-        top: var(--co-inphoto-image-overlay-vertical-center);
-      }
-
-      .dialog-next-button {
-        right: var(--co-inphoto-image-overlay-offset);
-        top: var(--co-inphoto-image-overlay-vertical-center);
-      }
-
-      .dialog-toolbar {
-        position: var(--co-inphoto-image-overlay-position-absolute);
-        bottom: var(--co-inphoto-image-overlay-offset);
-        right: var(--co-inphoto-image-overlay-offset);
-        display: flex;
-        gap: var(--co-inphoto-image-overlay-toolbar-gap);
-
-        .co-button {
-          display: flex;
-          cursor: pointer;
-          padding: var(--co-inphoto-image-overlay-toolbar-button-padding);
-
-          .label {
-            margin-left: var(--co-inphoto-image-overlay-toolbar-label-margin);
-          }
-        }
-
-        .options-menu {
-          position: var(--co-inphoto-image-overlay-position-relative);
-
-          .options-menu-list {
-            position: var(--co-inphoto-image-overlay-position-absolute);
-            bottom: var(--co-inphoto-image-overlay-menu-offset);
-            right: var(--co-inphoto-image-overlay-menu-right);
-            display: flex;
-            flex-direction: column;
-            gap: var(--co-inphoto-image-overlay-toolbar-gap);
-            padding: var(--co-inphoto-image-overlay-menu-padding);
-          }
-        }
-      }
-    }
-
-    .large-image {
-      max-width: var(--co-inphoto-image-overlay-image-max-width);
-      max-height: var(--co-inphoto-image-overlay-image-max-height);
-      object-fit: contain;
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-overlay-layout') {
+  .co-image-overlay {
+    position: var(--co-inphoto-image-overlay-position-fixed);
+    inset: var(--co-inphoto-image-overlay-inset-zero);
+    z-index: var(--co-inphoto-image-overlay-z-index);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .dialog-container {
+      position: var(--co-inphoto-image-overlay-position-relative);
+
+      .close-dialog-button, .dialog-prev-button, .dialog-next-button {
+        position: var(--co-inphoto-image-overlay-position-absolute);
+        cursor: pointer;
+        width: var(--co-inphoto-image-overlay-button-size);
+        height: var(--co-inphoto-image-overlay-button-size);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        .co-icon {
+          flex: 1
+        }
+      }
+
+      .close-dialog-button {
+        top: var(--co-inphoto-image-overlay-offset);
+        right: var(--co-inphoto-image-overlay-offset);
+      }
+
+      .dialog-prev-button {
+        left: var(--co-inphoto-image-overlay-offset);
+        top: var(--co-inphoto-image-overlay-vertical-center);
+      }
+
+      .dialog-next-button {
+        right: var(--co-inphoto-image-overlay-offset);
+        top: var(--co-inphoto-image-overlay-vertical-center);
+      }
+
+      .dialog-toolbar {
+        position: var(--co-inphoto-image-overlay-position-absolute);
+        bottom: var(--co-inphoto-image-overlay-offset);
+        right: var(--co-inphoto-image-overlay-offset);
+        display: flex;
+        gap: var(--co-inphoto-image-overlay-toolbar-gap);
+
+        .co-button {
+          display: flex;
+          cursor: pointer;
+          padding: var(--co-inphoto-image-overlay-toolbar-button-padding);
+
+          .label {
+            margin-left: var(--co-inphoto-image-overlay-toolbar-label-margin);
+          }
+        }
+
+        .options-menu {
+          position: var(--co-inphoto-image-overlay-position-relative);
+
+          .options-menu-list {
+            position: var(--co-inphoto-image-overlay-position-absolute);
+            bottom: var(--co-inphoto-image-overlay-menu-offset);
+            right: var(--co-inphoto-image-overlay-menu-right);
+            display: flex;
+            flex-direction: column;
+            gap: var(--co-inphoto-image-overlay-toolbar-gap);
+            padding: var(--co-inphoto-image-overlay-menu-padding);
+          }
+        }
+      }
+    }
+
+    .large-image {
+      max-width: var(--co-inphoto-image-overlay-image-max-width);
+      max-height: var(--co-inphoto-image-overlay-image-max-height);
+      object-fit: contain;
+    }
+  }
+}

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

@@ -1,21 +1,21 @@
-.co-image-overlay {
-  --co-inphoto-image-overlay-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-overlay-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-overlay-position-fixed: fixed;
-  --co-inphoto-image-overlay-position-relative: relative;
-  --co-inphoto-image-overlay-position-absolute: absolute;
-  --co-inphoto-image-overlay-inset-zero: 0;
-  --co-inphoto-image-overlay-z-index: 1000;
-  --co-inphoto-image-overlay-button-size: 30px;
-  --co-inphoto-image-overlay-button-radius: 50%;
-  --co-inphoto-image-overlay-offset: 20px;
-  --co-inphoto-image-overlay-vertical-center: 50%;
-  --co-inphoto-image-overlay-toolbar-gap: 10px;
-  --co-inphoto-image-overlay-toolbar-button-padding: 8px 15px;
-  --co-inphoto-image-overlay-toolbar-label-margin: 10px;
-  --co-inphoto-image-overlay-image-max-width: 100vw;
-  --co-inphoto-image-overlay-image-max-height: 90vh;
-  --co-inphoto-image-overlay-menu-offset: calc(100% + 10px);
-  --co-inphoto-image-overlay-menu-right: 0;
-  --co-inphoto-image-overlay-menu-padding: 0;
-}
+.co-image-overlay {
+  --co-inphoto-image-overlay-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-overlay-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-overlay-position-fixed: fixed;
+  --co-inphoto-image-overlay-position-relative: relative;
+  --co-inphoto-image-overlay-position-absolute: absolute;
+  --co-inphoto-image-overlay-inset-zero: 0;
+  --co-inphoto-image-overlay-z-index: 1000;
+  --co-inphoto-image-overlay-button-size: 30px;
+  --co-inphoto-image-overlay-button-radius: 50%;
+  --co-inphoto-image-overlay-offset: 20px;
+  --co-inphoto-image-overlay-vertical-center: 50%;
+  --co-inphoto-image-overlay-toolbar-gap: 10px;
+  --co-inphoto-image-overlay-toolbar-button-padding: 8px 15px;
+  --co-inphoto-image-overlay-toolbar-label-margin: 10px;
+  --co-inphoto-image-overlay-image-max-width: 100vw;
+  --co-inphoto-image-overlay-image-max-height: 90vh;
+  --co-inphoto-image-overlay-menu-offset: calc(100% + 10px);
+  --co-inphoto-image-overlay-menu-right: 0;
+  --co-inphoto-image-overlay-menu-padding: 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));
+    }
+  }
+}