@elderbyte/ngx-starter 18.13.0-beta.1 → 18.13.0

package/theming/_elder-form.scss

@@ -1,308 +0,0 @@
-@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

@@ -1,242 +0,0 @@
-@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%;
-  }
-}