@c8y/style 1023.14.33 → 1023.14.37

package/styles/components/data-display-and-visualization/lists/_c8y-empty-state.scss

@@ -0,0 +1,164 @@
+@use "../../../../variables/index" as *;
+
+/**
+ * C8Y Empty State - Empty state component for lists and containers
+ *
+ * Note: Uses $size-* tokens for spacing, $size-base for calculations, and $component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (600px, 280px, 45px): Max widths and flex basis
+ * - Typography sizes (30px, 90px): Large icon font sizes
+ * - Opacity values (0.6): Visual effects
+ * - Percentages (100%): Layout
+ * - Rem values (8rem, 4rem): Responsive padding using rem units
+ */
+
+.c8y-empty-state {
+  margin: 0 auto;
+  max-width: 600px;
+  width: 100%;
+  color: $component-color-text-muted;
+  text-align: center;
+  > .c8y-icon,
+  > [class^='dlt-c8y-icon-'],
+  > [class*=' dlt-c8y-icon-'] {
+    margin-bottom: $size-base;
+    color: $component-color-text-muted;
+    font-size: 90px;
+    opacity: 0.6;
+    .dashboard.dashboard-theme-dark & {
+      color: $component-background-default;
+    }
+    .dashboard.dashboard-theme-branded & {
+      color: $component-background-default;
+    }
+  }
+  .btn-link {
+    @extend .btn-primary !optional;
+  }
+
+  p, .btn{
+    margin-bottom: $size-base;
+  }
+
+  .dashboard.dashboard-theme-branded & {
+    .btn-primary {
+      @extend .btn-default !optional;
+    }
+    a {
+      color: $component-color-default;
+      text-decoration: underline;
+    }
+  }
+
+  &.empty-list {
+    display: flex;
+    flex-flow: row nowrap;
+    text-align: left;
+    > .c8y-icon,
+    > [class^='dlt-c8y-icon-'],
+    > [class*=' dlt-c8y-icon-'] {
+      flex: 0 0 auto;
+      margin-right: $size-5;
+      color: $component-color-text-muted;
+      font-size: 30px;
+    }
+    p {
+      align-self: center;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+      color: $component-color-text-muted;
+    }
+  }
+  &--horizontal {
+    display: flex;
+    flex-flow: row nowrap;
+    margin: 0;
+    padding: $size-base;
+    max-width: 100%;
+    text-align: left !important;
+    > .c8y-icon,
+    > [class^='dlt-c8y-icon-'],
+    > [class*=' dlt-c8y-icon-'] {
+      flex: 0 0 auto;
+      margin-right: $size-4;
+      margin-bottom: 0;
+      font-size: 30px;
+    }
+    h3 {
+      align-self: center;
+      font-size: inherit;
+    }
+    p {
+      align-self: center;
+      flex: 0 1 auto;
+      margin-bottom: 0;
+      color: $component-color-text-muted;
+    }
+  }
+  .card-block .c8y-empty-state {
+    padding: $size-base 0;
+  }
+}
+
+.panel,
+.card,
+.c8y-nav-stacked,
+.c8y-list__item,
+td,
+.modal-content,
+.smart-rest-editor {
+  .c8y-empty-state {
+    display: flex;
+    flex-flow: row nowrap;
+    margin-left: 0;
+    padding: $size-base;
+    text-align: left !important;
+    > .c8y-icon,
+    > [class^='dlt-c8y-icon-'],
+    > [class*=' dlt-c8y-icon-'] {
+      flex: 0 0 45px;
+      margin-right: $size-5;
+      margin-bottom: 0;
+      font-size: 30px;
+    }
+    h3 {
+      align-self: center;
+      margin-right: $size-5;
+      font-weight: bold;
+      font-size: inherit;
+    }
+    p {
+      align-self: center;
+      flex: 0 1 auto;
+      margin-bottom: 0;
+      color: $component-color-text-muted;
+    }
+  }
+  .card-block .c8y-empty-state {
+    padding: $size-base 0;
+  }
+}
+
+.c8y-nav-stacked,
+.smart-rest-editor {
+  .c8y-empty-state {
+    padding: 0;
+  }
+}
+
+.no-results {
+  padding-top: $component-padding;
+  text-align: center;
+  .c8y-empty-state {
+    display: inline-block;
+    max-width: 280px;
+    text-align: center !important;
+  }
+}
+
+@media (max-width: $screen-xs) {
+  .c8y-empty-state:not(.c8y-empty-state--horizontal) {
+    padding: 8rem 4rem;
+  }
+}

package/styles/{_c8y-list-group.less → components/data-display-and-visualization/lists/_c8y-list-group.less}

@@ -42,7 +42,7 @@
     }
 
     &.highlighted {
-      background-color: @brand-80;
+      background-color: var(--brand-80, var(--c8y-brand-80));
     }
     &.selected{
       border-left: 4px solid @component-color-active;