@elderbyte/ngx-starter 14.11.0 → 14.12.0-beta2

package/theming/_elder-flex-layout.scss

@@ -0,0 +1,562 @@
+/***************************************************************************
+ *                                                                         *
+ * Breakpoint Definitions                                                  *
+ *                                                                         *
+ **************************************************************************/
+
+$media: (
+  xs: 0px,
+  sm: 600px,
+  md: 960px,
+  lg: 1024px,
+  xl: 1280px,
+  2 xl: 1536px,
+  3 xl: 1920px,
+);
+
+@mixin breakpoint($breakpoint) {
+  @each $breakpoints, $size in $media {
+    @if $breakpoint==$breakpoints {
+      @media screen and (min-width: $size) {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin flex-layout {
+  box-sizing: border-box;
+  display: flex !important;
+}
+
+@mixin flex-initial-100 {
+  flex: 1 1 100%;
+  box-sizing: border-box;
+}
+
+@mixin elder-flex-layout {
+
+  /***************************************************************************
+   *                                                                         *
+   * Common Layout                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  .full {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Flex Layout Row                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  .layout-row {
+    @include flex-layout;
+    flex-direction: row;
+  }
+
+  .layout-row-xs {
+    @include breakpoint('xs') {
+      @include flex-layout;
+      flex-direction: row !important;
+    }
+  }
+
+  .sm\:layout-row {
+    @include breakpoint('sm') {
+      @include flex-layout;
+      flex-direction: row !important;
+    }
+  }
+
+  .md\:layout-row {
+    @include breakpoint('md') {
+      @include flex-layout;
+      flex-direction: row !important;
+    }
+  }
+
+  .lg\:layout-row {
+    @include breakpoint('lg') {
+      @include flex-layout;
+      flex-direction: row !important;
+    }
+  }
+
+  .xl\:layout-row {
+    @include breakpoint('xl') {
+      @include flex-layout;
+      flex-direction: row !important;
+    }
+  }
+
+  .layout-row-reverse {
+    @include flex-layout;
+    flex-direction: row-reverse;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Flex Layout Column                                                      *
+   *                                                                         *
+   **************************************************************************/
+
+  .layout-col {
+    @include flex-layout;
+    flex-direction: column;
+  }
+
+  .xs\:layout-col {
+    @include breakpoint('xs') {
+      @include flex-layout;
+      flex-direction: column !important;
+    }
+  }
+
+  .sm\:layout-col {
+    @include breakpoint('sm') {
+      @include flex-layout;
+      flex-direction: column !important;
+    }
+  }
+
+  .md\:layout-col {
+    @include breakpoint('md') {
+      @include flex-layout;
+      flex-direction: column !important;
+    }
+  }
+
+  .lg\:layout-col {
+    @include breakpoint('lg') {
+      @include flex-layout;
+      flex-direction: column !important;
+    }
+  }
+
+  .xl\:layout-col {
+    @include breakpoint('xl') {
+      @include flex-layout;
+      flex-direction: column !important;
+    }
+  }
+
+  .layout-col-reverse {
+    @include flex-layout;
+    flex-direction: column-reverse !important;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Flex Layout Wrap                                                        *
+   *                                                                         *
+   **************************************************************************/
+
+  .layout-col, .layout-row {
+    .wrap {
+      flex-wrap: wrap;
+    }
+
+    .wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .nowrap {
+      flex-wrap: nowrap;
+    }
+  }
+
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Flex Item                                                               *
+   * flex: <flex-grow> <flex-shrink> <flex-basis>                            *
+   **************************************************************************/
+
+  .flex {
+    flex: 1 1 0%; // grow, shrink, no initial size
+    box-sizing: border-box;
+    min-width:0;
+    min-height:0;
+  }
+
+  .flex-auto {
+    flex: 1 1 auto; // grow, shrink
+    box-sizing: border-box;
+  }
+
+  .flex-initial {
+    flex: 0 1 auto; // No grow, shrink
+    box-sizing: border-box;
+  }
+
+  .flex-none {
+    flex: none;
+    box-sizing: border-box;
+  }
+
+  .layout-row {
+    & > .flex-100 {
+      @include flex-initial-100;
+      max-width: 100%;
+    }
+    & > .flex-90 {
+      @include flex-initial-100;
+      max-width: 90%;
+    }
+    & > .flex-80 {
+      @include flex-initial-100;
+      max-width: 80%;
+    }
+    & > .flex-70 {
+      @include flex-initial-100;
+      max-width: 70%;
+    }
+    & > .flex-60 {
+      @include flex-initial-100;
+      max-width: 60%;
+    }
+    & > .flex-50 {
+      @include flex-initial-100;
+      max-width: 50%;
+    }
+    & > .flex-40 {
+      @include flex-initial-100;
+      max-width: 40%;
+    }
+    & > .flex-30 {
+      @include flex-initial-100;
+      max-width: 30%;
+    }
+    & > .flex-25 {
+      @include flex-initial-100;
+      max-width: 25%;
+    }
+    & > .flex-20 {
+      @include flex-initial-100;
+      max-width: 20%;
+    }
+    & > .flex-15 {
+      @include flex-initial-100;
+      max-width: 15%;
+    }
+    & > .flex-10 {
+      @include flex-initial-100;
+      max-width: 10%;
+    }
+  }
+
+  .layout-col {
+    & > .flex-100 {
+      @include flex-initial-100;
+      max-height: 100%;
+    }
+    & > .flex-90 {
+      @include flex-initial-100;
+      max-height: 90%;
+    }
+    & > .flex-80 {
+      @include flex-initial-100;
+      max-height: 80%;
+    }
+    & > .flex-70 {
+      @include flex-initial-100;
+      max-height: 70%;
+    }
+    & > .flex-60 {
+      @include flex-initial-100;
+      max-height: 60%;
+    }
+    & > .flex-50 {
+      @include flex-initial-100;
+      max-height: 50%;
+    }
+    & > .flex-40 {
+      @include flex-initial-100;
+      max-height: 40%;
+    }
+    & > .flex-30 {
+      @include flex-initial-100;
+      max-height: 30%;
+    }
+    & > .flex-25 {
+      @include flex-initial-100;
+      max-height: 25%;
+    }
+    & > .flex-20 {
+      @include flex-initial-100;
+      max-height: 20%;
+    }
+    & > .flex-15 {
+      @include flex-initial-100;
+      max-height: 15%;
+    }
+    & > .flex-10 {
+      @include flex-initial-100;
+      max-height: 10%;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Flex Item Grow/Shrink                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+  .flex-grow {
+    flex-grow: 1;
+    box-sizing: border-box;
+  }
+
+  .flex-nogrow {
+    flex-grow: 0;
+    box-sizing: border-box;
+  }
+
+  .flex-shrink {
+    flex-shrink: 1;
+    box-sizing: border-box;
+  }
+
+  .flex-noshrink {
+    flex: 1 0 0%; // grow, shrink, no initial size
+    box-sizing: border-box;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Gaps                                                                    *
+   *                                                                         *
+   **************************************************************************/
+
+  .gap-xs {
+    gap: 4px;
+  }
+
+  .gap-sm {
+    gap: 8px;
+  }
+
+  .gap-md {
+    gap: 12px;
+  }
+
+  .gap-lg {
+    gap: 16px;
+  }
+
+  .gap-xl {
+    gap: 24px;
+  }
+
+  .gap-xxl {
+    gap: 32px;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Justify Content (Main Axis alignment)                                   *
+   *                                                                         *
+   **************************************************************************/
+
+  .layout-col, .layout-row {
+
+    // justify-start
+    &.place-start-start {
+      justify-content: start;
+      align-items: start;
+    }
+    &.place-start-end {
+      justify-content: start;
+      align-items: end;
+    }
+    &.place-start-center {
+      justify-content: start;
+      align-items: center;
+    }
+    &.place-start-stretch {
+      justify-content: start;
+      align-items: stretch;
+    }
+    &.place-start-baseline {
+      justify-content: start;
+      align-items: baseline;
+    }
+
+    // justify-end
+    &.place-end-start {
+      justify-content: end;
+      align-items: start;
+    }
+    &.place-end-end {
+      justify-content: end;
+      align-items: end;
+    }
+    &.place-end-center {
+      justify-content: end;
+      align-items: center;
+    }
+    &.place-end-stretch {
+      justify-content: end;
+      align-items: stretch;
+    }
+    &.place-end-baseline {
+      justify-content: end;
+      align-items: baseline;
+    }
+
+    // justify-stretch
+    &.place-stretch-start {
+      justify-content: stretch;
+      align-items: start;
+    }
+    &.place-stretch-end {
+      justify-content: stretch;
+      align-items: end;
+    }
+    &.place-stretch-center {
+      justify-content: stretch;
+      align-items: center;
+    }
+    &.place-stretch-stretch {
+      justify-content: stretch;
+      align-items: stretch;
+    }
+    &.place-stretch-baseline {
+      justify-content: stretch;
+      align-items: baseline;
+    }
+
+    // justify-center
+    &.place-center-start {
+      justify-content: center;
+      align-items: start;
+    }
+    &.place-center-end {
+      justify-content: center;
+      align-items: end;
+    }
+    &.place-center-center {
+      justify-content: center;
+      align-items: center;
+    }
+    &.place-center-stretch {
+      justify-content: center;
+      align-items: stretch;
+    }
+    &.place-center-baseline {
+      justify-content: center;
+      align-items: baseline;
+    }
+
+    // justify-evenly
+    &.place-evenly-start {
+      justify-content: space-evenly;
+      align-items: start;
+    }
+    &.place-evenly-end {
+      justify-content: space-evenly;
+      align-items: end;
+    }
+    &.place-evenly-center {
+      justify-content: space-evenly;
+      align-items: center;
+    }
+    &.place-evenly-stretch {
+      justify-content: space-evenly;
+      align-items: stretch;
+    }
+    &.place-evenly-baseline {
+      justify-content: space-evenly;
+      align-items: baseline;
+    }
+
+    // justify-around
+    &.place-around-start {
+      justify-content: space-around;
+      align-items: start;
+    }
+    &.place-around-end {
+      justify-content: space-around;
+      align-items: end;
+    }
+    &.place-around-center {
+      justify-content: space-around;
+      align-items: center;
+    }
+    &.place-around-stretch {
+      justify-content: space-around;
+      align-items: stretch;
+    }
+    &.place-around-baseline {
+      justify-content: space-around;
+      align-items: baseline;
+    }
+
+    // justify-between
+    &.place-between-start {
+      justify-content: space-between;
+      align-items: start;
+    }
+    &.place-between-end {
+      justify-content: space-between;
+      align-items: end;
+    }
+    &.place-between-center {
+      justify-content: space-between;
+      align-items: center;
+    }
+    &.place-between-stretch {
+      justify-content: space-between;
+      align-items: stretch;
+    }
+    &.place-between-baseline {
+      justify-content: space-between;
+      align-items: baseline;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Align Content (Row Alignment)                                           *
+   * Affects Multi-Row-Flex and Grid Layout                                  *
+   **************************************************************************/
+
+  .content-stretch {
+    align-content: stretch;
+  }
+
+  .content-center {
+    align-content: center;
+  }
+
+  .content-start {
+    align-content: flex-start;
+  }
+
+  .content-end {
+    align-content: flex-end;
+  }
+
+  .content-between {
+    align-content: space-between;
+  }
+
+  .content-around {
+    align-content: space-around;
+  }
+
+  .content-evenly {
+    align-content: space-evenly;
+  }
+
+  .content-baseline {
+    align-content: baseline;
+  }
+}

package/theming/_elder-style-fixes.scss

@@ -12,6 +12,9 @@
     flex: 1 1 auto;
     flex-direction: column;
     height: 100%; // Required for Safari
+    width: 100%;
+    min-height: 0; // Fixes scrolling vert
+    min-width: 0; // Fixes scrolling horz
   }
 }