@ngx-stoui/core 15.0.0 → 16.0.0

package/style/theme/_datatable.scss

@@ -1,224 +1,231 @@
-@use '@angular/material' as mat;
-@import "theme";
-@import "typography";
-
-@mixin sto-datatable-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $accent: map_get($variables, accent);
-  $color: map_get($variables, color);
-  $border-color: map_get($variables, border-color);
-  $background-color: transparent;
-  $footer-bg: map_get($variables, background);
-  $header-background-color: map_get($variables, selected-bg);
-  $hover-color: map_get($variables, hover-bg);
-  $selected-color: map_get($variables, selected-bg);
-  $icon-color: map_get($variables, icon);
-  $icon-hover: map_get($variables, icon-hover);
-
-  .sto-mdl-table {
-    background-color: $background-color;
-    color: $color;
-
-    .mat-icon-button {
-      color: $icon-color;
-
-      &:hover {
-        color: $color;
-      }
-    }
-
-    &__actions {
-      border-bottom: 1px solid $border-color;
-    }
-
-    &__header__row {
-      border-bottom: 1px solid $border-color;
-      background-color: $header-background-color;
-
-      &__cell {
-        color: $color;
-
-        &__resize-handle {
-          span {
-            background: $border-color;
-          }
-        }
-
-        &--sortable:hover {
-          background-color: $hover-color;
-        }
-
-      }
-    }
-
-    &__body {
-      &__row {
-        border-bottom: 1px solid $border-color;
-
-        &--selected {
-          background-color: $selected-color;
-        }
-
-        &:not(.sto-mdl-table__body__row--selected) {
-          &:hover, &:focus {
-            background-color: $hover-color;
-          }
-        }
-      }
-    }
-
-    &__footer {
-      &__row {
-        border-bottom: 1px solid $border-color;
-        border-top: 1px solid $border-color;
-        background: $footer-bg;
-      }
-    }
-
-  }
-
-  .ngx-datatable.sto-datatable {
-    background-color: $background-color;
-    color: $color;
-
-    .datatable-body, .datatable-header {
-      mat-icon {
-        color: $icon-color;
-      }
-    }
-
-    .datatable-header {
-      border-bottom: 1px solid $border-color;
-    }
-
-    .datatable-header .datatable-header-cell {
-      color: $color;
-    }
-
-    .datatable-body .progress-linear {
-      .container {
-        background-color: $accent;
-
-        .bar {
-          background-color: $primary;
-        }
-      }
-    }
-
-    .datatable-body .datatable-body-row .datatable-body-cell {
-      color: $color;
-      border-bottom: 1px solid $border-color;
-    }
-
-    .datatable-body .datatable-body-row:not(.active):hover {
-      .datatable-row-left, .datatable-row-right, .datatable-row-center {
-        background-color: $hover-color;
-      }
-
-      background-color: $hover-color;
-    }
-
-    .datatable-header .datatable-header-column-group .datatable-header-cell {
-      border-left: 1px solid $border-color;
-    }
-
-    .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group {
-      &.datatable-row-left, &.datatable-row-right, &.datatable-row-center {
-        background-color: $selected-color !important;
-      }
-    }
-
-    .datatable-body .datatable-body-row.active {
-
-      background-color: $selected-color;
-    }
-
-    .datatable-body .datatable-body-row:not(.active):not(:hover) {
-      .datatable-row-left, .datatable-row-right, .datatable-row-center {
-        background-color: $background-color;
-      }
-    }
-
-    .datatable-footer {
-      overflow: hidden;
-
-      .datatable-pager {
-        a {
-          color: $primary;
-          padding: 0 2px;
-          text-decoration: none;
-
-          &:hover {
-            background: $hover-color;
-          }
-        }
-
-        .pager li.pages {
-          margin: 0 2px;
-
-          &.active {
-            background: $selected-color;
-          }
-
-          &.disabled {
-            a {
-              color: $border-color;
-            }
-          }
-        }
-      }
-    }
-  }
-
-}
-
-body {
-  @include sto-datatable-theme($sto-theme, $variables);
-}
-
-@mixin sto-datatable-typography($config) {
-  .sto-mdl-table {
-    font: {
-      family: mat.font-family($config, body-1);
-      size: mat.font-size($config, body-1);
-      weight: mat.font-weight($config, body-1);
-    }
-    font-feature-settings: 'tnum', 'lnum';
-  }
-
-  .ngx-datatable.sto-datatable {
-    .datatable-body, .datatable-header {
-      font: {
-        family: mat.font-family($config, body-1);
-        size: mat.font-size($config, body-1);
-        weight: mat.font-weight($config, body-1);
-      }
-    }
-
-    .datatable-footer {
-      font: {
-        family: mat.font-family($config, body-1);
-        size: mat.font-size($config, body-1);
-        weight: mat.font-weight($config, body-1);
-      }
-
-      .pager li a[role="button"] {
-        line-height: mat.font-size($config, body-1);
-      }
-    }
-
-    font-feature-settings: 'tnum', 'lnum';
-  }
-}
-
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
-  @include sto-datatable-typography($sto-typography);
-}
-
-.mat-typography.sto-sm-typography {
-  @include sto-datatable-typography($sto-sm-typography);
-}
-
-.mat-typography.sto-l-typography {
-  @include sto-datatable-typography($sto-l-typography);
-}
+@use '@angular/material' as mat;
+@import 'theme';
+@import 'typography';
+
+@mixin sto-datatable-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $accent: map_get($variables, accent);
+  $color: map_get($variables, color);
+  $border-color: map_get($variables, border-color);
+  $background-color: transparent;
+  $footer-bg: map_get($variables, background);
+  $header-background-color: map_get($variables, selected-bg);
+  $hover-color: map_get($variables, hover-bg);
+  $selected-color: map_get($variables, selected-bg);
+  $icon-color: map_get($variables, icon);
+  $icon-hover: map_get($variables, icon-hover);
+
+  .sto-mdl-table {
+    background-color: $background-color;
+    color: $color;
+
+    .mat-icon-button {
+      color: $icon-color;
+
+      &:hover {
+        color: $color;
+      }
+    }
+
+    &__actions {
+      border-bottom: 1px solid $border-color;
+    }
+
+    &__header__row {
+      border-bottom: 1px solid $border-color;
+      background-color: $header-background-color;
+
+      &__cell {
+        color: $color;
+
+        &__resize-handle {
+          span {
+            background: $border-color;
+          }
+        }
+
+        &--sortable:hover {
+          background-color: $hover-color;
+        }
+      }
+    }
+
+    &__body {
+      &__row {
+        border-bottom: 1px solid $border-color;
+
+        &--selected {
+          background-color: $selected-color;
+        }
+
+        &:not(.sto-mdl-table__body__row--selected) {
+          &:hover,
+          &:focus {
+            background-color: $hover-color;
+          }
+        }
+      }
+    }
+
+    &__footer {
+      &__row {
+        border-bottom: 1px solid $border-color;
+        border-top: 1px solid $border-color;
+        background: $footer-bg;
+      }
+    }
+  }
+
+  .ngx-datatable.sto-datatable {
+    background-color: $background-color;
+    color: $color;
+
+    .datatable-body,
+    .datatable-header {
+      mat-icon {
+        color: $icon-color;
+      }
+    }
+
+    .datatable-header {
+      border-bottom: 1px solid $border-color;
+    }
+
+    .datatable-header .datatable-header-cell {
+      color: $color;
+    }
+
+    .datatable-body .progress-linear {
+      .container {
+        background-color: $accent;
+
+        .bar {
+          background-color: $primary;
+        }
+      }
+    }
+
+    .datatable-body .datatable-body-row {
+      color: $color;
+      border-bottom: 1px solid $border-color;
+    }
+
+    .datatable-body .datatable-body-row:not(.active):hover {
+      .datatable-row-left,
+      .datatable-row-right,
+      .datatable-row-center {
+        background-color: $hover-color;
+      }
+
+      background-color: $hover-color;
+    }
+
+    .datatable-header .datatable-header-column-group .datatable-header-cell {
+      border-left: 1px solid $border-color;
+    }
+
+    .datatable-body
+      .datatable-body-row:focus:not(.active)
+      .datatable-row-group {
+      &.datatable-row-left,
+      &.datatable-row-right,
+      &.datatable-row-center {
+        background-color: $selected-color !important;
+      }
+    }
+
+    .datatable-body .datatable-body-row.active {
+      background-color: $selected-color;
+    }
+
+    .datatable-body .datatable-body-row:not(.active):not(:hover) {
+      .datatable-row-left,
+      .datatable-row-right,
+      .datatable-row-center {
+        background-color: $background-color;
+      }
+    }
+
+    .datatable-footer {
+      overflow: hidden;
+
+      .datatable-pager {
+        a {
+          color: $primary;
+          padding: 0 2px;
+          text-decoration: none;
+
+          &:hover {
+            background: $hover-color;
+          }
+        }
+
+        .pager li.pages {
+          margin: 0 2px;
+
+          &.active {
+            background: $selected-color;
+          }
+
+          &.disabled {
+            a {
+              color: $border-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+body {
+  @include sto-datatable-theme($sto-theme, $variables);
+}
+
+@mixin sto-datatable-typography($config) {
+  .sto-mdl-table {
+    font: {
+      family: mat.font-family($config, body-1);
+      size: mat.font-size($config, body-1);
+      weight: mat.font-weight($config, body-1);
+    }
+    font-feature-settings: 'tnum', 'lnum';
+  }
+
+  .ngx-datatable.sto-datatable {
+    .datatable-body,
+    .datatable-header {
+      font: {
+        family: mat.font-family($config, body-1);
+        size: mat.font-size($config, body-1);
+        weight: mat.font-weight($config, body-1);
+      }
+    }
+
+    .datatable-footer {
+      font: {
+        family: mat.font-family($config, body-1);
+        size: mat.font-size($config, body-1);
+        weight: mat.font-weight($config, body-1);
+      }
+
+      .pager li a[role='button'] {
+        line-height: mat.font-size($config, body-1);
+      }
+    }
+
+    font-feature-settings: 'tnum', 'lnum';
+  }
+}
+
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
+  @include sto-datatable-typography($sto-typography);
+}
+
+.mat-typography.sto-sm-typography {
+  @include sto-datatable-typography($sto-sm-typography);
+}
+
+.mat-typography.sto-l-typography {
+  @include sto-datatable-typography($sto-l-typography);
+}

package/style/theme/_daterange.scss

@@ -1,51 +1,47 @@
-@import "theme";
-@import "typography";
-
-@mixin sto-daterange-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $color: map_get($variables, color);
-  $warn: map_get($variables, warn);
-  $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, app-bar);
-  $hover-bg-color: map_get($variables, hover-bg);
-  $selected-color: map_get($variables, selected-bg);
-  $warning-color: map_get($variables, warning);
-  $icon-color: map_get($variables, icon);
-  $hover-color: map_get($variables, hover-color);
-  $warn-contrast: map_get($variables, warn-contrast);
-  $warn: map_get($variables, warn);
-
-  .sto-daterange {
-    background-color: $background-color;
-
-    .sto-daterange__error--container {
-      background-color: $warn;
-
-      .mat-icon {
-        color: $warn-contrast;
-      }
-    }
-
-
-  }
-  .sto-daterange-wrapper {
-    input.date-input-element {
-      color: $color;
-    }
-
-    .sto-form__field.mat-focused .mat-form-field-suffix .mat-icon {
-      color: $icon-color;
-    }
-  }
-
-  .sto-date.sto-date__popout {
-    background: $background-color;
-  }
-
-
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-daterange-theme($sto-theme, $variables);
-}
+@import 'theme';
+@import 'typography';
+
+@mixin sto-daterange-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $color: map_get($variables, color);
+  $warn: map_get($variables, warn);
+  $border-color: map_get($variables, border-color);
+  $background-color: map_get($variables, app-bar);
+  $hover-bg-color: map_get($variables, hover-bg);
+  $selected-color: map_get($variables, selected-bg);
+  $warning-color: map_get($variables, warning);
+  $icon-color: map_get($variables, icon);
+  $hover-color: map_get($variables, hover-color);
+  $warn-contrast: map_get($variables, warn-contrast);
+  $warn: map_get($variables, warn);
+
+  .sto-daterange {
+    background-color: $background-color;
+
+    .sto-daterange__error--container {
+      background-color: $warn;
+
+      .mat-icon {
+        color: $warn-contrast;
+      }
+    }
+  }
+  .sto-daterange-wrapper {
+    input.date-input-element {
+      color: $color;
+    }
+
+    .sto-form__field.mat-focused .mat-mdc-form-field-icon-suffix .mat-icon {
+      color: $icon-color;
+    }
+  }
+
+  .sto-date.sto-date__popout {
+    background: $background-color;
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-daterange-theme($sto-theme, $variables);
+}

package/style/theme/_dialog.scss

@@ -1,25 +1,25 @@
-@import "theme";
-@import "typography";
-
-@mixin dialog-theme($theme, $variables) {
-  $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, app-bar);
-  $divider: map-get($variables, border-color);
-
-  .sto-dialog .mat-dialog-container {
-
-    .mat-dialog-content {
-      border-top: solid 1px $divider;
-
-      &.scroll-lines {
-        border-bottom: solid 1px $divider;
-      }
-    }
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include dialog-theme($sto-theme, $variables);
-}
-
+@import "theme";
+@import "typography";
+
+@mixin dialog-theme($theme, $variables) {
+  $border-color: map_get($variables, border-color);
+  $background-color: map_get($variables, app-bar);
+  $divider: map-get($variables, border-color);
+
+  .sto-dialog .mat-dialog-container {
+
+    .mat-dialog-content {
+      border-top: solid 1px $divider;
+
+      &.scroll-lines {
+        border-bottom: solid 1px $divider;
+      }
+    }
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include dialog-theme($sto-theme, $variables);
+}
+