@ngx-stoui/core 15.0.0 → 16.0.0

package/style/theme/_filterpanel.scss

@@ -1,88 +1,88 @@
-@use '@angular/material' as mat;
-@import "theme";
-@import "typography";
-
-@mixin sto-filterpanel-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $color: map_get($variables, color);
-  $secondary: map_get($variables, secondary);
-  $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, app-bar);
-  $icon-color: map_get($variables, icon);
-  $icon-hover: map-get($variables, icon-hover);
-  $hover-color: map_get($variables, hover-bg);
-  $selected-color: map_get($variables, selected-bg);
-
-  .sto-filter.mat-expansion-panel {
-    .mat-expansion-panel-header {
-      background-color: $background-color;
-
-      &[aria-disabled=true] {
-        color: $color;
-      }
-
-      .mat-icon-button, .mat-button {
-        color: $icon-color;
-
-        &:hover {
-          color: $icon-hover;
-        }
-      }
-
-      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
-        background-color: transparent;
-      }
-
-      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-        background-color: $selected-color;
-      }
-
-      &:not(.mat-expanded) {
-        border-bottom: solid 1px $border-color;
-      }
-
-      &.mat-expanded:hover {
-        // Y THO? Looks shit.
-        //background-color: $hover-color;
-        background-color: $background-color;
-      }
-
-      &.mat-expanded:focus {
-        // Y THO? Looks shit.
-        //background-color: $selected-color;
-        background-color: $background-color;
-      }
-    }
-
-    .separator {
-      background-color: $border-color;
-    }
-  }
-
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-filterpanel-theme($sto-theme, $variables);
-}
-
-@mixin sto-filter-panel-typography($config) {
-  .sto-filter {
-    .mat-expansion-panel-header {
-      font-size: mat.font-size($config, subheading-2);
-      line-height: mat.line-height($config, subheading-2);
-    }
-  }
-}
-
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
-  @include sto-filter-panel-typography($sto-typography);
-}
-
-.mat-typography.sto-sm-typography {
-  @include sto-filter-panel-typography($sto-sm-typography);
-}
-
-.mat-typography.sto-l-typography {
-  @include sto-filter-panel-typography($sto-l-typography);
-}
+@use '@angular/material' as mat;
+@import 'theme';
+@import 'typography';
+
+@mixin sto-filterpanel-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $color: map_get($variables, color);
+  $secondary: map_get($variables, secondary);
+  $border-color: map_get($variables, border-color);
+  $background-color: map_get($variables, app-bar);
+  $icon-color: map_get($variables, icon);
+  $icon-hover: map-get($variables, icon-hover);
+  $hover-color: map_get($variables, hover-bg);
+  $selected-color: map_get($variables, selected-bg);
+
+  .sto-filter.mat-expansion-panel {
+    .mat-expansion-panel-header {
+      background-color: $background-color;
+
+      &[aria-disabled='true'] {
+        color: $color;
+      }
+
+      .mat-icon-button,
+      .mat-button {
+        color: $icon-color;
+
+        &:hover {
+          color: $icon-hover;
+        }
+      }
+
+      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
+        background-color: transparent;
+      }
+
+      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+        background-color: $selected-color;
+      }
+
+      &:not(.mat-expanded) {
+        border-bottom: solid 1px $border-color;
+      }
+
+      &.mat-expanded:hover {
+        // Y THO? Looks shit.
+        //background-color: $hover-color;
+        background-color: $background-color;
+      }
+
+      &.mat-expanded:focus {
+        // Y THO? Looks shit.
+        //background-color: $selected-color;
+        background-color: $background-color;
+      }
+    }
+
+    .separator {
+      background-color: $border-color;
+    }
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-filterpanel-theme($sto-theme, $variables);
+}
+
+@mixin sto-filter-panel-typography($config) {
+  .sto-filter {
+    .mat-expansion-panel-header {
+      font-size: mat.font-size($config, subtitle-2);
+      line-height: mat.line-height($config, subtitle-2);
+    }
+  }
+}
+
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
+  @include sto-filter-panel-typography($sto-typography);
+}
+
+.mat-typography.sto-sm-typography {
+  @include sto-filter-panel-typography($sto-sm-typography);
+}
+
+.mat-typography.sto-l-typography {
+  @include sto-filter-panel-typography($sto-l-typography);
+}

package/style/theme/_input-overrides.scss

@@ -1,117 +1,119 @@
-@use '@angular/material' as mat;
-@import "theme";
-@import "typography";
-
-@mixin sto-input-override-theme($theme, $variables) {
-  $color: map_get($variables, color);
-  $form-field-bg: var(--bg-light);
-  $border-radius: 4px;
-  $icon-color: map_get($variables, icon);
-  $icon-hover: map_get($variables, icon-hover);
-
-  .sto-form__field, .sto-form__field.mat-form-field {
-    .mat-form-field-flex {
-      background-color: $form-field-bg;
-
-      .mat-form-field-infix {
-        //line-height: 14px; // TODO: Proper fix.
-      }
-      .mat-input {
-        color: $color;
-      }
-    }
-
-    &.sto-form__field--readonly, &.sto-form__field--disabled {
-      .mat-form-field-flex {
-        background-color: transparent;
-
-        .mat-form-field-infix {
-          //line-height: 14px; // TODO: Proper fix.
-        }
-
-        .mat-select-value {
-          color: $color;
-        }
-      }
-    }
-
-    &.sto-form__field--readonly .mat-form-field-flex {
-      background-color: transparent;
-    }
-
-    .mat-form-field-flex:hover ~ .mat-form-field-underline {
-    }
-
-    &.mat-focused .mat-form-field-infix .mat-form-field-label {
-      color: $color;
-    }
-
-    .mat-form-field-flex:hover {
-      .mat-form-field-suffix > .mat-icon {
-        color: $icon-hover;
-      }
-    }
-
-    .mat-form-field-suffix > .mat-icon {
-      color: $icon-color;
-    }
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-input-override-theme($sto-theme, $variables);
-}
-
-@import "typography";
-
-@mixin sto-input-typography($config) {
-  $base: mat.font-size($config, body-1);
-
-  .sto-form-field, .sto-form__field.mat-form-field {
-    line-height: $base;
-
-    .mat-select-trigger {
-      height: $base;
-    }
-  }
-
-
-  .sto-form__field.mat-form-field-can-float.mat-form-field-should-float {
-
-    .mat-form-field-label-wrapper {
-      top: -1.3em;
-    }
-
-    .mat-form-field-label {
-      transform: translateY(-1em) perspective(100px) translateZ(0.001px) !important;
-      @if $base == 16px {
-        font-size: $base - 3px;
-      } @else {
-        font-size: $base - 2px;
-      }
-    }
-
-    .cdk-overlay-container .mat-option {
-      font-size: mat.font-size($config, body-1);
-      line-height: mat.line-height($config, body-1);
-    }
-  }
-
-  .mat-option, .mat-option .mat-option-text {
-    font-size: $base;
-  }
-}
-
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
-  @include sto-input-typography($sto-typography);
-}
-
-
-.mat-typography.sto-sm-typography {
-  @include sto-input-typography($sto-sm-typography);
-}
-
-.mat-typography.sto-l-typography {
-  @include sto-input-typography($sto-l-typography);
-}
+@use '@angular/material' as mat;
+@import 'theme';
+@import 'typography';
+
+@mixin sto-input-override-theme($theme, $variables) {
+  $color: map_get($variables, color);
+  $form-field-bg: var(--bg-light);
+  $border-radius: 4px;
+  $icon-color: map_get($variables, icon);
+  $icon-hover: map_get($variables, icon-hover);
+
+  .sto-form__field,
+  .sto-form__field.mat-mdc-form-field {
+    --mdc-filled-text-field-container-color: #{$form-field-bg};
+    .mat-mdc-form-field-flex {
+      // background-color: $form-field-bg;
+
+      .mat-mdc-form-field-infix {
+        //line-height: 14px; // TODO: Proper fix.
+      }
+      .mat-input {
+        color: $color;
+      }
+    }
+
+    &.sto-form__field--readonly,
+    &.sto-form__field--disabled {
+      .mat-mdc-form-field-flex {
+        background-color: transparent;
+
+        .mat-mdc-form-field-infix {
+          //line-height: 14px; // TODO: Proper fix.
+        }
+
+        .mat-select-value {
+          color: $color;
+        }
+      }
+    }
+
+    &.sto-form__field--readonly .mat-mdc-form-field-flex {
+      background-color: transparent;
+    }
+
+    .mat-mdc-form-field-flex:hover ~ .mat-form-field-underline {
+    }
+
+    &.mat-focused .mat-mdc-form-field-infix .mat-mdc-floating-label {
+      color: $color;
+    }
+
+    .mat-mdc-form-field-flex:hover {
+      .mat-mdc-form-field-icon-suffix > .mat-icon {
+        color: $icon-hover;
+      }
+    }
+
+    .mat-mdc-form-field-icon-suffix > .mat-icon {
+      color: $icon-color;
+    }
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-input-override-theme($sto-theme, $variables);
+}
+
+@import 'typography';
+
+@mixin sto-input-typography($config) {
+  $base: mat.font-size($config, body-1);
+
+  .sto-form-field,
+  .sto-form__field.mat-form-field {
+    line-height: $base;
+
+    .mat-select-trigger {
+      height: $base;
+    }
+  }
+
+  .sto-form__field.mat-form-field-can-float.mat-form-field-should-float {
+    .mat-mdc-floating-label-wrapper {
+      top: -1.3em;
+    }
+
+    .mat-mdc-floating-label {
+      transform: translateY(-1em) perspective(100px) translateZ(0.001px) !important;
+      @if $base == 16px {
+        font-size: $base - 3px;
+      } @else {
+        font-size: $base - 2px;
+      }
+    }
+
+    .cdk-overlay-container .mat-option {
+      font-size: mat.font-size($config, body-1);
+      line-height: mat.line-height($config, body-1);
+    }
+  }
+
+  .mat-option,
+  .mat-option .mat-option-text {
+    font-size: $base;
+  }
+}
+
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
+  @include sto-input-typography($sto-typography);
+}
+
+.mat-typography.sto-sm-typography {
+  @include sto-input-typography($sto-sm-typography);
+}
+
+.mat-typography.sto-l-typography {
+  @include sto-input-typography($sto-l-typography);
+}

package/style/theme/_message-panel.scss

@@ -1,89 +1,89 @@
-@use '@angular/material' as mat;
-@import "theme";
-@import "typography";
-
-@mixin sto-message-panel-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $warn: map_get($variables, warn);
-  $accent: map_get($variables, accent);
-  $primary-contrast: map_get($variables, primary-contrast);
-  $warn-contrast: map_get($variables, warn-contrast);
-  $accent-contrast: map_get($variables, accent-contrast);
-  $color: map_get($variables, color);
-
-  $indicators: map-get($theme, indicators);
-  $success-palette: map-get($indicators, success);
-  $success: mat.get-color-from-palette($success-palette, highlight);
-  $success-contrast: mat.get-color-from-palette($success-palette, highlight-contrast);
-  $success-icon: mat.get-color-from-palette($success-palette, resting);
-  $success-border: $success-icon;
-
-  $danger-palette: map-get($indicators, danger);
-  $danger: mat.get-color-from-palette($danger-palette, highlight);
-  $danger-contrast: mat.get-color-from-palette($danger-palette, highlight-contrast);
-  $danger-icon: mat.get-color-from-palette($danger-palette, resting);
-  $danger-border: $danger-icon;
-
-  $warning-palette: map-get($indicators, warning);
-  $warning: mat.get-color-from-palette($warning-palette, highlight);
-  $warning-contrast: mat.get-color-from-palette($warning-palette, highlight-contrast);
-  $warning-icon: mat.get-color-from-palette($warning-palette, resting);
-  $warning-border: $warning-icon;
-
-  .sto-message-panel {
-    color: $color;
-
-    &.mat-primary {
-      background-color: $primary;
-      color: $primary-contrast;
-    }
-
-    &.mat-accent {
-      background-color: $accent;
-      color: $accent-contrast;
-    }
-
-    &.mat-warn {
-      background-color: $warn;
-      color: $warn-contrast;
-    }
-
-    &.mat-success {
-      background-color: $success;
-      color: $success-contrast;
-      border-color: $success-border;
-
-      .mat-icon {
-        color: $success-icon;
-      }
-    }
-
-    &.mat-danger {
-      background-color: $danger;
-      color: $danger-contrast;
-      border-color: $danger-border;
-
-      .mat-icon {
-        color: $danger-icon;
-      }
-    }
-
-    &.mat-warning {
-      background-color: $warning;
-      color: $warning-contrast;
-      border-color: $warning-border;
-
-      .mat-icon {
-        color: $warning-icon;
-      }
-    }
-
-  }
-}
-
-
-// Include theme styles for your custom components.
-body {
-  @include sto-message-panel-theme($sto-theme, $variables);
-}
-
+@use '@angular/material' as mat;
+@import "theme";
+@import "typography";
+
+@mixin sto-message-panel-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $warn: map_get($variables, warn);
+  $accent: map_get($variables, accent);
+  $primary-contrast: map_get($variables, primary-contrast);
+  $warn-contrast: map_get($variables, warn-contrast);
+  $accent-contrast: map_get($variables, accent-contrast);
+  $color: map_get($variables, color);
+
+  $indicators: map-get($theme, indicators);
+  $success-palette: map-get($indicators, success);
+  $success: mat.get-color-from-palette($success-palette, highlight);
+  $success-contrast: mat.get-color-from-palette($success-palette, highlight-contrast);
+  $success-icon: mat.get-color-from-palette($success-palette, resting);
+  $success-border: $success-icon;
+
+  $danger-palette: map-get($indicators, danger);
+  $danger: mat.get-color-from-palette($danger-palette, highlight);
+  $danger-contrast: mat.get-color-from-palette($danger-palette, highlight-contrast);
+  $danger-icon: mat.get-color-from-palette($danger-palette, resting);
+  $danger-border: $danger-icon;
+
+  $warning-palette: map-get($indicators, warning);
+  $warning: mat.get-color-from-palette($warning-palette, highlight);
+  $warning-contrast: mat.get-color-from-palette($warning-palette, highlight-contrast);
+  $warning-icon: mat.get-color-from-palette($warning-palette, resting);
+  $warning-border: $warning-icon;
+
+  .sto-message-panel {
+    color: $color;
+
+    &.mat-primary {
+      background-color: $primary;
+      color: $primary-contrast;
+    }
+
+    &.mat-accent {
+      background-color: $accent;
+      color: $accent-contrast;
+    }
+
+    &.mat-warn {
+      background-color: $warn;
+      color: $warn-contrast;
+    }
+
+    &.mat-success {
+      background-color: $success;
+      color: $success-contrast;
+      border-color: $success-border;
+
+      .mat-icon {
+        color: $success-icon;
+      }
+    }
+
+    &.mat-danger {
+      background-color: $danger;
+      color: $danger-contrast;
+      border-color: $danger-border;
+
+      .mat-icon {
+        color: $danger-icon;
+      }
+    }
+
+    &.mat-warning {
+      background-color: $warning;
+      color: $warning-contrast;
+      border-color: $warning-border;
+
+      .mat-icon {
+        color: $warning-icon;
+      }
+    }
+
+  }
+}
+
+
+// Include theme styles for your custom components.
+body {
+  @include sto-message-panel-theme($sto-theme, $variables);
+}
+

package/style/theme/_number-input.scss

@@ -1,23 +1,23 @@
-@import "./theme";
-@import "./typography";
-
-@mixin sto-number-input-theme($theme, $variables) {
-  $color: map_get($variables, color);
-  $secondary-color: map_get($variables, secondary);
-
-  .mat-form-field.sto-form__field {
-    .sto-number-input {
-      color: $color;
-
-      &::placeholder {
-        color: $secondary-color;
-      }
-    }
-
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-number-input-theme($sto-theme, $variables);
-}
+@import "./theme";
+@import "./typography";
+
+@mixin sto-number-input-theme($theme, $variables) {
+  $color: map_get($variables, color);
+  $secondary-color: map_get($variables, secondary);
+
+  .mat-form-field.sto-form__field {
+    .sto-number-input {
+      color: $color;
+
+      &::placeholder {
+        color: $secondary-color;
+      }
+    }
+
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-number-input-theme($sto-theme, $variables);
+}