@colijnit/homedecorator 262.1.5 → 262.1.7

package/app/core/components/dialog/co-hd-dialog.component.scss

@@ -1,6 +1,6 @@
 @import '../../../../style/variables';
 :host {
-  color: $hd-color-primary;
+  color: $hd-color-font;
   .dialog-overlay {
     display: flex;
     position: fixed;

package/app/plugins/render/render-controls/input-slider/input-slider.component.scss

@@ -0,0 +1,117 @@
+@import '../../../../../style/variables';
+
+$co-homedecorator-input-slider-background: rgba(218, 152, 3, 0.3);
+
+.setting-part-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+
+  .form-field {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .form-field-label {
+      font-size: 10px;
+      color: $hd-color-font;
+      margin-bottom: 5px;
+    }
+
+    .form-field-input {
+      border: none;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+      background: transparent;
+      font-size: 16px;
+      padding: 4px 0;
+      outline: none;
+      width: 100%;
+      box-sizing: border-box;
+      transition: border-color 0.2s ease;
+
+      &:focus {
+        border-bottom: 2px solid $hd-color-main;
+        margin-bottom: -1px;
+      }
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &[type='number'] {
+        -moz-appearance: textfield;
+      }
+    }
+  }
+
+  .third-width {
+    width: 32%
+  }
+
+  .setting-part-buttons {
+    .amount-button {
+      float: none;
+      box-sizing: border-box;
+      padding: 2px;
+      background: none;
+      cursor: pointer;
+      border: none;
+      width: 25px;
+      height: 25px;
+      margin: 0 5px;
+
+      co-icon {
+        display: block;
+        width: 25px;
+        height: 25px;
+
+        svg {
+          fill: $hd-color-font;
+        }
+      }
+    }
+  }
+
+  .setting-part-slider {
+    .value-slider {
+      width: 100%;
+      appearance: none;
+      height: 2px;
+      background: $co-homedecorator-input-slider-background;
+      outline: none;
+      cursor: pointer;
+
+      &::-webkit-slider-thumb {
+        appearance: none;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: $hd-color-main;
+        cursor: pointer;
+      }
+
+      &::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: $hd-color-main;
+        border: none;
+        cursor: pointer;
+      }
+
+      &::-moz-range-track {
+        height: 2px;
+        background: $co-homedecorator-input-slider-background;
+      }
+    }
+  }
+}
+
+
+
+
+
+

package/app/plugins/render/render-controls/render-controls.component.scss

@@ -5,12 +5,14 @@ $border-color: #dda73f;
 
 .render-container {
   position: relative;
+  min-width: 375px;
   //background: #fff;
   //margin: 0 10px 0 0;
   //border-radius: 50px;
   //box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
   .render-popup-container {
+    box-sizing: border-box;
     background: rgba(255, 255, 255, 0.7);
     padding: 10px 25px 25px;
     border-radius: 5px;
@@ -89,9 +91,9 @@ $border-color: #dda73f;
       background-color: #fff;
       min-height: 150px;
       min-width: 275px;
-      margin: 5px 0;
+      margin: 5px auto;
       position: relative;
-      width: 275px;
+      width: 340px;
       height: 150px;
 
       .render-popup-preview-placeholder {
@@ -169,44 +171,6 @@ $border-color: #dda73f;
         }
       }
 
-      .setting-part-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 5px;
-        .third-width {
-          width: 32%
-        }
-        .setting-part-buttons {
-
-          .amount-button {
-            float: none;
-            box-sizing: border-box;
-            padding: 2px;
-            background: none;
-            cursor: pointer;
-            border: none;
-            width: 25px;
-            height: 25px;
-            margin: 0 5px;
-            co-icon {
-              display: block;
-              width: 25px;
-              height: 25px;
-              ::ng-deep svg {
-                fill: #5b6875;
-              }
-            }
-          }
-        }
-        .setting-part-slider {
-          /*TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version.*/
-          .mat-slider-horizontal {
-            min-width: 110px;
-            height: 28px;
-          }
-        }
-      }
     }
   }
 

package/app/plugins/render/render-progress/render-progress.component.scss

@@ -63,7 +63,7 @@
       .progress-bar-text {
         position: absolute;
         inset: 0;
-        color: $hd-color-primary;
+        color: $hd-color-font;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -84,7 +84,7 @@
         width: 4px;
         height: 4px;
         border-radius: 50%;
-        background-color: $hd-color-primary;
+        background-color: $hd-color-font;
         opacity: 0.25;
         animation: loading-dot 1.2s infinite ease-in-out;
       }

package/app/shared/upload-model-dialog/components/model-previewer/model-preview.component.scss

@@ -1,289 +1,192 @@
-.model-preview {
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  position: relative;
+@import "../../../../../style/variables";
 
-  .model-preview-window {
-    .model-preview-window-bottom {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-
-      .disclaimer-text-container {
-        padding-right: 20px;
-        text-align: right;
-        font-style: italic;
-        font-size: 12px;
-      }
-    }
-  }
-
-  .model-preview-actions {
-    min-width: 350px;
-    box-sizing: border-box;
-    padding: 10px 20px;
-    border-left: 1px solid #5b6875;
-
-    #heightArticle {
-      max-width: 160px;
-    }
-
-    .units-select-form {
-      width: 80px;
-      margin: 0 5px;
-    }
-
-    .model-preview-info-container {
-      margin-bottom: 10px;
-
-      .model-preview-info-left {
-        font-weight: bolder;
-      }
-
-      .model-preview-info-right {
+:host {
+  ::ng-deep .form-input, ::ng-deep .co-input-text:not(.no-style):not(.read-only):not(.no-hover-line) {
+    .co-button {
+      background-color: transparent;
+      &:hover {
+        background-color: $hd-color-main;
       }
     }
-
-    .model-preview-info {
-      margin-top: 80px;
+    &:hover:before {
+      box-shadow: inset 0 0 0 2px $hd-color-main;
     }
   }
-
-  .exportButton {
-    cursor: pointer;
-    color: #fff;
-    background: #da9803;
-    border: 1px solid #da9803;
-    border-radius: 3px;
-    box-sizing: border-box;
-    padding: 5px;
+  .model-preview-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-
-    &:hover {
-      background: #da9803;
-      color: #fff;
-    }
-  }
-
-  input {
-    border: 1px solid #5b6875;
-    box-sizing: border-box;
-    padding: 3px 10px;
-    border-radius: 3px;
-    line-height: 30px;
-    width: 100%;
+    margin-bottom: 15px;
   }
-
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
-.mat-radio-wrapper {
-  margin: 10px 0;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
-mat-radio-group {
-  /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
-  mat-radio-button {
-    display: block;
+  .header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    .header-title-icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: $hd-color-main-light;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      ::ng-deep .co-icon {
+        svg { // for fontawesome icons
+          fill: $hd-color-main;
+        }
+        & [fill] { // for own icons
+          fill: $hd-color-main;
+        }
+      }
+    }
+    .header-title-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    .header-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .header-sub-title {
+      font-size: 12px;
+    }
   }
-}
-
-.base-button {
-  cursor: pointer;
-  color: #fff;
-  background: #da9803;
-  border: 1px solid #da9803;
-  border-radius: 3px;
-  box-sizing: border-box;
-  padding: 4px 10px;
-  line-height: 30px;
-
-  &:hover {
-    background: #da9803;
-    color: #fff;
+  .model-preview {
+    display: grid;
+    grid-template-columns: 60% 1fr;
+    grid-gap: 20px;
+    font-size: 14px;
+    position: relative;
   }
-}
-
-.model-placement-container {
-  div {
+  .preview-section {
     display: flex;
-    justify-content: space-between;
-    margin: 5px 0;
-    align-items: center;
+    flex-direction: column;
+    gap: 10px;
+    background: #FAF8F7;
+    border-radius: 10px;
+    border: 1px solid $hd-color-border;
+    padding: 20px;
   }
-}
 
-
-.rotation-button-container {
-  div {
+  .canvas-settings {
     display: flex;
-    justify-content: space-between;
-    margin-bottom: 5px;
+    gap: 20px;
+  }
 
-    p {
-      margin: 0;
-      padding: 0;
+  .settings-wrapper {
+    display: grid;
+    //grid-template-rows: 50% 1fr;
+    gap: 20px;
+    .settings-header-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
     }
-
-    button {
+    .settings-header-title {
       display: flex;
-      justify-content: center;
       align-items: center;
-      margin: 0 0 0 10px;
+      gap: 10px;
+      font-weight: bold;
+      font-size: 16px;
+    }
+    .settings-section {
+      display: flex;
+      gap: 20px;
+    }
+    .properties-wrapper {
+      display: flex;
+      gap: 20px;
+      .property-wrapper {
+        flex-basis: 100%;
+      }
+    }
+    .properties-options-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    ::ng-deep .info-icon {
+      width: 15px;
+      height: 15px;
       cursor: pointer;
-      color: #5b6875;
-      background: #fff;
-      border: 2px solid #5b6875;
+      border: 3px solid $hd-color-border-dark;
       border-radius: 50%;
-      box-sizing: border-box;
-      padding: 0;
-      height: 22px;
-      width: 22px;
-      font-size: 18px;
-
-      svg [fill] {
-        fill: #5b6875;
-      }
-
-      &:hover {
-        background: #da9803;
-        color: #fff;
+      svg { // for fontawesome icons
+        fill: $hd-color-border-dark;
       }
-    }
-
-    .button-as-link {
-      color: #da9803;
-      border: none;
-      width: 100%;
-      height: 100%;
-      font-size: 14px;
-      position: relative;
-      top: -15px;
-
-      ::ng-deep mat-icon {
-        width: 25px;
-        height: 25px;
-        position: relative;
-        top: 8px;
-
-        svg {
-          path {
-            fill: #da9803;
-          }
-        }
+      & [fill] { // for own icons
+        fill: $hd-color-border-dark;
       }
-
       &:hover {
-        background: none;
-        color: #da9803;
+        border: 3px solid $hd-color-main;
+        svg { // for fontawesome icons
+          fill: $hd-color-main;
+        }
+        & [fill] { // for own icons
+          fill: $hd-color-main;
+        }
       }
     }
   }
-}
-
-.error-container {
-  position: relative;
-  padding: .75rem 1.25rem;
-  margin-bottom: 1rem;
-  border: 1px solid #f5c6cb;
-  border-radius: .25rem;
-  color: #721c24;
-  background-color: #f8d7da;
-  max-width: 190px;
-}
-
-.exportButton, .exportButtonDark {
-  display: inline-block !important;
-  margin-right: 10px;
-}
-
-.exportButtonDark {
-  background: #5b6875;
-  border-color: #5b6875;
-
-  &:hover {
-    background: #5b6875;
-    color: #fff;
-  }
-}
-
-.model-close-preview {
-  text-align: right;
-  cursor: pointer;
-}
-
-.model-error-background {
-  position: absolute;
-  // make sure it fits the mat-dialog
-  top: -52px;
-  right: -24px;
-  bottom: -24px;
-  left: -24px;
-  z-index: 99;
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.model-error-container {
-  position: relative;
-  background: #fff;
-  box-sizing: border-box;
-  padding: 10px 25px;
-  border: 1px solid #5b6875;
-  top: 30%;
-  left: 50%;
-  width: 400px;
-  margin-left: -200px;
-
-  .model-error-header {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-:host {
-  ::ng-deep .mat-mdc-form-field-wrapper {
-    padding-bottom: 0;
-    border: 1px solid #5b6875;
-    border-radius: 4px;
-  }
-
-  ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-infix {
-    padding: 0;
-    border: none;
-  }
-  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
-  ::ng-deep .mat-select-value {
-    padding-left: 5px;
+  ::ng-deep .co-input-checkbox {
+    .checkbox {
+      border-radius: 5px;
+    }
+    .label {
+      user-select: none;
+    }
+    .checkbox.checked {
+      border-color: $hd-color-main;
+      background-color: $hd-color-main;
+    }
   }
-
-  ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-underline {
-    height: 0;
+  .reset-button {
+    font-size: 16px;
+    background: white;
+    border: 1px solid $hd-color-border;
+    color: $hd-color-font;
+    ::ng-deep .co-icon {
+      height: 50%;
+    }
   }
-  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
-  ::ng-deep .mat-select-trigger {
-    line-height: 36px;
+  .canvas-container {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    max-height: 500px;
+    > * {
+      width: 100%;
+      height: 100%;
+    }
   }
-
-  ::ng-deep mat-icon {
-    width: 18px;
-    height: 18px;
-
-    svg {
-      path {
-        fill: #5b6875;
+  .model-preview-button-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    justify-content: center;
+    border-color: $hd-color-border;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    margin-top: 20px;
+    padding: 20px;
+    .preview-cancel-button {
+      color: $hd-color-font;
+      background: white;
+      border: 1px solid $hd-color-border;
+    }
+    .preview-save-button {
+      background: $hd-color-main;
+      ::ng-deep .co-icon {
+        svg { // for fontawesome icons
+          fill: white;
+        }
+        & [fill] { // for own icons
+          fill: white;
+        }
       }
     }
   }
-  /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
-  ::ng-deep .mat-slide-toggle-content {
-    width: calc(100% - 36px);
-    min-width: 300px;
-  }
 }
-
-
-