@ngx-stoui/core 13.0.0-BETA.1 → 13.0.2

package/ngx-stoui.css

@@ -339,48 +339,6 @@ body .sto-date.sto-date__popout {
   background: var(--bg-card);
 }
 
-body .sto-drawer__overlay {
-  background: var(--text);
-}
-body .sto-drawer {
-  background-color: var(--bg-app);
-}
-body .sto-drawer__footer {
-  border-top: 1px solid var(--divider);
-  background-color: var(--bg-card);
-  color: var(--text);
-}
-body .sto-drawer__content {
-  background-color: var(--bg-app);
-  color: var(--text);
-}
-body .sto-drawer__header__infix a, body .sto-drawer__header__infix mat-icon {
-  color: var(--text-secondary);
-}
-body .sto-drawer__header__infix a:hover, body .sto-drawer__header__infix mat-icon:hover {
-  color: var(--text-disabled);
-}
-body .sto-drawer__header__wrapper {
-  background-color: var(--bg-card);
-  color: var(--text);
-}
-body .sto-drawer .sto-slide-panel {
-  color: var(--text);
-  background-color: var(--bg-app);
-}
-body .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item {
-  color: var(--text);
-}
-body .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .mat-icon {
-  color: var(--text-secondary);
-}
-body .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .sto-navigation__item__text {
-  color: var(--text);
-}
-body .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .sto-navigation__item__text a {
-  color: var(--text);
-}
-
 body .sto-filter.mat-expansion-panel .mat-expansion-panel-header {
   background-color: var(--bg-card);
 }
@@ -1331,11 +1289,15 @@ body .mat-calendar-body-disabled > .mat-calendar-body-selected {
 body .mat-calendar-body-today.mat-calendar-body-selected {
   box-shadow: inset 0 0 0 1px var(--primary-contrast-resting);
 }
-body .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 body .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 body .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
   background-color: var(--primary-resting);
 }
+@media (hover: hover) {
+  body .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: var(--primary-resting);
+  }
+}
 body .mat-datepicker-content {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
   background-color: var(--bg-card);
@@ -1374,11 +1336,15 @@ body .mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calen
 body .mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
   box-shadow: inset 0 0 0 1px var(--accent-highlight-contrast);
 }
-body .mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 body .mat-datepicker-content.mat-accent .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 body .mat-datepicker-content.mat-accent .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
   background-color: var(--accent-highlight);
 }
+@media (hover: hover) {
+  body .mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: var(--accent-highlight);
+  }
+}
 body .mat-datepicker-content.mat-warn .mat-calendar-body-in-range::before {
   background: rgba(244, 67, 54, 0.2);
 }
@@ -1412,11 +1378,15 @@ body .mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calenda
 body .mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
   box-shadow: inset 0 0 0 1px white;
 }
-body .mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 body .mat-datepicker-content.mat-warn .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 body .mat-datepicker-content.mat-warn .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
   background-color: rgba(244, 67, 54, 0.3);
 }
+@media (hover: hover) {
+  body .mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: rgba(244, 67, 54, 0.3);
+  }
+}
 body .mat-datepicker-content-touch {
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
@@ -1646,8 +1616,9 @@ body .mat-list-base .mat-list-option {
 body .mat-list-base .mat-subheader {
   color: var(--text-secondary);
 }
-body .mat-list-item-disabled {
+body .mat-list-base .mat-list-item-disabled {
   background-color: var(--bg-disabled);
+  color: var(--text-disabled);
 }
 body .mat-list-option:hover, body .mat-list-option:focus,
 body .mat-nav-list .mat-list-item:hover,
@@ -1893,73 +1864,73 @@ body .mat-slide-toggle-bar {
 body .mat-slider-track-background {
   background-color: var(--text-disabled);
 }
-body .mat-primary .mat-slider-track-fill,
-body .mat-primary .mat-slider-thumb,
-body .mat-primary .mat-slider-thumb-label {
+body .mat-slider.mat-primary .mat-slider-track-fill,
+body .mat-slider.mat-primary .mat-slider-thumb,
+body .mat-slider.mat-primary .mat-slider-thumb-label {
   background-color: var(--primary-resting);
 }
-body .mat-primary .mat-slider-thumb-label-text {
+body .mat-slider.mat-primary .mat-slider-thumb-label-text {
   color: var(--primary-contrast-resting);
 }
-body .mat-primary .mat-slider-focus-ring {
+body .mat-slider.mat-primary .mat-slider-focus-ring {
   background-color: var(--primary-resting);
   opacity: 0.2;
 }
-body .mat-accent .mat-slider-track-fill,
-body .mat-accent .mat-slider-thumb,
-body .mat-accent .mat-slider-thumb-label {
+body .mat-slider.mat-accent .mat-slider-track-fill,
+body .mat-slider.mat-accent .mat-slider-thumb,
+body .mat-slider.mat-accent .mat-slider-thumb-label {
   background-color: var(--accent-highlight);
 }
-body .mat-accent .mat-slider-thumb-label-text {
+body .mat-slider.mat-accent .mat-slider-thumb-label-text {
   color: var(--accent-highlight-contrast);
 }
-body .mat-accent .mat-slider-focus-ring {
+body .mat-slider.mat-accent .mat-slider-focus-ring {
   background-color: var(--accent-highlight);
   opacity: 0.2;
 }
-body .mat-warn .mat-slider-track-fill,
-body .mat-warn .mat-slider-thumb,
-body .mat-warn .mat-slider-thumb-label {
+body .mat-slider.mat-warn .mat-slider-track-fill,
+body .mat-slider.mat-warn .mat-slider-thumb,
+body .mat-slider.mat-warn .mat-slider-thumb-label {
   background-color: #f44336;
 }
-body .mat-warn .mat-slider-thumb-label-text {
+body .mat-slider.mat-warn .mat-slider-thumb-label-text {
   color: white;
 }
-body .mat-warn .mat-slider-focus-ring {
+body .mat-slider.mat-warn .mat-slider-focus-ring {
   background-color: rgba(244, 67, 54, 0.2);
 }
 body .mat-slider:hover .mat-slider-track-background,
 body .mat-slider.cdk-focused .mat-slider-track-background {
   background-color: var(--text-disabled);
 }
-body .mat-slider-disabled .mat-slider-track-background,
-body .mat-slider-disabled .mat-slider-track-fill,
-body .mat-slider-disabled .mat-slider-thumb {
+body .mat-slider.mat-slider-disabled .mat-slider-track-background,
+body .mat-slider.mat-slider-disabled .mat-slider-track-fill,
+body .mat-slider.mat-slider-disabled .mat-slider-thumb {
   background-color: var(--text-disabled);
 }
-body .mat-slider-disabled:hover .mat-slider-track-background {
+body .mat-slider.mat-slider-disabled:hover .mat-slider-track-background {
   background-color: var(--text-disabled);
 }
-body .mat-slider-min-value .mat-slider-focus-ring {
+body .mat-slider.mat-slider-min-value .mat-slider-focus-ring {
   background-color: var(--text);
   opacity: 0.12;
 }
-body .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
-body .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
+body .mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
+body .mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
   background-color: var(--text-secondary);
 }
-body .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
-body .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
+body .mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
+body .mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
   background-color: var(--text-disabled);
 }
-body .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
+body .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
   border-color: var(--text-disabled);
   background-color: transparent;
 }
-body .mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, body .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
+body .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, body .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
   border-color: var(--text-disabled);
 }
-body .mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, body .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
+body .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, body .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
   border-color: var(--text-disabled);
 }
 body .mat-slider-has-ticks .mat-slider-wrapper::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "13.0.0-BETA.1",
+  "version": "13.0.2",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",

package/style/grid.scss

@@ -8,9 +8,13 @@
     display: block;
     grid-column: span 1;
   }
-  @for $i from 1 through $col-count {
+  @for $i from 1 through 12 {
     .#{$child-selector}-#{$i} {
-      grid-column: span $i;
+      @if $i > $col-count {
+        grid-column: span $col-count;
+      } @else {
+        grid-column: span $i;
+      }
     }
   }
 }

package/style/theme/_drawer.scss

@@ -1,101 +0,0 @@
-@use '@angular/material' as mat;
-@import "theme";
-@import "typography";
-
-@mixin sto-drawer-theme($theme, $variables) {
-  $color: map_get($variables, color);
-  $secondary: map_get($variables, secondary);
-  $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, background);
-  $header-color: map_get($variables, app-bar);
-  $hover-bg-color: map_get($variables, hover-bg);
-  $selected-color: map_get($variables, selected-bg);
-  $icon-color: map_get($variables, icon);
-  $hover-color: map_get($variables, hover-color);
-
-  .sto-drawer__overlay {
-    background: $color;
-  }
-
-  .sto-drawer {
-    background-color: $background-color;
-
-    &__footer {
-      border-top: 1px solid $border-color;
-      background-color: $header-color;
-      color: $color;
-    }
-
-    &__content {
-      background-color: $background-color;
-      color: $color;
-    }
-
-    &__header {
-      &__infix {
-        a, mat-icon {
-          color: $secondary;
-
-          &:hover {
-            color: $hover-color;
-          }
-        }
-      }
-      &__wrapper {
-        background-color: $header-color;
-        color: $color;
-      }
-    }
-
-    // navigation, TODO Rename
-    .sto-slide-panel {
-      color: $color;
-      background-color: $background-color;
-
-      .mat-list.sto-navigation {
-        .mat-list-item {
-          color: $color;
-
-          .mat-icon {
-            color: $icon-color;
-          }
-
-          .sto-navigation__item__text {
-            color: $color;
-
-            a {
-              color: $color;
-            }
-          }
-        }
-      }
-    }
-  }
-
-}
-
-@mixin sto-drawer-typography($config) {
-  .sto-drawer .sto-drawer__header {
-    &__title, h1, h2, h3, h4, h5 {
-      // Per Christian needs to look at what size this should be.
-      // font-size: mat.font-size($config, subheading-1);
-    }
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-drawer-theme($sto-theme, $variables);
-}
-
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
-  @include sto-drawer-typography($sto-typography);
-}
-
-.mat-typography.sto-sm-typography {
-  @include sto-drawer-typography($sto-sm-typography);
-}
-
-.mat-typography.sto-l-typography {
-  @include sto-drawer-typography($sto-l-typography);
-}