ontimize-web-ngx 15.0.0-beta.5 → 15.0.0

package/theme.scss

@@ -413,9 +413,13 @@
 
     .o-grid-container {
       .o-loading-blocker .o-spinner-container {
-        background-color: mat.get-color-from-palette($background, background);
+       background-color: transparent;
       }
     }
+
+    .mat-paginator {
+      background-color: inherit;
+    }
   }
 }@mixin o-image-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
@@ -555,6 +559,7 @@
 }@mixin o-list-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $foreground: map.get($theme, foreground);
+  $background: map.get($theme, background);
 
   .o-list-container {
 
@@ -570,6 +575,17 @@
     .o-list-item-icon {
       color: mat.get-color-from-palette($foreground, icon);
     }
+
+    .spinner-container {
+      &:not(.pageable-loading) {
+        background-color: transparent;
+
+      }
+
+      &.pageable-loading {
+        background-color: transparent;
+      }
+    }
   }
 }@mixin app-global-theme($theme-or-color-config, $typography: null) {
   $theme: map.get($theme-or-color-config, color);
@@ -1080,7 +1096,7 @@ $layout-gutter-width-horizontal: 14px !default;
 */
   .md-drppicker {
 
-    background-color: mat.get-color-from-palette($background, background);
+    background-color: mat.get-color-from-palette($background, card);
 
     &:after,
     &:before {
@@ -1298,7 +1314,7 @@ $layout-gutter-width-horizontal: 14px !default;
     }
 
     .spinner-container {
-      background-color: mat.get-color-from-palette($background, background);
+      background-color: transparent;
     }
 
     .o-table-menu-button {
@@ -1493,7 +1509,7 @@ $layout-gutter-width-horizontal: 14px !default;
   $foreground: map.get($theme, foreground);
 
   .o-form-layout-tabgroup {
-    .spinner-container {
+    >.spinner-container {
       background-color: mat.get-color-from-palette($background, background);
     }
 

package/theming/ontimize-style-v8.scss

@@ -90,6 +90,7 @@ $app-background-color: #eaeaea;
   @include o-density.list();
   @include o-density.radio();
   @include o-density.menu($typography);
+  @include o-density.tree();
   @include o-table-style.o-table-style($theme-or-color-config);
   @include report-on-demand.report-on-demand($theme-or-color-config);
   @include charts-on-demand.o-chart-on-demand($theme-or-color-config);
@@ -327,4 +328,4 @@ $app-background-color: #eaeaea;
       typography: null,
       density: null,
     ));
-}
+}

package/theming/ontimize-style.scss

@@ -755,4 +755,22 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
       padding: 0;
     }
   }
+
+  .o-table-skeleton-header {
+    background-color: mat.get-color-from-palette($background, level-04);
+  }
+
+  .o-grid-skeleton-item,
+  .o-table .o-table-skeleton-item,
+  .o-list-skeleton-item {
+    div.skeleton-loader {
+      background: mat.get-color-from-palette($background, level-04) no-repeat;
+    }
+  }
+
+  .o-list-skeleton-item {
+    background-color: mat.get-color-from-palette($background, level-08);
+    border-radius: variables.$border-radius;
+  }
+
 }

package/theming/styles/density.scss

@@ -81,10 +81,14 @@
     min-height: auto;
 
     @if($typography) {
-      .mdc-list-item__primary-text{
+      .mdc-list-item__primary-text {
         font-size: mat.font-size($typography, body-2);
 
       }
     }
   }
-}
+}
+
+@mixin tree() {
+  @include mat.tree-density(-2);
+}

package/theming/themes/ontimize-black-yellow.scss

@@ -1,14 +1,24 @@
+/*
+ontimize-black-yellow.scss for use with ontimize v8 styles,
+ontimize v8 styles differs v15 styes in that the background of the sidenav is the color primary.
+
+In your app.css, you must add the next line
+
+`@use 'ontimize-web-ngx/theming/ontimize-style-v8.scss' as ontimize-style;` instead of `@use 'ontimize-web-ngx/theming/ontimize-style.scss' as ontimize-style;`
+
+*/
+
 @use '@angular/material'as mat;
 @use '../ontimize-style-v8.scss'as ontimize-style;
 
 
 /* Color definitions */
-$mat-custom-primary: (50 : #e5e5e5, 100 : #bdbdbd, 200 : #929292, 300 : #666666, 400 : #454545, 500 : #242424, 600 : #202020, 700 : #1b1b1b, 800 : #161616, 900 : #0d0d0d, A100 : #e5e5e5, A200 : #bdbdbd, A400 : #454545, A700 : #1b1b1b, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: white, ));
+$mat-custom-primary: (50 : #e5e5e5, 100 : #bdbdbd, 200 : #929292, 300 : #666666, 400 : #454545, 500 : #242424, 600 : #202020, 700 : #1b1b1b, 800 : #161616, 900 : #0d0d0d, A100 : #e5e5e5, A200 : #bdbdbd, A400 : #454545, A700 : #1b1b1b, contrast: (50: #000000DE, 100: #000000DE, 200: #000000DE, 300: white, 400: white, 500: #FFFFFFDE, 600: #FFFFFFDE, 700: #FFFFFFDE, 800: #FFFFFFDE, 900: #FFFFFFDE, A100: #000000DE, A200: white, A400: white, A700: white, ));
 
-$mat-custom-accent: (50 : #fff9e0, 100 : #fff0b3, 200 : #ffe680, 300 : #ffdb4d, 400 : #ffd426, 500 : #ffcc00, 600 : #ffc700, 700 : #ffc000, 800 : #ffb900, 900 : #ffad00, A100 : #fff9e0, A200 : #ffe680, A400 : #ffd426, A700 : #ffc000, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: white, ));
+$mat-custom-accent: (50 : #fff9e0, 100 : #fff0b3, 200 : #ffe680, 300 : #ffdb4d, 400 : #ffd426, 500 : #ffcc00, 600 : #ffc700, 700 : #ffc000, 800 : #ffb900, 900 : #ffad00, A100 : #fff9e0, A200 : #ffe680, A400 : #ffd426, A700 : #ffc000, contrast: (50: #000000DE, 100: #000000DE, 200: #000000DE, 300: white, 400: white, 500: #FFFFFFDE, 600: #FFFFFFDE, 700: #FFFFFFDE, 800: #FFFFFFDE, 900: #FFFFFFDE, A100: #000000DE, A200: white, A400: white, A700: white, ));
 
 // Define a theme.
 $primary: mat.define-palette($mat-custom-primary);
 $accent: mat.define-palette($mat-custom-accent);
 $theme: ontimize-style.o-mat-light-theme($primary, $accent);
-$dark-theme: ontimize-style.o-mat-dark-theme($primary, $accent);
+$dark-theme: ontimize-style.o-mat-dark-theme($primary, $accent);