ontimize-web-ngx 15.0.0-beta.1 → 15.0.0-beta.3

package/theme.scss

@@ -374,7 +374,10 @@
 
           &[aria-selected="true"] {
             background-color: mat.get-color-from-palette($primary, 100);
-            color: if($is-dark-theme, #121212, mat.get-color-from-palette($foreground, text));
+
+            .mdc-list-item__secondary-text {
+              color: if($is-dark-theme, #121212, mat.get-color-from-palette($foreground, text));
+            }
           }
         }
 
@@ -466,9 +469,6 @@
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
 
-  /* outline appearance */
-  $border-radius: 2px;
-
   .mat-mdc-form-field {
     &.mat-form-field-disabled.accent {
       @include icon-color-mixin(mat.get-color-from-palette($accent, 0.42));
@@ -490,7 +490,7 @@
       color: mat.get-color-from-palette($foreground, disabled-button);
     }
 
-    &.mat-form-field-appearance-ontimize.read-only{
+    &.mat-form-field-appearance-ontimize.read-only {
 
       .mat-mdc-select-disabled .mat-mdc-select-value {
         color: inherit;
@@ -509,14 +509,6 @@
       color: mat.get-color-from-palette($warn);
     }
 
-    /* OUTLINE APPEARANCE */
-    &.mat-form-field-appearance-outline .mdc-text-field--outlined .mdc-notched-outline {
-
-      .mdc-notched-outline__leading,
-      .mdc-notched-outline__trailing {
-        border-radius: $border-radius 0 0 $border-radius;
-      }
-    }
   }
 
   input:not([type]):disabled,
@@ -539,9 +531,11 @@
   }
 
   .o-tooltip.o-mat-error {
-    background: mat.get-color-from-palette($primary, default-contrast);
-    border: 1px solid mat.get-color-from-palette($warn);
-    color: mat.get-color-from-palette($warn);
+    .mdc-tooltip__surface {
+      background: mat.get-color-from-palette($primary, default-contrast);
+      border: 1px solid mat.get-color-from-palette($warn);
+      color: mat.get-color-from-palette($warn);
+    }
   }
 
   /* CHECKBOX */
@@ -696,6 +690,13 @@
         }
       }
 
+      @if($typography) {
+        .mat-mdc-dialog-title {
+          line-height: mat.font-size($typography, subtitle-1);
+          font-size: mat.font-size($typography, subtitle-1);
+        }
+      }
+
 
       .empty-filter-list {
         color: mat.get-color-from-palette($foreground, disabled-text);
@@ -713,117 +714,103 @@
 
         }
 
-        .mdc-list[dense],
-        .mat-mdc-selection-list[dense] {
-          outline: none;
-
-          .mat-mdc-list-option-checkbox-before {
-            display: flex;
-            align-items: center;
-            padding-right: 0px;
-            margin-right: 0px;
-          }
-
-
-        }
-
-        @if($typography) {
-          .mat-mdc-list[dense] {
-            .mat-mdc-list-item {
 
-              .empty-filter-list,
-              .mdc-list-item__content>* {
-                font-size: mat.font-size($typography, body-1);
-              }
+        .mdc-list {
+          padding: 0;
+          @include mat.list-density(-2);
 
-              .mat-mdc-list-item-line:nth-child(n+2) {
-                font-size: mat.font-size($typography, caption);
-              }
+          .mat-mdc-list-item.mdc-list-item {
+            margin: 6px 0;
+            border-radius: 4px;
 
+            &.mdc-list-item--with-leading-checkbox .mdc-list-item__start {
+              margin-right: 8px;
             }
-          }
-        }
-      }
-    }
 
-  }
+            &.mdc-list-item--with-one-line,
+            &.mdc-list-item--with-two-lines,
+            &.mdc-list-item--with-three-lines {
+              height: auto;
+              min-height: 30px;
 
+            }
 
-  /*MAT LIST DENSE in v15 is unsupported */
-  .mat-mdc-list[dense] {
-    .mat-mdc-list-item {
-      height: auto;
-
-      &.mdc-list-item--with-three-lines {
-        height: 76px;
-      }
-
-      &.mdc-list-item--with-two-lines {
-        height: 60px;
-      }
-
-      &.mdc-list-item--with-one-line {
-        height: 60px;
-      }
+            .mdc-list-item__content {
+              display: table;
+              align-self: center;
+              width: 100%;
 
 
+              .mdc-list-item__secondary-text,
+              .mdc-list-item__primary-text {
+                margin-bottom: 0;
+                align-self: center;
+                vertical-align: middle;
 
+                &::before,
+                &::after {
+                  content: none;
+                }
 
-      .mdc-list-item__primary-text,
-      .mdc-list-item__secondary-text {
-        margin-bottom: 0;
+                &.mat-mdc-list-item-unscoped-content {
+                  display: table-cell;
+                  vertical-align: middle;
+                  width: 100%;
+                }
+              }
+            }
 
-        &::before {
-          height: auto;
-          content: none;
-        }
+            .mdc-list-item__start {
+              align-self: center;
+              margin-top: 0;
+            }
 
-        @if($typography) {
-          font-size: mat.font-size($typography, caption);
+          }
         }
 
       }
     }
   }
 
+
+
   /*global styles about drag/drop in dialogs table*/
   .cdk-drag-preview,
   .cdk-drag-dragging {
-    width: 100%;
-    display: block;
 
-    background-color: mat.get-color-from-palette($background, background);
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-    box-sizing: border-box;
-    border-radius: 2px;
+    &.mdc-list-item.mat-mdc-list-item {
 
-    @if($typography) {
-      .mdc-list-item__content {
-        font-size: mat.font-size($typography, body-1);
-      }
-    }
+      background-color: mat.get-color-from-palette($background, background);
+      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+      box-sizing: border-box;
+      border-radius: 2px;
 
-    .mdc-list-item__content {
-      display: block;
-      color: mat.get-color-from-palette($foreground, text);
-      padding: 6px;
-      flex-direction: row;
-      align-items: center;
-      //background-color: mat.get-color-from-palette($background, background);
-      //display: flex;
-      //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-      //box-sizing: border-box;
-      // border-radius: 2px;
+      .mdc-list-item__secondary-text,
+      .mdc-list-item__primary-text {
+        padding: 0 8px;
+        width: 100%;
+
+        &::before,
+        &::after {
+          content: none;
+        }
+      }
 
-      .mat-mdc-list-item-icon {
-        padding: 4px;
+      .mdc-list-item__start {
+        align-self: center;
+        margin-top: 0;
+        margin-right: 8px;
       }
 
-      .mat-mdc-list-text {
-        padding-left: 16px;
-        width: 100%;
+      .mdc-list-item__secondary-text {
+        color: mat.get-color-from-palette($foreground, icon);
+
+        @if($typography) {
+          font-size: mat.font-size($typography, body-1);
+        }
       }
     }
+
   }
 
   .cdk-drop-list-dragging .o-drag-list-item-box:not(.cdk-drag-placeholder) {
@@ -999,8 +986,6 @@
   .o-mat-menu.mat-mdc-menu-panel {
     min-height: auto;
   }
-
-
 }// Layout-padding-xxx & Layout-margin-xxxx
 // ------------------------------
 $baseline-grid: 8px !default;

package/theming/addons/report-on-demand.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use '@angular/material'as mat;
+@use '@angular/material' as mat;
 
 @mixin report-on-demand($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
@@ -7,6 +7,10 @@
 
   .report-on-demand-sidenav {
     .mat-expansion-panel {
+      border: 1px solid mat.get-color-from-palette($background, background);
+    }
+
+    .mat-expansion-panel-header {
       background-color: mat.get-color-from-palette($background, background);
     }
   }

package/theming/ontimize-style-v8.scss

@@ -86,7 +86,7 @@ $app-background-color: #eaeaea;
 
   @include theme.o-material-theme($theme-or-color-config);
   @include layout.layout-padding-margin();
-  @include o-density.checkbox(19px, 19px, 15px);
+  @include o-density.checkbox();
   @include o-density.list();
   @include o-density.radio();
   @include o-table-style.o-table-style($theme-or-color-config);
@@ -151,6 +151,20 @@ $app-background-color: #eaeaea;
   .o-app-sidenav {
     font-weight: 400;
     color: #aaaaaa;
+
+    .mat-drawer-closed {
+
+      .o-app-sidenav-menu-group,
+      .o-app-sidenav-menu-item {
+        a {
+          width: variables.$sidenav-closed-width - variables.$margin-left-buttom;
+          max-width: variables.$sidenav-closed-width - variables.$margin-left-buttom;
+          min-width: variables.$sidenav-closed-width - variables.$margin-left-buttom;
+          padding-left: 4px;
+          padding-right: 12px;
+        }
+      }
+    }
   }
 
   /* USER INFO */
@@ -304,4 +318,12 @@ $app-background-color: #eaeaea;
   o-row.o-row.bg-level-1 {
     background-color: mat.get-color-from-palette($background, level-1);
   }
+}
+
+@mixin ontimize-theme-all-component-color($theme-or-color-config) {
+  $color: map.get($theme-or-color-config, color);
+  @include ontimize-theme-styles((color: $color,
+      typography: null,
+      density: null,
+    ));
 }

package/theming/ontimize-style.scss

@@ -693,11 +693,12 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
       }
 
       @if($typography) {
+
         >.o-container-title,
         >.mat-expansion-panel-header .o-container-title {
           span {
             font: {
-              size: mat.font-size($typography, headline-5);
+              size: mat.font-size($typography, headline-6);
               weight: bold;
             }
           }

package/theming/styles/density.scss

@@ -1,37 +1,51 @@
 @use '@angular/material'as mat;
 @use "sass:selector";
 
-@mixin checkbox($ripple-size, $touch-target-size, $icon-size) {
+@mixin checkbox() {
 
 
-  mat-checkbox.mat-mdc-checkbox .mdc-checkbox,
-  .mdc-list-item.mat-mdc-list-option .mdc-checkbox {
-    padding: calc((var(--mdc-checkbox-ripple-size, $ripple-size) - var(--mdc-checkbox-icon-size, $icon-size)) / 2);
-    margin: calc((var(--mdc-checkbox-touch-target-size, $touch-target-size) - var(--mdc-checkbox-icon-size)) / 2);
-
-    .mdc-checkbox__background {
-      top: calc((var(--mdc-checkbox-ripple-size, $ripple-size) - var(--mdc-checkbox-icon-size, $icon-size)) / 2);
-      left: calc((var(--mdc-checkbox-ripple-size, $ripple-size) - var(--mdc-checkbox-icon-size, $icon-size)) / 2);
-      height: var(--mdc-checkbox-icon-size, $icon-size);
-      width: var(--mdc-checkbox-icon-size, $icon-size);
-    }
+  mat-checkbox.mat-mdc-checkbox .mdc-checkbox {
 
-    .mdc-checkbox__native-control {
-      top: calc((20px - var(--mdc-checkbox-touch-target-size, $touch-target-size)) / 2);
-      right: calc((20px - var(--mdc-checkbox-touch-target-size, $touch-target-size)) / 2);
+    @include checkbox-size(28px, 16px);
+  }
 
-      left: calc((20px - var(--mdc-checkbox-touch-target-size, $touch-target-size)) / 2);
-      width: var(--mdc-checkbox-touch-target-size, $touch-target-size);
-      height: var(--mdc-checkbox-touch-target-size, $touch-target-size);
+  .o-table {
+    mat-checkbox.mat-mdc-checkbox .mdc-checkbox {
+      @include checkbox-size(28px, 18px);
     }
+  }
 
-    .mat-mdc-checkbox-touch-target {
-      height: var(--mdc-checkbox-touch-target-size, $touch-target-size);
-      width: var(--mdc-checkbox-touch-target-size, $touch-target-size);
-    }
+  .mdc-list-item.mat-mdc-list-option .mdc-checkbox {
+    @include checkbox-size(21px, 15px);
+  }
+
+}
 
-    //}
+@mixin checkbox-size($ripple-size, $icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+  flex: 0 0 $icon-size;
+  padding: calc(($ripple-size - $icon-size) / 2) + 1;
+
+
+  .mdc-checkbox__background {
+    top: calc(($ripple-size - $icon-size) / 2) + 1;
+    left: calc(($ripple-size - $icon-size) / 2) + 1;
+    width: $icon-size;
+    height: $icon-size;
+  }
+
+  .mdc-checkbox__native-control {
+    width: $ripple-size;
+    height: $ripple-size;
+
+  }
+
+  .mat-mdc-checkbox-touch-target {
+    height: $icon-size;
+    width: $icon-size;
   }
+
 }
 
 @mixin radio() {

package/theming/styles/ontimize-v8/o-form-field-style.scss

@@ -1,10 +1,21 @@
 @use '@angular/material'as mat;
-
+@use 'variables.scss';
 
 .mat-mdc-form-field {
 
-  @include mat.form-field-density(-4);
+  @include mat.form-field-density(-2);
+
+  &.mat-form-field-appearance-outline .mdc-notched-outline {
+    .mdc-notched-outline__leading {
+      border-top-left-radius: variables.$border-radius;
+      border-bottom-left-radius: variables.$border-radius;
+    }
 
+    .mdc-notched-outline__trailing {
+      border-top-right-radius: variables.$border-radius;
+      border-bottom-right-radius: variables.$border-radius;
+    }
+  }
 
   &.icon-field .mat-mdc-form-field-icon-suffix .icon-btn,
   &.icon-field .mat-mdc-form-field-icon-suffix .mat-icon-button,
@@ -21,17 +32,14 @@
     }
   }
 
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
-
   .mat-mdc-text-field-wrapper {
     .mat-mdc-form-field-flex {
       .mat-mdc-form-field-infix {
         min-height: auto;
-        padding-bottom: 4px;
-
 
+        .mat-mdc-form-field-input-control:not(textarea){
+          height: 1em;
+        }
         .mat-mdc-floating-label {
           display: block;
         }
@@ -40,13 +48,13 @@
           height: auto;
         }
       }
-
-      &:not(.mdc-text-field--outlined) {
-        .mat-mdc-form-field-infix {
-          min-height: auto;
-          padding-top: 14px;
-        }
-      }
     }
+
+  }
+
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix,
+  .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
+    padding-bottom: 4px;
+    padding-top: 18px;
   }
 }

package/theming/styles/ontimize-v8/o-table-style.scss

@@ -9,7 +9,7 @@
   $typography: map.get($theme, typography);
 
   /* TABLE */
-  .ontimize-table.o-table {
+  .ontimize-table.o-table.o-table {
     font-weight: 400;
 
     .o-table-container {

package/theming/styles/ontimize-v8/variables.scss

@@ -7,4 +7,7 @@
   $background-tab-inactive-on-dark: #686868;
   $background-tab-inactive-on-light: #D7DDE0;
   /*Application background-color*/
-  $app-background-color: #eaeaea;
+  $app-background-color: #eaeaea;
+
+  $margin-left-buttom: 8px;
+  $sidenav-closed-width: 48px;

package/theming/themes/ontimize-blue.scss

@@ -5,14 +5,17 @@
 /* Color definitions */
 $mat-custom-primary: (50 : #e3ecf4, 100 : #b9d1e4, 200 : #8ab2d2, 300 : #5b93c0, 400 : #377bb3, 500 : #1464a5, 600 : #125c9d, 700 : #0e5293, 800 : #0b488a, 900 : #063679, A100 : #a8c7ff, A200 : #75a7ff, A400 : #4286ff, A700 : #2876ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
 
-$mat-custom-accent: (50 : #e3ecf4, 100 : #b9d1e4, 200 : #8ab2d2, 300 : #5b93c0, 400 : #377bb3, 500 : #1464a5, 600 : #125c9d, 700 : #0e5293, 800 : #0b488a, 900 : #063679, A100 : #a8c7ff, A200 : #75a7ff, A400 : #4286ff, A700 : #2876ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
+$mat-custom-primary-dark: (50 : #f1f6fa, 100 : #dce8f2, 200 : #c5d9e9, 300 : #adc9e0, 400 : #9cbed9, 500 : #8ab2d2, 600 : #82abcd, 700 : #77a2c7, 800 : #6d99c1, 900 : #5a8ab6, A100 : #ffffff, A200 : #ebf5ff, A400 : #b8dcff, A700 : #9ed0ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ));
 
 // Define a theme.
 $primary: mat.define-palette($mat-custom-primary);
-$accent: mat.define-palette($mat-custom-accent);
+$accent:$primary;
+
+$primary-dark: mat.define-palette($mat-custom-primary-dark);
+$accent-dark: $primary-dark;
 
 /* Light theme */
 $theme: ontimize-style.o-mat-light-theme($primary, $accent);
 
 /* Dark theme */
-$dark-theme: ontimize-style.o-mat-dark-theme($primary, $accent);
+$dark-theme: ontimize-style.o-mat-dark-theme($primary-dark, $accent-dark);