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

package/theming/_elder-form.scss

@@ -0,0 +1,308 @@
+@use './mixins' as mixins;
+@use '@angular/material' as mat;
+
+@mixin elder-form-styles($theme) {
+  $common-sizes: map-get($theme, elder, common-sizes);
+  $form-field-density: map-get($theme, elder, density, form-field);
+  @include mat.form-field-density($form-field-density);
+
+  $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);
+
+  /******************************
+  elder-form-field-host fix
+  *******************************/
+  .elder-form-field-host {
+    // This class should be applied to "controls" which themselves contain a mat-form-field.
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  /******************************
+  mdc form field fixes
+  *******************************/
+  .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
+    display: block !important;
+  }
+
+  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
+    padding-left: 0 !important;
+  }
+
+  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
+    padding-right: 0 !important;
+  }
+
+  .mat-mdc-form-field:not(.mat-mdc-form-field.elder-dense) {
+    $density: map-get($theme, elder, density, form-field);
+
+    /******************************
+    Fix big paddings for dense form fields
+    *******************************/
+
+    .mat-mdc-text-field-wrapper {
+      padding-left: calc-side-paddings($density);
+      padding-right: calc-side-paddings($density);
+    }
+
+    /******************************
+    Fix icon size and placement in mat label
+    *******************************/
+
+    @include mixins.form-field-icons($density);
+
+    /******************************
+    Fix text and hover placement of small filled form fields
+    *******************************/
+
+    $mat-mdc-form-field-label-transform: 0.75;
+    $mat-mdc-form-field-label-offset-x: -16px;
+    $form-field-density: map-get($theme, elder, density, form-field);
+
+    @if $form-field-density < -1 {
+      .mdc-text-field--filled {
+        .mdc-floating-label--float-above {
+          transform: var(
+            $mat-mdc-form-field-label-transform,
+            translateY(-50%)
+              translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))
+          ) !important;
+        }
+
+        .mat-mdc-form-field-infix {
+          padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
+          padding-bottom: 2px !important;
+          min-height: 40px; // (24 + 2*16) = 56px by default
+        }
+      }
+    }
+
+    /******************************
+    Material Form Field Label stealing clicks
+    *******************************/
+
+    .mat-mdc-floating-label.mdc-floating-label {
+      pointer-events: none !important;
+
+      mat-label {
+        pointer-events: none !important;
+      }
+    }
+
+    .mdc-notched-outline__notch {
+      pointer-events: none !important;
+
+      .mdc-floating-label {
+        pointer-events: none !important;
+
+        mat-label {
+          pointer-events: none !important;
+        }
+      }
+    }
+
+    .mat-mdc-form-field-error-wrapper {
+      display: flex;
+      padding-right: 0;
+    }
+  }
+
+  // A legacy styled form field with class 'elder-form-field-label' will get these styles
+  .mat-form-field-appearance-legacy.elder-form-field-label {
+    /*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 {
+      display: none;
+    }
+  }
+
+  /******************************************************************
+  Icon button size
+  ******************************************************************/
+
+  $control-button-size: var(--mdc-typography-body1-line-height, 24px);
+  $control-icon-size: 20px;
+  .elder-mdc-input-fix {
+    max-height: $control-button-size;
+  }
+  .mat-mdc-icon-button.elder-control-icon-button {
+    @include mixins.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
+  }
+  .mat-datepicker-toggle.elder-control-icon-button {
+    max-height: $control-button-size;
+    max-width: $control-button-size;
+    .mat-mdc-icon-button {
+      @include mixins.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
+    }
+  }
+
+  /***************************************************************************
+  Form field dense styling
+  **************************************************************************/
+
+  .mat-mdc-form-field.elder-dense {
+    .mat-mdc-text-field-wrapper {
+      // padding left / right 16 by default
+      padding-left: $sm !important;
+      padding-right: $sm !important;
+    }
+
+    .mat-mdc-form-field-flex {
+      padding: 0;
+    }
+
+    .mdc-text-field--outlined {
+      .mat-mdc-form-field-infix {
+        padding-top: $sm !important; // 16px by default
+        padding-bottom: $sm !important; // 16px by default
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
+    }
+
+    .mdc-text-field--filled {
+      .mdc-floating-label--float-above {
+        transform: translateY(-100%) scale(0.75);
+      }
+      .mat-mdc-form-field-infix {
+        padding-top: 14px !important; // 16px by default
+        padding-bottom: 2px;
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
+    }
+
+    @include mixins.form-field-icons(-4);
+  }
+
+  .mat-mdc-form-field.elder-no-hint {
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
+    }
+    /*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 {
+      bottom: 0;
+    }
+  }
+
+  /******************************
+  Material Form Controls
+  *******************************/
+
+  .elder-form-control {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+  .elder-flex-control {
+    flex: 1 1 180px;
+    overflow: hidden;
+  }
+
+  /******************************
+  Material Form Field
+  *******************************/
+
+  .elder-form-field-gap {
+    width: 12px;
+  }
+
+  // two fields plus 12px gap add up to elder-std-form-field width
+  .elder-form-field-small {
+    width: 84px;
+  }
+
+  // three fields plus 12px gap add up to elder-std-form-field width
+  .elder-form-field-tiny {
+    width: 52px;
+  }
+
+  .elder-std-form-field {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+  .elder-form-field-large {
+    width: 244px;
+    overflow: hidden;
+  }
+
+  .elder-form-field-xl {
+    width: 276px;
+    overflow: hidden;
+  }
+
+  .elder-form-field-xxl {
+    width: 372px;
+    overflow: hidden;
+  }
+
+  /**
+   * mat-form-field style shorthands
+   */
+  mat-form-field {
+    // three fields plus 12px gap add up to elder-std-form-field width
+    .tiny {
+      width: 52px; // (180-(2*12)) / 3
+    }
+
+    // two fields plus 12px gap add up to elder-std-form-field width
+    .small {
+      width: 84px; // (180-(1*12)) / 2
+    }
+
+    .standard {
+      width: 180px;
+      overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+    }
+
+    // one and a half plus 12px gap 180 + 52 + 12
+    .large {
+      width: 244px;
+      overflow: hidden;
+    }
+
+    // one and a half plus 12px gap 180 + 84 + 12
+    .xl {
+      width: 276px;
+      overflow: hidden;
+    }
+
+    // two standard fields plus 12px gap (180 + 180 + 12)
+    .xxl {
+      width: 372px;
+      overflow: hidden;
+    }
+  }
+}
+
+@function calc-side-paddings($density) {
+  $paddingDensityNeg4: 8px;
+  $paddingDensityNeg3: 10px;
+  $paddingDensityNeg2: 12px;
+  $paddingDensityNeg1: 14px;
+  $paddingDensity0: 16px;
+
+  @if $density == -4 {
+    @return $paddingDensityNeg4;
+  } @else if $density == -3 {
+    @return $paddingDensityNeg3;
+  } @else if $density == -2 {
+    @return $paddingDensityNeg2;
+  } @else if $density == -1 {
+    @return $paddingDensityNeg1;
+  } @else if $density == 0 {
+    @return $paddingDensity0;
+  }
+}
+
+@function calc-padding-top-form-field-inflix($density) {
+  @if $density > -3 {
+    @return 20px;
+  } @else {
+    @return 14px;
+  }
+}

package/theming/_elder-layout-system.scss

@@ -0,0 +1,242 @@
+@use '@angular/material' as mat;
+
+@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;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * 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%;
+  }
+}