@elderbyte/ngx-starter 19.0.2 → 19.1.0-beta.1

package/theming/utility-classes/_elder-layout-system.scss

@@ -0,0 +1,498 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin elder-layout-system($theme) {
+  $common-sizes: map.get($theme, elder, common-sizes);
+
+  /***************************************************************************
+   *                                                                         *
+   * Common Sizes                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  $xs: map.get($common-sizes, xs);
+  $sm: map.get($common-sizes, sm);
+  $md: map.get($common-sizes, md);
+  $lg: map.get($common-sizes, lg);
+  $xl: map.get($common-sizes, xl);
+  $xxl: map.get($common-sizes, xxl);
+
+  /***************************************************************************
+   *                                                                         *
+   * Padding                                                                 *
+   *                                                                         *
+   **************************************************************************/
+
+  .p-xs {
+    padding: $xs;
+  }
+
+  .pt-xs {
+    padding-top: $xs;
+  }
+
+  .pb-xs {
+    padding-bottom: $xs;
+  }
+
+  .pr-xs {
+    padding-right: $xs;
+  }
+
+  .pl-xs {
+    padding-left: $xs;
+  }
+
+  .px-xs {
+    padding-left: $xs;
+    padding-right: $xs;
+  }
+
+  .py-xs {
+    padding-top: $xs;
+    padding-bottom: $xs;
+  }
+
+  .p-sm {
+    padding: $sm;
+  }
+
+  .pt-sm {
+    padding-top: $sm;
+  }
+
+  .pb-sm {
+    padding-bottom: $sm;
+  }
+
+  .pr-sm {
+    padding-right: $sm;
+  }
+
+  .pl-sm {
+    padding-left: $sm;
+  }
+
+  .px-sm {
+    padding-left: $sm;
+    padding-right: $sm;
+  }
+
+  .py-sm {
+    padding-top: $sm;
+    padding-bottom: $sm;
+  }
+
+  .p-md {
+    padding: $md;
+  }
+
+  .pt-md {
+    padding-top: $md;
+  }
+
+  .pb-md {
+    padding-bottom: $md;
+  }
+
+  .pr-md {
+    padding-right: $md;
+  }
+
+  .pl-md {
+    padding-left: $md;
+  }
+
+  .px-md {
+    padding-left: $md;
+    padding-right: $md;
+  }
+
+  .py-md {
+    padding-top: $md;
+    padding-bottom: $md;
+  }
+
+  .p-lg {
+    padding: $lg;
+  }
+
+  .pt-lg {
+    padding-top: $lg;
+  }
+
+  .pb-lg {
+    padding-bottom: $lg;
+  }
+
+  .pr-lg {
+    padding-right: $lg;
+  }
+
+  .pl-lg {
+    padding-left: $lg;
+  }
+
+  .px-lg {
+    padding-left: $lg;
+    padding-right: $lg;
+  }
+
+  .py-lg {
+    padding-top: $lg;
+    padding-bottom: $lg;
+  }
+
+  .p-xl {
+    padding: $xl;
+  }
+
+  .pt-xl {
+    padding-top: $xl;
+  }
+
+  .pb-xl {
+    padding-bottom: $xl;
+  }
+
+  .pr-xl {
+    padding-right: $xl;
+  }
+
+  .pl-xl {
+    padding-left: $xl;
+  }
+
+  .px-xl {
+    padding-left: $xl;
+    padding-right: $xl;
+  }
+
+  .py-xl {
+    padding-top: $xl;
+    padding-bottom: $xl;
+  }
+
+  .p-xxl {
+    padding: $xxl;
+  }
+
+  .pt-xxl {
+    padding-top: $xxl;
+  }
+
+  .pb-xxl {
+    padding-bottom: $xxl;
+  }
+
+  .pr-xxl {
+    padding-right: $xxl;
+  }
+
+  .pl-xxl {
+    padding-left: $xxl;
+  }
+
+  .px-xxl {
+    padding-left: $xxl;
+    padding-right: $xxl;
+  }
+
+  .py-xxl {
+    padding-top: $xxl;
+    padding-bottom: $xxl;
+  }
+
+  .p-0 {
+    padding: 0;
+  }
+
+  .pt-0 {
+    padding-top: 0;
+  }
+
+  .pb-0 {
+    padding-bottom: 0;
+  }
+
+  .pr-0 {
+    padding-right: 0;
+  }
+
+  .pl-0 {
+    padding-left: 0;
+  }
+
+  .px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Margin                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  .m-auto {
+    margin: auto;
+  }
+
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .m-0 {
+    margin: 0;
+  }
+
+  .mt-0 {
+    margin-top: 0;
+  }
+
+  .mb-0 {
+    margin-bottom: 0;
+  }
+
+  .mr-0 {
+    margin-right: 0;
+  }
+
+  .ml-0 {
+    margin-left: 0;
+  }
+
+  .mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .m-xs {
+    margin: $xs;
+  }
+
+  .mt-xs {
+    margin-top: $xs;
+  }
+
+  .mb-xs {
+    margin-bottom: $xs;
+  }
+
+  .mr-xs {
+    margin-right: $xs;
+  }
+
+  .ml-xs {
+    margin-left: $xs;
+  }
+
+  .mx-xs {
+    margin-left: $xs;
+    margin-right: $xs;
+  }
+
+  .my-xs {
+    margin-top: $xs;
+    margin-bottom: $xs;
+  }
+
+  .m-sm {
+    margin: $sm;
+  }
+
+  .mt-sm {
+    margin-top: $sm;
+  }
+
+  .mb-sm {
+    margin-bottom: $sm;
+  }
+
+  .mr-sm {
+    margin-right: $sm;
+  }
+
+  .ml-sm {
+    margin-left: $sm;
+  }
+
+  .mx-sm {
+    margin-left: $sm;
+    margin-right: $sm;
+  }
+
+  .my-sm {
+    margin-top: $sm;
+    margin-bottom: $sm;
+  }
+
+  .m-md {
+    margin: $md;
+  }
+
+  .mt-md {
+    margin-top: $md;
+  }
+
+  .mb-md {
+    margin-bottom: $md;
+  }
+
+  .mr-md {
+    margin-right: $md;
+  }
+
+  .ml-md {
+    margin-left: $md;
+  }
+
+  .mx-md {
+    margin-left: $md;
+    margin-right: $md;
+  }
+
+  .my-md {
+    margin-top: $md;
+    margin-bottom: $md;
+  }
+
+  .m-lg {
+    margin: $lg;
+  }
+
+  .mt-lg {
+    margin-top: $lg;
+  }
+
+  .mb-lg {
+    margin-bottom: $lg;
+  }
+
+  .mr-lg {
+    margin-right: $lg;
+  }
+
+  .ml-lg {
+    margin-left: $lg;
+  }
+
+  .mx-lg {
+    margin-left: $lg;
+    margin-right: $lg;
+  }
+
+  .my-lg {
+    margin-top: $lg;
+    margin-bottom: $lg;
+  }
+
+  .m-xl {
+    margin: $xl;
+  }
+
+  .mt-xl {
+    margin-top: $xl;
+  }
+
+  .mb-xl {
+    margin-bottom: $xl;
+  }
+
+  .mr-xl {
+    margin-right: $xl;
+  }
+
+  .ml-xl {
+    margin-left: $xl;
+  }
+
+  .mx-xl {
+    margin-left: $xl;
+    margin-right: $xl;
+  }
+
+  .my-xl {
+    margin-top: $xl;
+    margin-bottom: $xl;
+  }
+
+  .m-xxl {
+    margin: $xxl;
+  }
+
+  .mt-xxl {
+    margin-top: $xxl;
+  }
+
+  .mb-xxl {
+    margin-bottom: $xxl;
+  }
+
+  .mr-xxl {
+    margin-right: $xxl;
+  }
+
+  .ml-xxl {
+    margin-left: $xxl;
+  }
+
+  .mx-xxl {
+    margin-left: $xxl;
+    margin-right: $xxl;
+  }
+
+  .my-xxl {
+    margin-top: $xxl;
+    margin-bottom: $xxl;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Layout Widths                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  .width-5p {
+    width: 5%;
+  }
+
+  .width-10p {
+    width: 10%;
+  }
+
+  .width-15p {
+    width: 15%;
+  }
+
+  .width-20p {
+    width: 20%;
+  }
+
+  .width-25p {
+    width: 25%;
+  }
+
+  .width-30p {
+    width: 30%;
+  }
+
+  .width-40p {
+    width: 40%;
+  }
+
+  .width-50p {
+    width: 50%;
+  }
+}

package/src/lib/components/panels/flat/_elder-panel-theme.scss

@@ -1,72 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin _elder-panel-color($palette) {
-  background: mat.m2-get-color-from-palette($palette);
-  color: mat.m2-get-color-from-palette($palette, default-contrast);
-}
-
-@mixin _elder-panel-form-field-overrides {
-  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-  .mat-form-field-underline,
-  .mat-form-field-ripple,
-  .mat-focused .mat-form-field-ripple {
-    background-color: currentColor;
-  }
-
-  .mat-mdc-form-field-label,
-  .mat-focused .mat-form-field-label,
-  .mat-select-value,
-  .mat-select-arrow,
-  .mat-form-field.mat-focused .mat-select-arrow {
-    color: inherit;
-  }
-
-  .mat-mdc-input-element {
-    caret-color: currentColor;
-  }
-}
-
-@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .mat-panel {
-    background: mat.m2-get-color-from-palette($background, app-bar);
-    color: mat.m2-get-color-from-palette($foreground, text);
-    transition: background 0.5s;
-
-    &.mat-primary {
-      @if (map-get($theme, is-dark)) {
-        // dark
-      } @else {
-        @include _elder-panel-color($primary);
-      }
-    }
-
-    &.mat-accent {
-      @include _elder-panel-color($accent);
-    }
-
-    &.mat-warn {
-      @include _elder-panel-color($warn);
-    }
-
-    @include _elder-panel-form-field-overrides;
-  }
-}
-
-@mixin elder-panel-typography($config) {
-  .mat-panel,
-  .mat-panel h1,
-  .mat-panel h2,
-  .mat-panel h3,
-  .mat-panel h4,
-  .mat-panel h5,
-  .mat-panel h6 {
-    @include mat.m2-typography-level($config, title);
-    margin: 0;
-  }
-}

package/src/lib/components/time/_elder-time-input.theme.scss

@@ -1,35 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../../theming/elder-typography-utils' as elder-typography;
-
-@mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: mat.m2-get-typography-config($config-or-theme);
-
-  @include _interval-form-field-sizing();
-  @include _interval-form-field-color();
-}
-
-@mixin _interval-form-field-sizing() {
-  .mat-mdc-form-field-type-day-time-range .mat-mdc-form-field-infix {
-    width: 224px;
-  }
-
-  .mat-mdc-form-field-type-date-time-range .mat-mdc-form-field-infix {
-    width: 320px;
-  }
-
-  .mat-mdc-form-field-type-single-day .mat-mdc-form-field-infix {
-    width: 180px;
-  }
-
-  .mat-mdc-form-field-type-date-range .mat-mdc-form-field-infix {
-    width: 224px;
-  }
-}
-
-@mixin _interval-form-field-color() {
-  .mdc-text-field__input .mat-date-range-input-separator {
-    color: inherit;
-  }
-}