@ngx-stoui/core 15.0.0 → 16.0.0

package/style/grid.scss

@@ -1,20 +1,20 @@
-@mixin grid($col-count: 12, $child-selector: 'grid-column', $margin: 0 24px 40px) {
-  display: grid;
-  grid-column-gap: 16px;
-  grid-row-gap: 16px;
-  margin: $margin;
-  grid-template-columns: repeat($col-count, 1fr);
-  .#{$child-selector} {
-    display: block;
-    grid-column: span 1;
-  }
-  @for $i from 1 through 12 {
-    .#{$child-selector}-#{$i} {
-      @if $i > $col-count {
-        grid-column: span $col-count;
-      } @else {
-        grid-column: span $i;
-      }
-    }
-  }
-}
+@mixin grid($col-count: 12, $child-selector: 'grid-column', $margin: 0 24px 40px) {
+  display: grid;
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+  margin: $margin;
+  grid-template-columns: repeat($col-count, 1fr);
+  .#{$child-selector} {
+    display: block;
+    grid-column: span 1;
+  }
+  @for $i from 1 through 12 {
+    .#{$child-selector}-#{$i} {
+      @if $i > $col-count {
+        grid-column: span $col-count;
+      } @else {
+        grid-column: span $i;
+      }
+    }
+  }
+}

package/style/sto-dialog.scss

@@ -1,73 +1,73 @@
-@use '@angular/material' as mat;
-@import "./theme/typography";
-
-@mixin sto-dialog-typography($config) {
-  .sto-dialog {
-    .mat-dialog-title {
-      line-height: mat.line-height($config, body-1);
-    }
-  }
-}
-
-.mat-typography {
-  @include sto-dialog-typography($sto-typography);
-}
-
-.mat-typography.sto-sm-typography {
-  @include sto-dialog-typography($sto-sm-typography);
-}
-
-.mat-typography.sto-l-typography {
-  @include sto-dialog-typography($sto-l-typography);
-}
-
-
-.sto-dialog {
-
-}
-
-.sto-dialog .mat-dialog-container {
-  padding: 0;
-
-  .mat-dialog-content {
-    margin: 0;
-    padding: 12px 24px 16px;
-
-    .sto-selection-list {
-      .sto-selection-list__item {
-        .mat-list-item-content.mat-list-item-content-reverse {
-          padding: 0 24px;
-        }
-      }
-
-      margin: -24px;
-    }
-
-    p {
-      white-space: pre-line;
-    }
-
-  }
-
-  .mat-dialog-title {
-    padding: 24px 24px 20px;
-    margin-bottom: -4px;
-  }
-
-  .mat-dialog-actions {
-    padding: 8px;
-    display: flex;
-    justify-content: flex-end;
-    margin: 0;
-  }
-
-  .mat-dialog-actions:last-child {
-    margin-bottom: 0;
-  }
-}
-
-sto-confirm {
-  .mat-dialog-content {
-    padding: 24px;
-  }
-}
+@use '@angular/material' as mat;
+@import "./theme/typography";
+
+@mixin sto-dialog-typography($config) {
+  .sto-dialog {
+    .mat-dialog-title {
+      line-height: mat.line-height($config, body-1);
+    }
+  }
+}
+
+.mat-typography {
+  @include sto-dialog-typography($sto-typography);
+}
+
+.mat-typography.sto-sm-typography {
+  @include sto-dialog-typography($sto-sm-typography);
+}
+
+.mat-typography.sto-l-typography {
+  @include sto-dialog-typography($sto-l-typography);
+}
+
+
+.sto-dialog {
+
+}
+
+.sto-dialog .mat-dialog-container {
+  padding: 0;
+
+  .mat-dialog-content {
+    margin: 0;
+    padding: 12px 24px 16px;
+
+    .sto-selection-list {
+      .sto-selection-list__item {
+        .mat-list-item-content.mat-list-item-content-reverse {
+          padding: 0 24px;
+        }
+      }
+
+      margin: -24px;
+    }
+
+    p {
+      white-space: pre-line;
+    }
+
+  }
+
+  .mat-dialog-title {
+    padding: 24px 24px 20px;
+    margin-bottom: -4px;
+  }
+
+  .mat-dialog-actions {
+    padding: 8px;
+    display: flex;
+    justify-content: flex-end;
+    margin: 0;
+  }
+
+  .mat-dialog-actions:last-child {
+    margin-bottom: 0;
+  }
+}
+
+sto-confirm {
+  .mat-dialog-content {
+    padding: 24px;
+  }
+}

package/style/sto-grid.scss

@@ -1,67 +1,67 @@
-/**
-Flexible, dynamic grid
-automatically resizes between 1 and 4 columns, depending on available space
-Use with StoGridDirective
- */
-.sto-f-grid {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -8px;
-  margin-left: -8px;
-
-  &__col {
-    min-height: 24px;
-    margin-left: 8px;
-    margin-right: 8px;
-    overflow: hidden;
-
-    &--spacer {
-      visibility: hidden;
-    }
-  }
-
-  &--1 {
-    .sto-f-grid__col--spacer {
-      display: none;
-    }
-
-    .sto-f-grid__col, .sto-f-grid__col--2 {
-      flex: 1 1 calc(100% - 16px);
-    }
-  }
-
-  &--2 {
-    .sto-f-grid__col {
-      flex: 1 1 calc(50% - 16px);
-    }
-
-    .sto-f-grid__col--2 {
-      flex: 1 1 100%;
-
-      &.sto-f-grid__col--spacer {
-        display: none;
-
-      }
-    }
-  }
-
-  &--4 {
-    .sto-f-grid__col {
-      flex: 1 1 calc(25% - 16px);
-    }
-
-    .sto-f-grid__col--2 {
-      flex: 1 1 calc(50% - 16px);
-    }
-  }
-
-  &--6 {
-    .sto-f-grid__col {
-      flex: 1 1 calc(16.667% - 16px);
-    }
-
-    .sto-f-grid__col--2 {
-      flex: 1 1 calc(16.667% - 16px);
-    }
-  }
-}
+/**
+Flexible, dynamic grid
+automatically resizes between 1 and 4 columns, depending on available space
+Use with StoGridDirective
+ */
+.sto-f-grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -8px;
+  margin-left: -8px;
+
+  &__col {
+    min-height: 24px;
+    margin-left: 8px;
+    margin-right: 8px;
+    overflow: hidden;
+
+    &--spacer {
+      visibility: hidden;
+    }
+  }
+
+  &--1 {
+    .sto-f-grid__col--spacer {
+      display: none;
+    }
+
+    .sto-f-grid__col, .sto-f-grid__col--2 {
+      flex: 1 1 calc(100% - 16px);
+    }
+  }
+
+  &--2 {
+    .sto-f-grid__col {
+      flex: 1 1 calc(50% - 16px);
+    }
+
+    .sto-f-grid__col--2 {
+      flex: 1 1 100%;
+
+      &.sto-f-grid__col--spacer {
+        display: none;
+
+      }
+    }
+  }
+
+  &--4 {
+    .sto-f-grid__col {
+      flex: 1 1 calc(25% - 16px);
+    }
+
+    .sto-f-grid__col--2 {
+      flex: 1 1 calc(50% - 16px);
+    }
+  }
+
+  &--6 {
+    .sto-f-grid__col {
+      flex: 1 1 calc(16.667% - 16px);
+    }
+
+    .sto-f-grid__col--2 {
+      flex: 1 1 calc(16.667% - 16px);
+    }
+  }
+}

package/style/theme/_action-footer.scss

@@ -1,20 +1,20 @@
-@import "theme";
-@import "typography";
-
-@mixin sto-action-footer-theme($theme, $variables) {
-  $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, background);
-
-  .sto-action-footer {
-    background-color: $background-color;
-    border-top: 1px solid $border-color;
-  }
-
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-action-footer-theme($sto-theme, $variables);
-}
-
-
+@import "theme";
+@import "typography";
+
+@mixin sto-action-footer-theme($theme, $variables) {
+  $border-color: map_get($variables, border-color);
+  $background-color: map_get($variables, background);
+
+  .sto-action-footer {
+    background-color: $background-color;
+    border-top: 1px solid $border-color;
+  }
+
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-action-footer-theme($sto-theme, $variables);
+}
+
+

package/style/theme/_appheader.scss

@@ -1,122 +1,121 @@
-@use '@angular/material' as mat;
-@import "theme";
-@import "typography";
-
-@mixin sto-appheader-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $accent: mat.get-color-from-palette(map_get($theme, accent), resting);
-  $hover-accent: mat.get-color-from-palette(map_get($theme, accent), hover);
-  $color: map_get($variables, color);
-  $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, card-bg);
-  $hover-bg-color: map_get($variables, hover-bg);
-  $selected-color: map_get($variables, selected-bg);
-  $indicators: map-get($theme, indicators);
-  $warning-palette: map_get($indicators, warning);
-  $warning-color: mat.get-color-from-palette($warning-palette, resting);
-  $icon-color: map_get($variables, icon);
-  $hover-color: map_get($variables, hover-color);
-
-  .sto-header {
-    background-color: $background-color !important;
-    //color: $color !important;
-    border-bottom-color: $border-color;
-
-    &--test-environment {
-      border: 4px solid $warning-color;
-    }
-
-    &__environment--label {
-      background: $warning-color;
-    }
-
-    button {
-      color: $primary;
-
-      &:focus {
-        background-color: $selected-color;
-      }
-
-      &:hover {
-        background-color: $hover-bg-color;
-      }
-    }
-
-    &__actions--small {
-      background: $background-color;
-    }
-  }
-
-  .sto-breadcrumb {
-    &__home {
-      color: $primary;
-
-      &:hover {
-        color: $primary;
-      }
-    }
-
-    &__list__item {
-      color: $primary;
-
-      &:hover {
-        color: $primary;
-      }
-    }
-
-    .separator {
-      color: $primary;
-    }
-  }
-
-}
-
-body {
-  @include sto-appheader-theme($sto-theme, $variables);
-}
-
-@mixin app-header-typography($config, $height) {
-  .app-wrapper {
-    margin: $height auto 0;
-  }
-  .sto-header {
-    height: $height;
-    font-size: mat.font-size($config, subheading-1);
-    line-height: mat.line-height($config, subheading-1);
-
-    .mat-icon {
-      font-size: mat.font-size($config, title);
-      line-height: mat.font-size($config, title);
-      width: mat.font-size($config, title);
-      height: mat.font-size($config, title);
-    }
-
-    &__environment {
-      height: $height;
-      top: -4px;
-    }
-  }
-  .sto-breadcrumb {
-    font-size: mat.font-size($config, subheading-1);
-    line-height: mat.line-height($config, subheading-1);
-
-    .mat-icon {
-      font-size: mat.font-size($config, title);
-      line-height: mat.font-size($config, title);
-      width: mat.font-size($config, title);
-      height: mat.font-size($config, title);
-    }
-  }
-}
-
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
-  @include app-header-typography($sto-typography, 64px);
-}
-
-.mat-typography.sto-sm-typography {
-  @include app-header-typography($sto-sm-typography, 48px);
-}
-
-.mat-typography.sto-l-typography {
-  @include app-header-typography($sto-l-typography, 64px);
-}
+@use '@angular/material' as mat;
+@import 'theme';
+@import 'typography';
+
+@mixin sto-appheader-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $accent: mat.get-color-from-palette(map_get($theme, accent), resting);
+  $hover-accent: mat.get-color-from-palette(map_get($theme, accent), hover);
+  $color: map_get($variables, color);
+  $border-color: map_get($variables, border-color);
+  $background-color: map_get($variables, card-bg);
+  $hover-bg-color: map_get($variables, hover-bg);
+  $selected-color: map_get($variables, selected-bg);
+  $indicators: map-get($theme, indicators);
+  $warning-palette: map_get($indicators, warning);
+  $warning-color: mat.get-color-from-palette($warning-palette, resting);
+  $icon-color: map_get($variables, icon);
+  $hover-color: map_get($variables, hover-color);
+
+  .sto-header {
+    background-color: $background-color !important;
+    //color: $color !important;
+    border-bottom-color: $border-color;
+
+    &--test-environment {
+      border: 4px solid $warning-color;
+    }
+
+    &__environment--label {
+      background: $warning-color;
+    }
+
+    button {
+      color: $primary;
+
+      &:focus {
+        background-color: $selected-color;
+      }
+
+      &:hover {
+        background-color: $hover-bg-color;
+      }
+    }
+
+    &__actions--small {
+      background: $background-color;
+    }
+  }
+
+  .sto-breadcrumb {
+    &__home {
+      color: $primary;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+
+    &__list__item {
+      color: $primary;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+
+    .separator {
+      color: $primary;
+    }
+  }
+}
+
+body {
+  @include sto-appheader-theme($sto-theme, $variables);
+}
+
+@mixin app-header-typography($config, $height) {
+  .app-wrapper {
+    margin: $height auto 0;
+  }
+  .sto-header {
+    height: $height;
+    font-size: mat.font-size($config, subtitle-1);
+    line-height: mat.line-height($config, subtitle-1);
+
+    .mat-icon {
+      font-size: mat.font-size($config, headline-2);
+      line-height: mat.font-size($config, headline-2);
+      width: mat.font-size($config, headline-2);
+      height: mat.font-size($config, headline-2);
+    }
+
+    &__environment {
+      height: $height;
+      top: -4px;
+    }
+  }
+  .sto-breadcrumb {
+    font-size: mat.font-size($config, subtitle-1);
+    line-height: mat.line-height($config, subtitle-1);
+
+    .mat-icon {
+      font-size: mat.font-size($config, headline-2);
+      line-height: mat.font-size($config, headline-2);
+      width: mat.font-size($config, headline-2);
+      height: mat.font-size($config, headline-2);
+    }
+  }
+}
+
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
+  @include app-header-typography($sto-typography, 64px);
+}
+
+.mat-typography.sto-sm-typography {
+  @include app-header-typography($sto-sm-typography, 48px);
+}
+
+.mat-typography.sto-l-typography {
+  @include app-header-typography($sto-l-typography, 64px);
+}

package/style/theme/_card.scss

@@ -1,26 +1,28 @@
-@use '@angular/material' as mat;
-@import "typography";
-
-@mixin sto-card-typography($config) {
-  .mat-card.sto-card {
-    .mat-card-title, .mat-card-title.sto-card__title {
-      line-height: mat.line-height($config, headline);
-    }
-
-    .mat-card-subtitle, .mat-card-subtitle.sto-card__subtitle {
-      margin-bottom: 4px;
-    }
-  }
-}
-
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
-  @include sto-card-typography($sto-typography);
-}
-
-.mat-typography.sto-sm-typography {
-  @include sto-card-typography($sto-sm-typography);
-}
-
-.mat-typography.sto-l-typography {
-  @include sto-card-typography($sto-l-typography);
-}
+@use '@angular/material' as mat;
+@import 'typography';
+
+@mixin sto-card-typography($config) {
+  .mat-card.sto-card {
+    .mat-card-title,
+    .mat-card-title.sto-card__title {
+      line-height: mat.line-height($config, headline-1);
+    }
+
+    .mat-card-subtitle,
+    .mat-card-subtitle.sto-card__subtitle {
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
+  @include sto-card-typography($sto-typography);
+}
+
+.mat-typography.sto-sm-typography {
+  @include sto-card-typography($sto-sm-typography);
+}
+
+.mat-typography.sto-l-typography {
+  @include sto-card-typography($sto-l-typography);
+}