@elderbyte/ngx-starter 19.1.0-beta.9 → 19.1.1

package/theming/components/_elder-toolbar-theme.scss

@@ -0,0 +1,79 @@
+@mixin theme($config-or-theme) {
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    .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-toolbar.elder-toolbar-main-nav-button-container {
+      &.mat-primary,
+      &.mat-accent {
+        background-color: var(--elder-toolbar-main-nav-button-container-bg-color);
+
+        .mat-mdc-icon-button {
+          color: var(--elder-toolbar-main-nav-button-color);
+        }
+      }
+    }
+  }
+
+  &.elder-light-theme {
+    .mat-toolbar.mat-primary .mat-mdc-input-element::placeholder {
+      color: var(--md-sys-color-inverse-on-surface) !important; // fix placeholder color
+    }
+  }
+
+  &.elder-dark-theme {
+    .mat-toolbar {
+      * {
+        color: var(--md-sys-color-on-surface) !important;
+      }
+      .mat-mdc-button-disabled,
+      .mat-mdc-button-disabled * {
+        color: var(--md-sys-color-outline) !important;
+      }
+      .elder-toolbar-main-nav-button .mat-icon {
+        color: var(--md-sys-color-primary) !important;
+      }
+    }
+    .mat-toolbar {
+      background-color: var(--elder-dark-gray) !important;
+    }
+    .mat-toolbar.mat-primary {
+      background-color: var(--md-sys-color-secondary-container) !important;
+    }
+    .mat-toolbar.mat-accent {
+      background-color: var(--elder-color-highlight-variant) !important;
+    }
+
+    elder-app-header .elder-panel {
+      color: var(--md-sys-color-on-surface) !important;
+    }
+
+    // .mat-toolbar,
+    // .mat-toolbar.mat-primary,
+    // .mat-toolbar.mat-accent {
+    //   background-color: var(--md-sys-color-secondary-container) !important;
+    // }
+    .elder-main-toolbar {
+      .mat-toolbar,
+      .mat-toolbar.mat-primary,
+      .mat-toolbar.mat-accent {
+        background-color: var(--elder-dark-gray) !important;
+      }
+    }
+  }
+}

package/theming/utilities/_elder-color-utils.scss

@@ -52,24 +52,32 @@
   );
 
   // background colors
+  .elder-pane-bg-color {
+    background-color: var(--elder-pane-bg-color);
+  }
+
   @each $name, $value in $color-variables {
-    .elder-bg-#{$name} {
+    .bg-#{$name} {
       background-color: #{$value};
     }
   }
 
-  .elder-bg-transparent {
+  .bg-transparent {
     background-color: transparent;
   }
 
+  .bg-app-background {
+    background-color: var(--mat-app-background-color);
+  }
+
+  .bg-pane-background {
+    background-color: var(--elder-pane-bg-color);
+  }
+
   // text colors
   @each $name, $value in $color-variables {
     .elder-text-#{$name} {
       color: #{$value};
     }
   }
-
-  .elder-pane-bg-color {
-    background-color: var(--elder-pane-bg-color);
-  }
 }

package/theming/utilities/_elder-common-utils.scss

@@ -1,17 +1,55 @@
 @mixin elder-common-utils() {
-    .border-none {
-        border: none;
-    }
-    .display-none {
-        display: none;
-    }
-    .text-center {
-        text-align: center;
-    }
-    .overflow-hidden {
-        overflow: hidden;
-    }
-    .overflow-auto {
-        overflow: auto;
-    }
+  .border-none {
+    border: none;
+  }
+  .border-radius-0 {
+    border-radius: 0;
+  }
+  .display-none {
+    display: none;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .full-width {
+    width: 100%; // legacy, keep for now
+  }
+
+  .scrollable {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .vertical-scrollable {
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .horizontal-scrollable {
+    overflow-y: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
+  .scroll-fix {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    user-select: none;
+  }
+  
+  .outlined {
+    border: 1px solid var(--md-sys-color-outline-variant);
+  }
 }

package/theming/utilities/_elder-flex-layout-utils.scss

@@ -213,6 +213,7 @@ $media: (
     flex: none;
   }
 
+  .elder-basic-pane-layout,
   .layout-row {
     & > .flex-100 {
       @include flex-initial-100;