@elderbyte/ngx-starter 18.13.0-beta.0 → 18.13.0-beta.2

package/theming/_elder-style-fixes.scss

@@ -118,31 +118,225 @@
 }
 
 @mixin _mat3-fixes($theme) {
-  --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
-  --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
-  --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
-  --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
-  --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
-  --mat-toolbar-title-text-weight: 500; // mat toolbar typography
-
-  .mat-toolbar {
-    &.mat-primary {
-      --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
-      --mat-toolbar-container-background-color: var(--md-sys-color-primary);
-      .mat-mdc-icon-button {
-        color: var(--md-sys-color-on-primary);
+  .mat-toolbar .mat-mdc-icon-button {
+    color: inherit;
+  }
+
+  // reduce border radius from overlay
+  //--mdc-dialog-container-shape: 4px;
+
+  // remove weird box shadow of card in overlay (Problem: Cards shouldn't be in overlay)
+  .mat-mdc-dialog-container .mat-mdc-card {
+    box-shadow: none;
+  }
+
+  // .mat-mdc-slide-toggle {
+  //   margin-bottom: 4px;
+  // }
+
+  // fix elder badge borders
+  elder-badge {
+    .mat-mdc-standard-chip .mat-mdc-chip-action::before {
+      //border-color: var(--md-sys-color-outline);
+      border: none;
+    }
+  }
+
+  // set bg darker
+  // ::ng-deep .mat-app-background.elder-light-theme,
+  // ::ng-deep .mat-app-background.elder-dark-theme {}
+  //background-color: red !important;
+  --mat-app-background-color: var(--md-sys-color-surface-container-highest) !important;
+
+  .mat-app-background {
+    display: block;
+  }
+
+  .mat-mdc-tab-group {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  .legacy-layout-card {
+    background-color: var(--mdc-elevated-card-container-color);
+    border: var(--elder-border-light);
+    border-radius: var(--elder-border-radius-sm);
+    // pane style
+    border: none !important;
+    border-radius: var(--mdc-outlined-card-container-shape, var(--mat-app-corner-medium));
+    overflow: hidden;
+  }
+
+  .elder-card-header {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  .elder-card-title {
+    padding-bottom: 0 !important;
+    margin-bottom: 6px !important;
+  }
+
+  .elder-card-header {
+    margin-bottom: 12px !important;
+  }
+
+  // remove extra background from drawer
+  .mat-drawer-container {
+    background-color: transparent !important;
+  }
+
+  // .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
+  //   background-color: var(--md-sys-color-inverse-surface);
+  // }
+
+  // app header bg color
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    elder-app-header .mat-panel.mat-primary {
+      background-color: var(--md-sys-color-primary) !important;
+      color: var(--md-sys-color-on-primary) !important;
+    }
+
+    .mat-toolbar {
+      &.mat-primary {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-primary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-primary);
+        }
+      }
+      &.mat-accent {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-tertiary);
+        }
       }
     }
-    &.mat-accent {
-      --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
-      --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
-      .mat-mdc-icon-button {
-        color: var(--md-sys-color-on-tertiary);
+
+    .mat-toolbar.mat-primary,
+    .mat-toolbar.mat-accent {
+      // color all toolbars primary
+      background-color: var(--md-sys-color-primary) !important;
+      * {
+        color: white !important;
       }
     }
   }
 
-  .mat-toolbar .mat-mdc-icon-button {
-    color: inherit;
+  &.elder-dark-theme {
+    .mat-panel {
+      background-color: var(--elder-dark-gray) !important;
+    }
+
+    .mat-toolbar.mat-primary,
+    .mat-toolbar.mat-accent {
+      background-color: var(--elder-dark-gray) !important;
+      * {
+        color: white !important;
+      }
+      .elder-toolbar-main-nav-button .mat-icon {
+        color: var(--md-sys-color-primary) !important;
+      }
+    }
+
+    elder-app-header .mat-panel {
+      color: var(--md-sys-color-on-surface) !important;
+    }
+  }
+
+  /**************************************************************************
+    * Start cloudfiles import 1
+    *************************************************************************/
+    
+  // mat tab group shouldnt have a background color
+  .mat-mdc-tab-header {
+    background-color: var(--md-sys-color-surface-container-low);
+  }
+
+  .mat-mdc-tab-group {
+    background-color: transparent !important;
+  }
+
+  elder-data-toolbar {
+    display: block;
+    //background-color: var(--md-sys-color-surface-container);
+  }
+
+  elder-search-box .elder-search-box-field {
+    background-color: var(--md-sys-color-surface-container-lowest);
+    border: none !important;
+    margin-top: 12px !important;
+    margin-bottom: 12px !important;
+    border-radius: var(
+      --mdc-outlined-card-container-shape,
+      var(--mat-app-corner-medium)
+    ) !important;
+
+    &.mat-focused {
+      background-color: var(--md-sys-color-surface-container-lowest);
+    }
+  }
+
+  elder-search-box {
+    .mdc-notched-outline .mat-mdc-notch-piece {
+      border: none !important;
+    }
   }
+
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    elder-table {
+      --mat-table-background-color: var(--md-sys-color-surface-container);
+
+      .mat-mdc-row {
+        background-color: var(--md-sys-color-surface-container-lowest);
+      }
+
+      .mat-mdc-header-row {
+        background: var(--md-sys-color-surface-container-low) !important;
+      }
+    }
+
+    elder-table .legacy-layout-card {
+      background-color: var(--md-sys-color-surface-container-low) !important;
+    }
+  }
+
+  /**************************************************************************
+    * End cloudfiles import 1
+    *************************************************************************/
+
+  // Button colors
+  .mat-accent.mat-mdc-button-base {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container); 
+  }
+
+  // slide toggle colors
+  .mat-accent.mat-mdc-slide-toggle {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container);
+  }
+
+  .mat-accent.mat-mdc-standard-chip {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container);
+  }
+
+  // // switch toggle (deactivaded)
+  // // --mdc-switch-track-shape:
+  // --mat-switch-with-icon-handle-size: 24px;
+  // --mdc-switch-track-height: 12px;
+  // //--mat-switch-unselected-with-icon-handle-horizontal-margin: 0 4px;
+  // --mat-switch-selected-with-icon-handle-horizontal-margin: 0 14px;
+  // --mdc-switch-track-width: 42px;
+  // --mat-switch-track-outline-width: 0;
+  // --mdc-switch-unselected-track-color: var(--md-sys-color-secondary);
+  // //--mdc-switch-unselected-handle-color: var(--md-sys-color-secondary-container);
 }

package/theming/_mixins.scss

@@ -17,7 +17,6 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;
   }
 
   .mat-mdc-form-field-icon-prefix > .mat-mdc-icon-button,