@c8y/style 1023.17.20 → 1023.22.2

package/styles/components/navigation-and-layout/cards/_card-grid.scss

@@ -0,0 +1,95 @@
+@use "../../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../../mixins/shadows-helper";
+
+/**
+ * Card Grid - Grid layout card variant
+ *
+ * Note: Uses $size-* tokens, $component-padding, and component color variables.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (118px, 150px, 165px): Layout-specific heights for fullpage mode
+ * - Percentages (100%, 100vh): Layout
+ * - Z-index values (15, 90): Stacking order for sticky elements
+ * - Negative offsets (-1px): Fine-tuning for shadow borders
+ * - Calc expressions: Complex computed values with string.unquote
+ */
+
+.card--grid,
+.card.card--grid {
+  display: grid;
+
+  .c8y-list__item__block.sticky-top {
+    z-index: 90;
+    background-color: inherit;
+
+    @include shadows-helper.shadow-border(-1px, $component-border-color);
+  }
+
+  .c8y-list__item__collapse--container {
+    padding: $component-padding;
+  }
+
+  .expanded {
+    .c8y-list__item__block.sticky-top {
+      background-color: $component-background-active !important;
+
+      @include shadows-helper.shadow-border(-1px, $component-border-color);
+    }
+
+    .c8y-list__item__collapse--container {
+      padding: $component-padding;
+    }
+  }
+}
+
+.card--grid__separator-top--white {
+  border-top: $size-4 solid $component-background-default;
+}
+
+.card--grid__separator-top {
+  border-top: $size-4 solid $component-border-color;
+}
+
+.card--grid--fullpage {
+  margin-bottom: 0 !important;
+
+  @media (min-width: $screen-md-min) {
+    height: calc(string.unquote('100vh - 118px'));
+
+    .has-tabs.horizontal-tabs & {
+      height: calc(string.unquote('100vh - 165px'));
+    }
+
+    .has-action-bar & {
+      height: calc(string.unquote('100vh - 150px'));
+    }
+  }
+}
+
+.card--grid__inner-scroll {
+  position: relative;
+  overflow: auto;
+  height: 100%;
+
+  .card-header {
+    position: sticky;
+    top: 0;
+    z-index: 15;
+    background-color: inherit;
+  }
+
+  .card-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 15;
+    background-color: inherit;
+  }
+
+  .card-block {
+    .legend:first-child {
+      margin-top: 0;
+    }
+  }
+}

package/styles/{_card.less → components/navigation-and-layout/cards/_card.less}

@@ -67,36 +67,36 @@
 
   // state colors
   &.danger {
-    background-color: @status-danger-light;
-    color: @status-danger-dark;
-    --c8y-component-color-text-muted: @status-danger;
+    background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
+    color: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
+    --c8y-component-color-text-muted: var(--palette-status-danger, var(--c8y-palette-status-danger));
     --c8y-component-border-color: rgba(black, 0.1);
   }
 
   &.warning {
-    background-color: @status-warning-light;
-    color: @status-warning-dark;
-    --c8y-component-color-text-muted: @status-warning;
+    background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
+    color: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
+    --c8y-component-color-text-muted: var(--palette-status-warning, var(--c8y-palette-status-warning));
     --c8y-component-border-color: rgba(black, 0.1);
   }
 
   &.success {
-    background-color: @status-success-light;
-    color: @status-success-dark;
-    --c8y-component-color-text-muted: @status-success;
+    background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
+    color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
+    --c8y-component-color-text-muted: var(--palette-status-success, var(--c8y-palette-status-success));
     --c8y-component-border-color: rgba(black, 0.1);
   }
 
   &.info {
-    background-color: @status-info-light;
-    color: @status-info-dark;
+    background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
+    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
 
-    --c8y-component-color-text-muted: @status-info;
+    --c8y-component-color-text-muted: var(--palette-status-info, var(--c8y-palette-status-info));
     --c8y-component-border-color: rgba(black, 0.1);
   }
 
   &.brand {
-    background-color: @brand-primary;
+    background-color: var(--brand-primary, var(--c8y-brand-primary));
     color: @palette-high;
 
     --c8y-component-color-text-muted: @palette-high;
@@ -492,11 +492,7 @@
     .shadow-scroll();
   }
 
-  &.no-scroll {
-    &:after {
-      display: none;
-    }
-  }
+  // Removed unused scroll utility - verified 0 usages: .no-scroll
 
   c8y-alarm-list & {
     &:after {
@@ -507,7 +503,7 @@
   &.critical {
     .card-icon,
     .card-title {
-      background-color: @status-danger;
+      background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
       color: white;
     }
 
@@ -519,7 +515,7 @@
   &.major {
     .card-icon,
     .card-title {
-      background-color: @status-warning-dark;
+      background-color: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
       color: white;
     }
 
@@ -531,7 +527,7 @@
   &.minor {
     .card-icon,
     .card-title {
-      background-color: @status-warning;
+      background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
       color: white;
     }
 
@@ -543,7 +539,7 @@
   &.warning {
     .card-icon,
     .card-title {
-      background-color: @status-info;
+      background-color: var(--palette-status-info, var(--c8y-palette-status-info));
       color: white;
     }