@c8y/style 1023.17.19 → 1023.22.2

package/styles/components/data-display-and-visualization/lists/_cards-layout.scss

@@ -0,0 +1,415 @@
+@use "sass:math";
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/shadows-helper";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * Cards Layout - Flex grid layout for card groups
+ *
+ * Note: Uses $size-* tokens for spacing, $grid-gutter-width for grid spacing, and component variables.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (54px, 75px, 116px, 136px, 230px): Card heights and widths
+ * - Negative grid gutter: -0.5 multiplier for negative margins
+ * - Percentages (50%, 100%): Layout and flex values
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Transition durations (0.1s, 0.2s): Animation timing
+ * - Transform values: translate and scale
+ * - Box-shadow values: Elevation and shadow effects
+ * - RGBA values: Transparency
+ * - Z-index values (1, 2): Stacking order
+ */
+
+/* flex grid for card groups*/
+
+.card-group,
+.card-group-block {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  margin-bottom: $size-16;
+}
+
+.card-group {
+  margin-right: calc($grid-gutter-width * -0.5);
+  margin-left: calc($grid-gutter-width * -0.5);
+
+  /* use col-** for horizontal spacing.*/
+  > [class^='col-xs-'],
+  > [class*=' col-xs'],
+  > [class^='col-sm-'],
+  > [class*=' col-sm'],
+  > [class^='col-md-'] > [class*=' col-md'],
+  > [class^='col-lg-'],
+  > [class*=' col-lg'] {
+    display: flex;
+
+    > .card,
+    > .d-contents > .card,
+    > span {
+      width: 100%;
+    }
+
+    > span {
+      display: flex;
+      align-self: stretch;
+
+      > .card {
+        width: 100%;
+      }
+    }
+  }
+
+  .card {
+    align-self: stretch;
+  }
+
+  &:not(.interact-list) {
+    .card--d-col {
+      display: flex;
+      flex-direction: column;
+      .card-footer {
+        margin-top: auto;
+      }
+    }
+  }
+}
+
+.card-group-block .card {
+  margin-bottom: 0;
+}
+
+@media (min-width: $screen-sm-min) {
+  .card-group,
+  .card-group-block {
+    &.interact-list {
+      > [class^='col-xs-'],
+      > [class*=' col-xs'],
+      > [class^='col-sm-'],
+      > [class*=' col-sm'],
+      > [class^='col-md-'],
+      > [class*=' col-md'],
+      > [class^='col-lg-'],
+      > [class*=' col-lg'] {
+        width: 100%;
+
+        > .card,
+        > .d-contents > .card {
+          display: flex;
+          margin-bottom: 0;
+          padding: $size-base 0;
+          box-shadow: inset 0 -1px 0 $component-border-color;
+
+          > hr {
+            display: none;
+          }
+        }
+      }
+
+      .card-header {
+        flex: 0 0 auto;
+        padding: calc($size-base + 2px) $component-padding;
+        width: 20%;
+        border-bottom: 0;
+        .card-title {
+          height: auto;
+          font-size: $font-size-base;
+          line-height: unset;
+        }
+        &.separator {
+          box-shadow: none;
+        }
+        .statusContainer {
+          margin-left: -2px;
+          font-size: $size-20;
+        }
+      }
+
+      .card-appicon {
+        margin-right: $size-base;
+        padding-top: 0;
+        height: 22px;
+        font-size: 22px;
+      }
+
+      .card-block,
+      .card-footer {
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        flex-grow: 1;
+        padding: $size-10;
+        min-height: calc($size-base * 6px);
+        p {
+          margin: 0;
+          padding: 0 5px;
+        }
+        .text-label-small {
+          display: none;
+        }
+        &.separator {
+          box-shadow: none;
+        }
+      }
+
+      .card-hidden-list {
+        display: none !important;
+      }
+
+      .page-sticky-header {
+        .card-block,
+        .card-header,
+        .card-footer,
+        .card-actions-group {
+          padding-top: $size-4;
+          padding-bottom: $size-4;
+          min-height: $page-sticky-header-height;
+          text-align: left;
+        }
+      }
+      .card-block,
+      .card-header,
+      .card-footer,
+      .card-actions-group {
+        &.text-center {
+          text-align: left !important;
+        }
+      }
+
+      .card-column-20 {
+        width: 20%;
+      }
+      .card-column-30 {
+        width: 30%;
+      }
+
+      .card-column-40 {
+        width: 40%;
+      }
+
+      .card-column-50 {
+        width: 50%;
+      }
+
+      .card-column-60 {
+        width: 60%;
+      }
+
+      .card-column-70 {
+        width: 70%;
+      }
+
+      .card-column-80 {
+        width: 80%;
+      }
+
+      .card-column-90 {
+        width: 90%;
+      }
+
+      .card-column-100 {
+        width: 100%;
+      }
+
+      .card-actions {
+        top: $size-8;
+
+        ~ .card-block {
+          margin-right: 44px;
+
+          &.card-block-list {
+            display: block;
+            margin-right: 0;
+          }
+
+          + .card-footer {
+            margin-right: $size-40;
+            margin-left: auto;
+            padding: $size-10;
+
+            &.separator {
+              border-top: 0;
+            }
+          }
+        }
+      }
+
+      .card-item-last {
+        flex: 0 0 220px;
+        margin-left: auto;
+      }
+
+      .card-actions-group {
+        order: 99;
+        margin-left: auto;
+      }
+
+      .smart-rule-list-card {
+        .card-actions {
+          top: $size-10;
+        }
+      }
+    }
+  }
+
+  .interact-list {
+    .card-hidden-list {
+      display: none !important;
+    }
+    .text-center-list {
+      text-align: center;
+      justify-content: center;
+    }
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .card-hidden-grid {
+    display: none !important;
+  }
+}
+.interact-grid {
+  .card-hidden-grid {
+    display: none !important;
+  }
+  .card[ng-click]:not(.add-card):not(.not-active),
+  .card.pointer,
+  a.card:not(.add-card) {
+    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+    &:not(:has(button:hover)){
+      &:hover,
+      &:focus {
+        z-index: $zindex-navbar - 1;
+        text-decoration: none;
+
+        box-shadow: $elevation-hover;
+        color: $text-color;
+        filter: none;
+        .dropdown.open {
+          .dropdown-menu {
+            @include shadows-helper.boxShadowHelper(md, right);
+          }
+        }
+      }
+  }
+    .card-header {
+      .statusContainer {
+        margin-left: -2px;
+        font-size: 20px;
+
+        .sendStatus {
+          margin-top: -3px;
+        }
+      }
+
+      .card-icon {
+        margin-top: -3px;
+        line-height: 1;
+
+        > c8y-device-status-display {
+          display: block;
+          max-height: $size-20;
+        }
+      }
+    }
+
+    .card-header ~ .card-block {
+      display: flex;
+      flex-flow: column wrap;
+      padding-top: $component-padding;
+
+      > p {
+        width: 100%;
+      }
+
+      > [class^='col-xs-'],
+      > [class*=' col-xs'],
+      > [class^='col-sm-'],
+      > [class*=' col-sm'],
+      > [class^='col-md-'],
+      > [class*=' col-md'],
+      > [class^='col-lg-'],
+      > [class*=' col-lg'] {
+        padding: 0;
+        width: 100%;
+      }
+    }
+  }
+  &.card-group-block {
+    .card[ng-click]:not(.add-card):not(.not-active),
+    .card.pointer,
+    a.card:not(.add-card) {
+      box-shadow: 0 0 0 1px $component-border-color;
+      transition: all .25s ease;
+      &:hover,
+      &:focus {
+        z-index: $zindex-navbar - 1;
+        text-decoration: none;
+        box-shadow: 0 0 0 1px $component-border-color;
+        color: $text-color;
+        filter: none;
+        outline: 2px solid $component-brand-primary;
+        outline-offset: -2px;
+      }
+    }
+  }
+  .card-hidden-grid {
+    display: none !important;
+  }
+  .text-center-grid {
+    text-align: center;
+    justify-content: center;
+  }
+  .card-actions + .card-header {
+    .card-title:not(.smart-rule-name) {
+      margin-right: $size-24;
+    }
+  }
+
+  .card-inner-scroll & {
+    .card[ng-click]:not(.add-card),
+    a.card:not(.add-card) {
+      &:hover,
+      &:focus {
+        @include vendor-prefixes.scale(1);
+      }
+    }
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .interact-list {
+    .card[ng-click],
+    .card.pointer {
+      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+
+      &:hover,
+      &:focus {
+        z-index: $zindex-navbar - 1;
+        box-shadow: 0 20px 15px rgba($black, math.div(10, 100)), 0 -2px 10px 1px rgba($black, math.div(3, 100));
+        text-decoration: none;
+
+        @include vendor-prefixes.scale(1.05);
+      }
+
+      .card-header ~ .card-block {
+        display: flex;
+        flex-flow: column wrap;
+
+        > p {
+          width: 100%;
+        }
+      }
+    }
+    .text-center-grid {
+      text-align: center;
+      justify-content: center;
+    }
+
+    .card-actions + .card-header .card-title {
+      margin-right: 44px;
+    }
+  }
+}

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

@@ -1,3 +1,6 @@
+@import '../../../../variables/index.less';
+@import '../../../../variables/_dlt-c8y-icons-vars.less';
+
 .list-group {
   position: relative;
   margin-bottom: @margin-16;
@@ -111,7 +114,6 @@
       content: @dlt-c8y-icon-chevron-right;
       font: normal normal normal 14px/1 @icon-font-family;
       font-size: inherit;
-      -webkit-transform: translate(0, -50%);
       transform: translate(0, -50%);
 
       text-rendering: auto;
@@ -256,7 +258,7 @@ button.list-group-item {
     position: absolute;
     left: -10px;
     height: 40px;
-    color: @status-danger;
+    color: var(--palette-status-danger, var(--c8y-palette-status-danger));
     font-size: 14px;
     line-height: 40px;
   }