@colijnit/inphoto 300.1.9 → 301.1.0

package/lib/component/segment-inpaint/style/_theme.scss

@@ -1,29 +1,29 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-segment-inpaint-theme') {
-  .co-segment-inpaint {
-    font-family: var(--co-inphoto-segment-inpaint-font-family);
-    font-size: var(--co-inphoto-segment-inpaint-font-size-text);
-
-    .inpaint-container {
-      .inpaint-info {
-        .inpaint-info-dialog-tile-group {
-          .co-step-tile {
-            &.tile-active {
-              border: var(--co-inphoto-segment-inpaint-tile-active-border);
-            }
-          }
-        }
-      }
-
-      .inpaint-info-dialog-container {
-        .header-icon {
-          background: var(--co-inphoto-prepare-icon-background);
-          color: var(--co-inphoto-accent-color);
-          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-color));
-        }
-
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-segment-inpaint-theme') {
+  .co-segment-inpaint {
+    font-family: var(--co-inphoto-segment-inpaint-font-family);
+    font-size: var(--co-inphoto-segment-inpaint-font-size-text);
+
+    .inpaint-container {
+      .inpaint-info {
+        .inpaint-info-dialog-tile-group {
+          .co-step-tile {
+            &.tile-active {
+              border: var(--co-inphoto-segment-inpaint-tile-active-border);
+            }
+          }
+        }
+      }
+
+      .inpaint-info-dialog-container {
+        .header-icon {
+          background: var(--co-inphoto-prepare-icon-background);
+          color: var(--co-inphoto-accent-color);
+          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-color));
+        }
+
+      }
+    }
+  }
+}

package/lib/component/side-bar-menu/style/_layout.scss

@@ -1,26 +1,26 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-side-bar-menu-layout') {
-  .co-side-bar-menu {
-    .side-bar-menu {
-      z-index: var(--co-inphoto-side-bar-menu-z-index);
-      width: var(--co-inphoto-side-bar-menu-item-size);
-      height: var(--co-inphoto-side-bar-menu-height);
-
-      .side-bar-menu-item {
-        width: var(--co-inphoto-side-bar-menu-item-size);
-        min-height: var(--co-inphoto-side-bar-menu-item-size);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        position: relative;
-
-        .side-bar-menu-text {
-          text-align: center;
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-side-bar-menu-layout') {
+  .co-side-bar-menu {
+    .side-bar-menu {
+      z-index: var(--co-inphoto-side-bar-menu-z-index);
+      width: var(--co-inphoto-side-bar-menu-item-size);
+      height: var(--co-inphoto-side-bar-menu-height);
+
+      .side-bar-menu-item {
+        width: var(--co-inphoto-side-bar-menu-item-size);
+        min-height: var(--co-inphoto-side-bar-menu-item-size);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        position: relative;
+
+        .side-bar-menu-text {
+          text-align: center;
+        }
+      }
+    }
+  }
+}

package/lib/component/side-bar-menu/style/_material-definition.scss

@@ -1,12 +1,12 @@
-.co-side-bar-menu {
-  --co-inphoto-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-side-bar-menu-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-side-bar-menu-z-index: 5;
-  --co-inphoto-side-bar-menu-item-size: 85px;
-  --co-inphoto-side-bar-menu-height: 100vh;
-  --co-inphoto-side-bar-menu-icon-size: 25px;
-  --co-inphoto-side-bar-menu-icon-color: #333;
-  --co-inphoto-side-bar-menu-icon-color-active: #da9803;
-  --co-inphoto-side-bar-menu-icon-color-disabled: #eee;
-  --co-inphoto-side-bar-menu-text-font-size: 13px;
-}
+.co-side-bar-menu {
+  --co-inphoto-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-side-bar-menu-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-side-bar-menu-z-index: 5;
+  --co-inphoto-side-bar-menu-item-size: 85px;
+  --co-inphoto-side-bar-menu-height: 100vh;
+  --co-inphoto-side-bar-menu-icon-size: 25px;
+  --co-inphoto-side-bar-menu-icon-color: #333;
+  --co-inphoto-side-bar-menu-icon-color-active: #da9803;
+  --co-inphoto-side-bar-menu-icon-color-disabled: #eee;
+  --co-inphoto-side-bar-menu-text-font-size: 13px;
+}

package/lib/component/side-bar-menu/style/_theme.scss

@@ -1,32 +1,32 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-side-bar-menu-theme') {
-  .co-side-bar-menu {
-    font-family: var(--co-inphoto-side-bar-menu-font-family);
-    font-size: var(--co-inphoto-side-bar-menu-font-size-text);
-
-    .side-bar-menu {
-      background-color: var(--co-inphoto-background-white);
-
-      .side-bar-menu-item {
-        @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color));
-
-        .side-bar-menu-text {
-          font-size: var(--co-inphoto-side-bar-menu-text-font-size);
-        }
-
-        &:hover {
-          @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
-        }
-      }
-
-      .side-bar-menu-item-active {
-        @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
-      }
-
-      .side-bar-menu-item-disabled {
-        @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-disabled));
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-side-bar-menu-theme') {
+  .co-side-bar-menu {
+    font-family: var(--co-inphoto-side-bar-menu-font-family);
+    font-size: var(--co-inphoto-side-bar-menu-font-size-text);
+
+    .side-bar-menu {
+      background-color: var(--co-inphoto-background-white);
+
+      .side-bar-menu-item {
+        @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color));
+
+        .side-bar-menu-text {
+          font-size: var(--co-inphoto-side-bar-menu-text-font-size);
+        }
+
+        &:hover {
+          @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
+        }
+      }
+
+      .side-bar-menu-item-active {
+        @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
+      }
+
+      .side-bar-menu-item-disabled {
+        @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-disabled));
+      }
+    }
+  }
+}

package/lib/component/side-panel/style/_layout.scss

@@ -1,45 +1,45 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-side-panel-layout') {
-  .co-side-panel {
-    .side-panel-container {
-      width: var(--co-inphoto-side-panel-container-width);
-      height: var(--co-inphoto-side-panel-container-height);
-      position: var(--co-inphoto-side-panel-position-relative);
-      display: flex;
-      flex-direction: column;
-
-      .side-panel-scroll-container {
-        flex: 1 1 auto;
-        min-height: 0;
-        overflow-y: auto;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-        padding-bottom: var(--co-inphoto-side-panel-scroll-padding-bottom);
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-
-        .side-panel-body {
-          display: flex;
-          flex-direction: column;
-          gap: var(--co-inphoto-side-panel-body-gap);
-        }
-
-        .side-panel-button-container {
-
-          .co-button {
-            display: flex;
-            cursor: pointer;
-
-            .label {
-              margin-left: var(--co-inphoto-side-panel-label-margin-left);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-side-panel-layout') {
+  .co-side-panel {
+    .side-panel-container {
+      width: var(--co-inphoto-side-panel-container-width);
+      height: var(--co-inphoto-side-panel-container-height);
+      position: var(--co-inphoto-side-panel-position-relative);
+      display: flex;
+      flex-direction: column;
+
+      .side-panel-scroll-container {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        padding-bottom: var(--co-inphoto-side-panel-scroll-padding-bottom);
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .side-panel-body {
+          display: flex;
+          flex-direction: column;
+          gap: var(--co-inphoto-side-panel-body-gap);
+        }
+
+        .side-panel-button-container {
+
+          .co-button {
+            display: flex;
+            cursor: pointer;
+
+            .label {
+              margin-left: var(--co-inphoto-side-panel-label-margin-left);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/side-panel/style/_material-definition.scss

@@ -1,16 +1,16 @@
-.co-side-panel {
-  --co-inphoto-side-panel-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-side-panel-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-side-panel-padding: 35px 25px;
-  --co-inphoto-side-panel-border-color-button-container: #eee;
-  --co-inphoto-side-panel-padding-button-container: 20px 0 0;
-  --co-inphoto-side-panel-margin-button-container: 20px 0 0;
-  --co-inphoto-side-panel-container-width: 100%;
-  --co-inphoto-side-panel-container-height: 100vh;
-  --co-inphoto-side-panel-position-relative: relative;
-  --co-inphoto-side-panel-scroll-padding-bottom: 35px;
-  --co-inphoto-side-panel-body-gap: 20px;
-  --co-inphoto-side-panel-button-border-top: 1px solid var(--co-inphoto-side-panel-border-color-button-container);
-  --co-inphoto-side-panel-label-margin-left: 15px;
-  --co-inphoto-side-panel-label-font-weight: bold;
-}
+.co-side-panel {
+  --co-inphoto-side-panel-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-side-panel-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-side-panel-padding: 35px 25px;
+  --co-inphoto-side-panel-border-color-button-container: #eee;
+  --co-inphoto-side-panel-padding-button-container: 20px 0 0;
+  --co-inphoto-side-panel-margin-button-container: 20px 0 0;
+  --co-inphoto-side-panel-container-width: 100%;
+  --co-inphoto-side-panel-container-height: 100vh;
+  --co-inphoto-side-panel-position-relative: relative;
+  --co-inphoto-side-panel-scroll-padding-bottom: 35px;
+  --co-inphoto-side-panel-body-gap: 20px;
+  --co-inphoto-side-panel-button-border-top: 1px solid var(--co-inphoto-side-panel-border-color-button-container);
+  --co-inphoto-side-panel-label-margin-left: 15px;
+  --co-inphoto-side-panel-label-font-weight: bold;
+}

package/lib/component/side-panel/style/_theme.scss

@@ -1,39 +1,39 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-side-panel-theme') {
-  .co-side-panel {
-    font-family: var(--co-inphoto-side-panel-font-family);
-    font-size: var(--co-inphoto-side-panel-font-size-text);
-
-    .side-panel-container {
-      background: var(--co-inphoto-dialog-background-color);
-      padding: var(--co-inphoto-side-panel-padding);
-
-      .side-panel-scroll-container {
-        .side-panel-button-container {
-          padding: var(--co-inphoto-side-panel-padding-button-container);
-          margin: var(--co-inphoto-side-panel-margin-button-container);
-          border-top: var(--co-inphoto-side-panel-button-border-top);
-
-          .co-button {
-            @include cfg.action-button(
-                    var(--co-inphoto-button-background),
-                    var(--co-inphoto-button-background),
-                    var(--co-inphoto-button-color),
-                    var(--co-inphoto-button-font-size),
-                    var(--co-inphoto-button-icon-size),
-                    var(--co-inphoto-button-icon-color),
-                    var(--co-inphoto-button-border),
-                    var(--co-inphoto-button-radius),
-                    var(--co-inphoto-button-padding)
-            );
-
-            .label {
-              font-weight: var(--co-inphoto-side-panel-label-font-weight);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-side-panel-theme') {
+  .co-side-panel {
+    font-family: var(--co-inphoto-side-panel-font-family);
+    font-size: var(--co-inphoto-side-panel-font-size-text);
+
+    .side-panel-container {
+      background: var(--co-inphoto-dialog-background-color);
+      padding: var(--co-inphoto-side-panel-padding);
+
+      .side-panel-scroll-container {
+        .side-panel-button-container {
+          padding: var(--co-inphoto-side-panel-padding-button-container);
+          margin: var(--co-inphoto-side-panel-margin-button-container);
+          border-top: var(--co-inphoto-side-panel-button-border-top);
+
+          .co-button {
+            @include cfg.action-button(
+                    var(--co-inphoto-button-background),
+                    var(--co-inphoto-button-background),
+                    var(--co-inphoto-button-color),
+                    var(--co-inphoto-button-font-size),
+                    var(--co-inphoto-button-icon-size),
+                    var(--co-inphoto-button-icon-color),
+                    var(--co-inphoto-button-border),
+                    var(--co-inphoto-button-radius),
+                    var(--co-inphoto-button-padding)
+            );
+
+            .label {
+              font-weight: var(--co-inphoto-side-panel-label-font-weight);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,50 +1,50 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-step-tile-layout') {
-  .co-step-tile {
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: var(--co-inphoto-step-tile-gap);
-
-    .button-container {
-      display: flex;
-      gap: var(--co-inphoto-step-tile-gap);
-
-      .image-container {
-        max-width: var(--co-inphoto-step-tile-image-size);
-        min-width: var(--co-inphoto-step-tile-image-size);
-      }
-
-      .number-container {
-        position: absolute;
-        top: var(--co-inphoto-step-tile-number-offset);
-        right: var(--co-inphoto-step-tile-number-offset);
-        width: var(--co-inphoto-step-tile-number-size);
-        height: var(--co-inphoto-step-tile-number-size);
-        display: flex;
-        justify-self: center;
-        align-items: center;
-        justify-content: space-around;
-      }
-
-      .button-container-text-container {
-
-        .tile-next-icon {
-          width: var(--co-inphoto-step-tile-next-icon-size);
-          height: var(--co-inphoto-step-tile-next-icon-size);
-          display: flex;
-          align-items: center;
-          position: absolute;
-          bottom: var(--co-inphoto-step-tile-next-icon-offset);
-          right: var(--co-inphoto-step-tile-next-icon-offset);
-
-          .co-icon {
-            flex: 1;
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-step-tile-layout') {
+  .co-step-tile {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--co-inphoto-step-tile-gap);
+
+    .button-container {
+      display: flex;
+      gap: var(--co-inphoto-step-tile-gap);
+
+      .image-container {
+        max-width: var(--co-inphoto-step-tile-image-size);
+        min-width: var(--co-inphoto-step-tile-image-size);
+      }
+
+      .number-container {
+        position: absolute;
+        top: var(--co-inphoto-step-tile-number-offset);
+        right: var(--co-inphoto-step-tile-number-offset);
+        width: var(--co-inphoto-step-tile-number-size);
+        height: var(--co-inphoto-step-tile-number-size);
+        display: flex;
+        justify-self: center;
+        align-items: center;
+        justify-content: space-around;
+      }
+
+      .button-container-text-container {
+
+        .tile-next-icon {
+          width: var(--co-inphoto-step-tile-next-icon-size);
+          height: var(--co-inphoto-step-tile-next-icon-size);
+          display: flex;
+          align-items: center;
+          position: absolute;
+          bottom: var(--co-inphoto-step-tile-next-icon-offset);
+          right: var(--co-inphoto-step-tile-next-icon-offset);
+
+          .co-icon {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,20 +1,20 @@
-.co-step-tile {
-  --co-inphoto-step-tile-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-step-tile-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-step-tile-padding: 8px;
-  --co-inphoto-step-tile-button-container-padding: 16px 8px 40px;
-  --co-inphoto-step-tile-button-container-head-margin: 0 0 10px;
-  --co-inphoto-step-tile-image-size: 185px;
-  --co-inphoto-step-tile-gap: 10px;
-  --co-inphoto-step-tile-number-offset: 5px;
-  --co-inphoto-step-tile-number-size: 40px;
-  --co-inphoto-step-tile-circle-radius: 50%;
-  --co-inphoto-step-tile-next-icon-size: 45px;
-  --co-inphoto-step-tile-next-icon-offset: 8px;
-  --co-inphoto-step-tile-border: 1px solid var(--co-inphoto-border-color);
-  --co-inphoto-step-tile-image-full-size: 100%;
-  --co-inphoto-step-tile-button-full-width: 100%;
-  --co-inphoto-step-tile-button-border: 2px solid var(--co-inphoto-active-button-background);
-  --co-inphoto-step-tile-button-zero: 0;
-  --co-inphoto-step-tile-button-border-none: none;
-}
+.co-step-tile {
+  --co-inphoto-step-tile-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-step-tile-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-step-tile-padding: 8px;
+  --co-inphoto-step-tile-button-container-padding: 16px 8px 40px;
+  --co-inphoto-step-tile-button-container-head-margin: 0 0 10px;
+  --co-inphoto-step-tile-image-size: 185px;
+  --co-inphoto-step-tile-gap: 10px;
+  --co-inphoto-step-tile-number-offset: 5px;
+  --co-inphoto-step-tile-number-size: 40px;
+  --co-inphoto-step-tile-circle-radius: 50%;
+  --co-inphoto-step-tile-next-icon-size: 45px;
+  --co-inphoto-step-tile-next-icon-offset: 8px;
+  --co-inphoto-step-tile-border: 1px solid var(--co-inphoto-border-color);
+  --co-inphoto-step-tile-image-full-size: 100%;
+  --co-inphoto-step-tile-button-full-width: 100%;
+  --co-inphoto-step-tile-button-border: 2px solid var(--co-inphoto-active-button-background);
+  --co-inphoto-step-tile-button-zero: 0;
+  --co-inphoto-step-tile-button-border-none: none;
+}