@colijnit/inphoto 300.1.7 → 300.1.8

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

@@ -1,43 +1,45 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-enhancer-theme') {
-  .co-image-enhancer {
-    .enhancer-container {
-
-      background: var(--co-inphoto-dialog-background-color);
-      padding: var(--co-inphoto-side-panel-padding);
-
-      .enhancer-scroll-container {
-
-        .enhancer-body {
-          .instruction-dialog {
-            font-size: var(--font-size-small);
-          }
-
-          .tabs {
-
-            .tab-button {
-              padding: var(--co-inphoto-image-enhancer-tab-button-padding);
-              cursor: pointer;
-              height: 100%;
-              text-align: center;
-              background: none;
-              border-radius: 0;
-              @include cfg.sub-header-text();
-              border-bottom: var(--co-inphoto-image-enhancer-tab-button-border-width) solid transparent;
-
-              &:hover {
-                border-bottom-color: var(--co-inphoto-accent-color);
-              }
-
-              &.active {
-                border-bottom-color: var(--co-inphoto-accent-color);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-enhancer-theme') {
+  .co-image-enhancer {
+    font-family: var(--co-inphoto-image-enhancer-font-family);
+    font-size: var(--co-inphoto-image-enhancer-font-size-text);
+
+    .enhancer-container {
+
+      background: var(--co-inphoto-dialog-background-color);
+      padding: var(--co-inphoto-image-enhancer-container-padding);
+
+      .enhancer-scroll-container {
+
+        .enhancer-body {
+          .instruction-dialog {
+            font-size: var(--co-inphoto-font-size-label);
+          }
+
+          .tabs {
+
+            .tab-button {
+              padding: var(--co-inphoto-image-enhancer-tab-button-padding);
+              cursor: pointer;
+              height: var(--co-inphoto-image-enhancer-tab-button-height);
+              text-align: center;
+              background: none;
+              border-radius: var(--co-inphoto-image-enhancer-tab-button-radius);
+              @include cfg.sub-header-text();
+              border-bottom: var(--co-inphoto-image-enhancer-tab-button-border-width) solid transparent;
+
+              &:hover {
+                border-bottom-color: var(--co-inphoto-accent-color);
+              }
+
+              &.active {
+                border-bottom-color: var(--co-inphoto-accent-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,107 +1,65 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-enhancer-style-layout') {
-  .co-image-enhancer-style {
-    .form-part-container {
-      margin: 20px auto;
-    }
-
-    .form-part-container {
-      .co-list-of-values {
-        height: 60px;
-        border-radius: var(--co-inphoto-border-radius);
-        overflow: hidden;
-
-        &:before, &:hover {
-          box-shadow: none;
-          border: none;
-        }
-
-        &:not(.read-only):hover {
-          border: none;
-
-          &:before {
-            box-shadow: none;
-          }
-        }
-
-        &.cc-input-focused:not(.no-focus-line) {
-          border: none;
-
-          &:before {
-            box-shadow: none;
-          }
-        }
-
-
-        .co-input-text {
-          .input-text-clear-button {
-            display: none;
-          }
-
-          &:before {
-            box-shadow: none;
-          }
-
-          &:hover, &:not(.read-only):hover {
-            &:before {
-              box-shadow: none;
-            }
-          }
-
-          &:not(.no-style) {
-            input {
-              padding-bottom: 10px;
-            }
-
-            &:not(.custom-height) {
-              height: 60px;
-              border-radius: var(--co-inphoto-border-radius);
-            }
-
-            &.has-own-label {
-              &.hasvalue {
-                label {
-                  transform: none;
-                  top: 10px;
-                }
-              }
-            }
-
-            &.has-right-icon {
-              .input-text-right-icon {
-                svg {
-                  width: 15px;
-                  height: 15px;
-                }
-              }
-            }
-
-            .input-text-left-icon,
-            .input-text-right-icon {
-              max-height: 60px;
-            }
-          }
-
-          .input-text-wrapper {
-            .input-wrapper {
-              border-radius: var(--co-inphoto-border-radius);
-            }
-          }
-        }
-      }
-    }
-
-
-    .tool-explainer {
-      .header-with-icon {
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    .button-container {
-      margin-top: 20px;
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-enhancer-style-layout') {
+  .co-image-enhancer-style {
+    .form-part-container {
+      margin: var(--co-inphoto-image-enhancer-style-form-margin);
+
+      .co-list-of-values {
+        height: var(--co-inphoto-image-enhancer-style-field-height);
+        overflow: hidden;
+
+        .co-input-text {
+          .input-text-clear-button {
+            display: none;
+          }
+
+          &:not(.no-style) {
+            input {
+              padding-bottom: var(--co-inphoto-image-enhancer-style-field-padding-bottom);
+            }
+
+            &:not(.custom-height) {
+              height: var(--co-inphoto-image-enhancer-style-field-height);
+            }
+
+            &.has-own-label {
+              &.hasvalue {
+                label {
+                  transform: var(--co-inphoto-image-enhancer-style-label-transform-none);
+                  top: var(--co-inphoto-image-enhancer-style-label-top);
+                }
+              }
+            }
+
+            &.has-right-icon {
+              .input-text-right-icon {
+                svg {
+                  width: var(--co-inphoto-image-enhancer-style-right-icon-size);
+                  height: var(--co-inphoto-image-enhancer-style-right-icon-size);
+                }
+              }
+            }
+
+            .input-text-left-icon,
+            .input-text-right-icon {
+              max-height: var(--co-inphoto-image-enhancer-style-field-height);
+            }
+          }
+        }
+      }
+    }
+
+
+    .tool-explainer {
+      .header-with-icon {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .button-container {
+      margin-top: var(--co-inphoto-image-enhancer-style-button-container-margin-top);
+    }
+  }
+}

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

@@ -1,3 +1,16 @@
-:root {
-  --co-inphoto-enhancer-style-padding: 15px;
-}
+.co-image-enhancer-style {
+  --co-inphoto-image-enhancer-style-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-enhancer-style-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-enhancer-style-padding: 15px;
+  --co-inphoto-image-enhancer-style-form-margin: 20px auto;
+  --co-inphoto-image-enhancer-style-field-height: 60px;
+  --co-inphoto-image-enhancer-style-field-padding-bottom: 10px;
+  --co-inphoto-image-enhancer-style-label-transform-none: none;
+  --co-inphoto-image-enhancer-style-label-top: 10px;
+  --co-inphoto-image-enhancer-style-right-icon-size: 15px;
+  --co-inphoto-image-enhancer-style-header-icon-margin: 15px;
+  --co-inphoto-image-enhancer-style-button-container-margin-top: 20px;
+  --co-inphoto-image-enhancer-style-generate-button-margin-bottom: 30px;
+  --co-inphoto-image-enhancer-style-button-label-margin-left: 15px;
+  --co-inphoto-image-enhancer-style-button-label-font-weight: bold;
+}

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

@@ -1,72 +1,120 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-enhancer-style-theme') {
-  .co-image-enhancer-style {
-
-    .tool-explainer, .explainer-text {
-      background: var(--co-inphoto-background-white);
-      border-radius: var(--co-inphoto-border-radius);
-      padding: var(--co-inphoto-enhancer-style-padding);
-
-      .header-with-icon {
-        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
-        .co-icon {
-          margin-right: 15px;
-        }
-        .tool-explainer-header {
-          @include cfg.sub-header-text();
-        }
-      }
-    }
-
-    .tool-explainer-text {
-      @include cfg.text();
-    }
-
-    .button-container {
-      margin-top: 20px;
-
-      .generate-button {
-        margin-bottom: 30px;
-        @include cfg.action-button(
-                var(--co-inphoto-active-button-background),
-                var(--co-inphoto-active-button-background),
-                var(--co-inphoto-active-button-color),
-                var(--co-inphoto-button-font-size),
-                var(--co-inphoto-button-icon-size),
-                var(--co-inphoto-active-button-color),
-                var(--co-inphoto-button-border),
-                var(--co-inphoto-button-radius),
-                var(--co-inphoto-button-padding)
-        );
-
-        .label {
-          margin-left: 15px;
-          font-weight: bold;
-        }
-      }
-
-      .restart-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 {
-          margin-left: 15px;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-
-
-
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-enhancer-style-theme') {
+  .co-image-enhancer-style {
+    font-family: var(--co-inphoto-image-enhancer-style-font-family);
+    font-size: var(--co-inphoto-image-enhancer-style-font-size-text);
+
+    .form-part-container {
+      .co-list-of-values {
+        border-radius: var(--co-inphoto-border-radius);
+
+        &:before, &:hover {
+          box-shadow: none;
+          border: none;
+        }
+
+        &:not(.read-only):hover {
+          border: none;
+
+          &:before {
+            box-shadow: none;
+          }
+        }
+
+        &.cc-input-focused:not(.no-focus-line) {
+          border: none;
+
+          &:before {
+            box-shadow: none;
+          }
+        }
+
+        .co-input-text {
+          &:before {
+            box-shadow: none;
+          }
+
+          &:hover, &:not(.read-only):hover {
+            &:before {
+              box-shadow: none;
+            }
+          }
+
+          &:not(.no-style) {
+            &:not(.custom-height) {
+              border-radius: var(--co-inphoto-border-radius);
+            }
+          }
+
+          .input-text-wrapper {
+            .input-wrapper {
+              border-radius: var(--co-inphoto-border-radius);
+            }
+          }
+        }
+      }
+    }
+
+    .tool-explainer, .explainer-text {
+      background: var(--co-inphoto-background-white);
+      border-radius: var(--co-inphoto-border-radius);
+      padding: var(--co-inphoto-image-enhancer-style-padding);
+
+      .header-with-icon {
+        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
+        .co-icon {
+          margin-right: var(--co-inphoto-image-enhancer-style-header-icon-margin);
+        }
+        .tool-explainer-header {
+          @include cfg.sub-header-text();
+        }
+      }
+    }
+
+    .tool-explainer-text {
+      @include cfg.text();
+    }
+
+    .button-container {
+      .generate-button {
+        margin-bottom: var(--co-inphoto-image-enhancer-style-generate-button-margin-bottom);
+        @include cfg.action-button(
+                var(--co-inphoto-active-button-background),
+                var(--co-inphoto-active-button-background),
+                var(--co-inphoto-active-button-color),
+                var(--co-inphoto-button-font-size),
+                var(--co-inphoto-button-icon-size),
+                var(--co-inphoto-active-button-color),
+                var(--co-inphoto-button-border),
+                var(--co-inphoto-button-radius),
+                var(--co-inphoto-button-padding)
+        );
+
+        .label {
+          margin-left: var(--co-inphoto-image-enhancer-style-button-label-margin-left);
+          font-weight: var(--co-inphoto-image-enhancer-style-button-label-font-weight);
+        }
+      }
+
+      .restart-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 {
+          margin-left: var(--co-inphoto-image-enhancer-style-button-label-margin-left);
+          font-weight: var(--co-inphoto-image-enhancer-style-button-label-font-weight);
+        }
+      }
+    }
+  }
+}

package/lib/component/image-enhancer-upload/style/_layout.scss

@@ -1,11 +1,48 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-enhancer-upload-layout') {
-  .co-image-enhancer-upload {
-    .image-enhancer-upload {
-      .uploaded-image-container {
-        display: grid;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-enhancer-upload-layout') {
+  .co-image-enhancer-upload {
+    .image-enhancer-upload {
+
+      .tool-explainer {
+        padding: var(--co-inphoto-image-enhancer-upload-tool-padding);
+        margin: var(--co-inphoto-image-enhancer-upload-tool-margin);
+
+        .header-with-icon {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          padding-bottom: var(--co-inphoto-image-enhancer-upload-header-padding-bottom);
+
+          .co-icon {
+            margin-right: var(--co-inphoto-image-enhancer-upload-icon-margin);
+          }
+        }
+      }
+
+      .button-container {
+        margin-top: var(--co-inphoto-image-enhancer-upload-button-container-margin-top);
+
+        .generate-button {
+          margin-bottom: var(--co-inphoto-image-enhancer-upload-generate-button-margin-bottom);
+
+          .label {
+            margin-left: var(--co-inphoto-image-enhancer-upload-button-label-margin-left);
+          }
+        }
+
+        .restart-button {
+          .label {
+            margin-left: var(--co-inphoto-image-enhancer-upload-button-label-margin-left);
+          }
+        }
+      }
+
+      .uploaded-image-container {
+        display: grid;
+        grid-template-columns: var(--co-inphoto-image-enhancer-upload-preview-columns);
+        margin: var(--co-inphoto-image-enhancer-upload-preview-margin);
+      }
+    }
+  }
+}

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

@@ -1,3 +1,14 @@
-:root {
-
-}
+.co-image-enhancer-upload {
+  --co-inphoto-image-enhancer-upload-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-enhancer-upload-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-enhancer-upload-tool-padding: 15px;
+  --co-inphoto-image-enhancer-upload-tool-margin: 20px auto 0;
+  --co-inphoto-image-enhancer-upload-header-padding-bottom: 5px;
+  --co-inphoto-image-enhancer-upload-icon-margin: 10px;
+  --co-inphoto-image-enhancer-upload-button-container-margin-top: 20px;
+  --co-inphoto-image-enhancer-upload-generate-button-margin-bottom: 30px;
+  --co-inphoto-image-enhancer-upload-button-label-margin-left: 15px;
+  --co-inphoto-image-enhancer-upload-font-weight-bold: bold;
+  --co-inphoto-image-enhancer-upload-preview-columns: repeat(3, 1fr);
+  --co-inphoto-image-enhancer-upload-preview-margin: 20px 0;
+}