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

package/theming/_elder-common.scss

@@ -1,573 +0,0 @@
-@use 'mat-icon-button-size' as icon-button-size;
-@use '@angular/material' as mat;
-@use 'mixins' as mixins;
-@mixin elder-common-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);
-
-  /***************************************************************************
-   *                                                                         *
-   * 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);
-
-  /***************************************************************************
-   *                                                                         *
-   * Angular Material Extensions (Optional)                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  /**
-   * The mat-button-fill class will lead a mat button
-   * to take up all the space, which gives you more freedom where
-   * to place items inside.
-   */
-  .mat-button-fill .mdc-button__label {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    flex-direction: row;
-    justify-content: stretch;
-    align-items: stretch;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Material Card Styling                                                   *
-   *                                                                         *
-   **************************************************************************/
-
-  .mat-mdc-card.embedded {
-    border-radius: 0;
-    box-shadow: none;
-    border: none;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Material Table Styling                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  th.mat-mdc-header-cell {
-    &.elder-number-cell {
-      text-align: right;
-      justify-content: flex-end;
-    }
-    &.elder-center-cell {
-      text-align: center;
-      justify-content: center;
-    }
-  }
-
-  td.mat-mdc-cell {
-    &.elder-number-cell {
-      text-align: right;
-      justify-content: flex-end;
-    }
-    &.elder-center-cell {
-      text-align: center;
-      justify-content: center;
-    }
-  }
-
-  td.mat-mdc-footer-cell {
-    &.elder-number-cell {
-      text-align: right;
-      justify-content: flex-end;
-    }
-    &.elder-center-cell {
-      text-align: center;
-      justify-content: center;
-    }
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * elder-form-field-label styling                                          *
-   *                                                                         *
-   **************************************************************************/
-
-  // 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;
-    }
-  }
-
-  /***************************************************************************
-  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-icon-button {
-    //  // @include icon-button-size.matIconButtonSize(40,24);
-    //  width: 40px !important;
-    //  height: 40px !important;
-    //
-    //  padding: 0px !important;
-    //  display: inline-flex !important;
-    //  align-items: center;
-    //  justify-content: center;
-    //
-    //
-    //  .mat-mdc-button-touch-target {
-    //    width: 40px !important;
-    //    height: 40px !important;
-    //  }
-    //}
-  }
-
-  .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;
-    }
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Style for hiding spinner on inputs                                      *
-   *                                                                         *
-   **************************************************************************/
-
-  input.elder-input-no-spinner::-webkit-outer-spin-button,
-  input.elder-input-no-spinner::-webkit-inner-spin-button {
-    display: none;
-  }
-
-  input[type='number'].elder-input-no-spinner {
-    -moz-appearance: textfield;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Material Dialog                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  .custom-dialog-container .mat-mdc-dialog-container {
-    overflow-y: hidden;
-    padding: 0;
-    margin: 0;
-  }
-
-  .no-padding-dialog .mat-mdc-dialog-container {
-    padding: 0;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Padding                                                                 *
-   *                                                                         *
-   **************************************************************************/
-
-  .elder-default-content:not(:only-child) {
-    display: none;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * 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%;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * MDC Icon Button Sizing                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  .elder-icon-button-lg {
-    @include icon-button-size.matIconButtonSize(40px, 24px);
-  }
-  .elder-icon-button-md {
-    @include icon-button-size.matIconButtonSize(32px, 19px);
-  }
-  .elder-icon-button-sm {
-    @include icon-button-size.matIconButtonSize(26px, 16px);
-  }
-  .elder-icon-button-xs {
-    @include icon-button-size.matIconButtonSize(20px, 12px);
-  }
-
-  .mat-mdc-chip {
-    .mat-mdc-chip-avatar {
-      /**
-       * Maximizes the avatar icon / image size in a chip.
-       */
-      &.chip-avatar-xl {
-        width: 28px;
-        height: 28px;
-        margin-left: -4px;
-        margin-right: -4px;
-
-        img {
-          width: 28px;
-          height: 28px;
-          overflow: hidden;
-          border-radius: 14px;
-        }
-
-        .mat-icon {
-          width: 28px !important;
-          height: 28px !important;
-          line-height: 28px !important;
-          font-size: 28px !important;
-        }
-      }
-    }
-  }
-}