@c8y/style 1023.17.20 → 1023.22.2

package/styles/components/_smartrules.scss

@@ -0,0 +1,392 @@
+@use "../../variables/index" as *;
+@use "sass:string";
+
+
+/**
+ * Smart Rules - Smart rules list and card component styles
+ *
+ * Note: Uses $size-* tokens for spacing, $component-* variables for colors.
+ * File has been optimized with mixins for repeated patterns (lines 4-83).
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (60px, 63px, 65px, 175px, 187px, 240px): Fixed column widths and sizes
+ * - Off-grid spacing (3px, 14px, 15px): Component-specific positioning and padding
+ * - Percentages (4%, 10%, 75%): Flexbox layout
+ * - Calc expressions: Complex computed values with string.unquote
+ * - Z-index values: Stacking order
+ */
+// Shared mixin for icon font sizing
+@mixin smart-rule-icon-size($size: 20px) {
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'],
+  .c8y-icon,
+  [class^='c8y-icon-'],
+  [class*=' c8y-icon-'] {
+    font-size: $size;
+  }
+}
+
+// Shared mixin for card-icon vertical alignment
+@mixin card-icon-alignment {
+  i {
+    vertical-align: bottom;
+  }
+
+  span {
+    vertical-align: middle;
+  }
+}
+
+// Shared mixin for card-header-actions display block pattern
+@mixin card-header-actions-visible {
+  .card-header-actions {
+    display: flex;
+
+    + .card-inner-scroll:before {
+      display: block;
+    }
+  }
+}
+
+// Shared mixin for smart-rule-details layout
+@mixin smart-rule-details-layout($padding) {
+  .smart-rule-details {
+    height: calc(string.unquote('100% - 88px'));
+
+    .row {
+      margin: 0;
+    }
+
+    .col-sm-3,
+    .col-sm-9 {
+      padding: 0 $padding;
+      width: 100%;
+    }
+  }
+}
+
+// Shared mixin for audit-list table padding
+@mixin audit-list-table-padding($padding) {
+  .audit-list {
+    margin: 0 calc($padding * -1);
+
+    .table tr {
+      td:first-child,
+      th:first-child {
+        padding-left: $padding;
+      }
+
+      td:last-child,
+      th:last-child {
+        padding-right: $padding;
+      }
+    }
+  }
+}
+
+// Shared mixin for card-actions + card-header layout pattern
+@mixin collapsible-card-header($width: $size-40) {
+  .card-actions.collapsible {
+    width: $width;
+
+    + .card-header {
+      display: block;
+      margin: 0 $width;
+    }
+  }
+}
+
+.smart-rule-list-card {
+  .card-header {
+    .card-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      min-height: $size-40;
+    }
+  }
+
+  .card-actions {
+    // Removed unused button selector - verified 0 usages: .btn-collapse
+  }
+
+  .card-block {
+    display: flex;
+    overflow: visible;
+    flex-flow: column wrap;
+    padding-top: 0;
+  }
+
+  .card-back .card-header-actions {
+    display: none;
+    background-color: var(--c8y-level-2);
+  }
+
+  .smart-rule-description {
+    order: 2;
+    text-align: center;
+    line-height: 1;
+
+    .smart-rule-name {
+      display: none;
+    }
+  }
+
+  .smart-rule-state {
+    order: 10;
+    padding: $size-20 0 $size-10 0;
+    width: auto;
+
+    .list-icon {
+      display: none;
+    }
+
+    @include smart-rule-icon-size($size-20);
+
+    .card-icon {
+      @include card-icon-alignment;
+    }
+  }
+
+  .smart-rule-group-switch {
+    order: 3;
+    padding: $size-24 0 $size-8;
+
+    > .c8y-switch {
+      display: none;
+    }
+  }
+
+  .smart-rule-children {
+    order: 9;
+    width: 100%;
+
+    .c8y-child-assets-selector {
+      .dropdown-menu.multiselect-container {
+        width: 100%;
+      }
+    }
+  }
+
+  .card-actions-group {
+    position: static;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .smart-rule-list-card {
+    margin-bottom: $size-base !important;
+
+    .card-back {
+      @include card-header-actions-visible;
+    }
+
+    .card-header {
+      display: block;
+      margin: 0 $size-40 !important;
+    }
+
+    .card-actions {
+      position: absolute !important;
+      top: 0;
+      right: 0;
+      width: auto;
+    }
+
+    .card-back.collapse {
+      height: auto !important;
+    }
+
+    @include smart-rule-details-layout($size-8);
+  }
+}
+
+.interact-grid {
+  .smart-rule-list-card {
+    @include card-header-actions-visible;
+
+    .collapse {
+      //display: block;
+      height: auto !important;
+    }
+
+    .smart-rule-details {
+      height: calc(string.unquote('100% - 88px'));
+
+      .row {
+        margin: 0;
+      }
+
+      .col-sm-3,
+      .col-sm-9 {
+        padding: 0 $component-padding;
+        width: 100%;
+      }
+
+      @include audit-list-table-padding($component-padding);
+    }
+
+    @include collapsible-card-header($size-40);
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .interact-list {
+    .smart-rule-list-card {
+      padding-right: $size-8;
+      background-color: $component-background-default;
+      box-shadow: inset 0 -1px 0 $component-border-color;
+
+      &.active {
+        background-color: $expanded-bg-color;
+      }
+
+      .card-header,
+      .card-actions-group {
+        display: none;
+      }
+
+      .card-header-actions + .card-inner-scroll:before {
+        display: none;
+      }
+
+      .smart-rule-state {
+        order: 0;
+        padding: 0;
+        min-width: 60px;
+
+        .list-icon {
+          display: block;
+        }
+
+        .card-icon {
+          display: none;
+          @include card-icon-alignment;
+        }
+      }
+
+      .card-front,
+      .card-back {
+        margin-bottom: 0;
+        background-color: transparent;
+        box-shadow: none;
+      }
+
+      .card-block {
+        display: flex;
+        flex-flow: row nowrap;
+        padding: 0;
+        min-height: calc($size-base * 3 - 1);
+
+        > .smart-rule-name {
+          display: none;
+        }
+      }
+
+      .smart-rule-group-switch {
+        display: flex;
+        align-items: center;
+        flex: 0 0 4%;
+        order: 0;
+        padding: 0 $size-10;
+        min-width: 65px;
+
+        .c8y-btn-checkbox {
+          display: none;
+        }
+
+        .c8y-switch {
+          display: block;
+        }
+      }
+
+      .smart-rule-children {
+        position: relative;
+        flex: 0 0 175px;
+        order: 1;
+        padding: 0 $size-4 0 $size-4;
+
+        .icon-spin {
+          position: absolute;
+          top: 14px;
+          left: 50%;
+          margin-left: -14px;
+        }
+
+        > label {
+          display: none;
+        }
+
+        .c8y-child-assets-selector .dropdown-menu.multiselect-container {
+          min-width: 240px;
+        }
+      }
+
+      .smart-list-icon-label {
+        order: 2;
+        margin: 0 $size-8;
+      }
+
+      .smart-rule-description {
+        order: 3;
+        text-align: left;
+
+        .smart-rule-name {
+          display: block;
+        }
+      }
+
+      .card-actions {
+        top: $size-10;
+
+        // Removed unused button selector - verified 0 usages: .btn-collapse
+      }
+
+      .card-back {
+        position: static;
+        display: inherit;
+        overflow: hidden;
+        transform: none;
+
+        .smart-rule-details {
+          overflow-y: visible;
+          padding: 0 15px;
+          max-height: none;
+          background-color: transparent;
+        }
+      }
+    }
+
+    .smart-rules-list-head {
+      display: flex;
+    }
+  }
+}
+
+.smart-rules-list-head {
+  display: none;
+  flex-flow: row wrap;
+  margin: 0 calc($grid-gutter-width * 0.5);
+  padding: 3px 0;
+  width: 100%;
+
+  > label {
+    padding-left: $size-8;
+  }
+
+  .smart-rule-group {
+    flex: 0 0 4%;
+    min-width: 63px;
+  }
+
+  .smart-rule-children {
+    flex: 0 0 10%;
+    min-width: 187px;
+  }
+
+  .smart-rule-description {
+    flex: 0 0 auto;
+    max-width: calc(string.unquote('75% - 95px'));
+  }
+}

package/styles/{_range-display.less → components/data-display-and-visualization/_range-display.less}

@@ -1,19 +1,37 @@
+/**
+ * Range Display - Visual range/gauge display component
+ *
+ * Note: Uses @size-* tokens for spacing and positioning, @component-* variables for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (240px, 300px, 44px, 80px): Fixed component sizes
+ * - Off-grid spacing (2px, 3px, 6px, 9px, 11px, 14px, 26px, 28px, 30px, 34px, 37px, 38px, 54px, 56px, 105px): Component-specific positioning and sizing
+ * - Border widths (1px, 2px, 3px): Standard and component-specific borders
+ * - Font-sizes (11px): Off-grid typography
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Calc expressions: Complex computed values with CSS custom properties
+ * - Transform values: Positioning adjustments
+ * - Z-index values: Stacking order
+ * - Opacity values: Visual effects
+ * - Transition durations: Animation timing
+ */
+
 .range-display {
   position: relative;
   display: block;
-  padding: 32px 38px 32px 34px;
+  padding: @size-32 38px @size-32 34px;
   min-width: 240px;
-  border: 4px solid @component-border-color;
+  border: @size-4 solid @component-border-color;
   border-radius: 44px;
   background-color: @component-background-default;
 
   .range-display--compact:not(.range-display--vertical) & {
-    padding: 8px 10px;
+    padding: @size-8 @size-10;
     min-width: auto;
   }
 
   .range-display--inline:not(.range-display--vertical) & {
-    padding: 9px 12px;
+    padding: 9px calc(@size-base * 1.5);
     min-width: auto;
     border-width: 3px;
   }
@@ -24,7 +42,7 @@
 
     &::before {
       display: inline-block;
-      padding-right: 8px;
+      padding-right: @size-8;
       content: attr(data-label);
       font-weight: bold;
     }
@@ -54,18 +72,18 @@
     }
 
     .range-display--compact:not(.range-display--vertical) & {
-      right: 10px;
-      left: 10px;
+      right: @size-10;
+      left: @size-10;
     }
 
     .range-display--inline:not(.range-display--vertical) & {
-      right: 12px;
-      left: 12px;
+      right: calc(@size-base * 1.5);
+      left: calc(@size-base * 1.5);
     }
 
     &__unit {
       position: absolute;
-      top: -24px;
+      top: calc(-1 * @size-24);
       font-weight: bold;
 
       .range-display--compact:not(.range-display--vertical) &,
@@ -77,9 +95,9 @@
     &__max,
     &__min {
       position: absolute;
-      top: -4px;
+      top: calc(-1 * @size-4);
       max-width: 100%;
-      height: 8px;
+      height: @size-8;
       border-radius: 0;
     }
 
@@ -116,13 +134,13 @@
         width: 2px;
         height: 26px;
         border-radius: 0;
-        background-color: @status-success;
+        background-color: var(--palette-status-success, var(--c8y-palette-status-success));
         content: '';
         opacity: 1;
         cursor: pointer;
         transition: all 0.25s ease;
         transform: translate(50%, -50%);
-        pointer-events: all;
+        pointer-events: auto;
       }
 
       &:after {
@@ -135,23 +153,23 @@
         width: auto;
         height: auto;
         border: 0;
-        border-radius: 8px;
-        background-color: @status-success;
+        border-radius: @size-8;
+        background-color: var(--palette-status-success, var(--c8y-palette-status-success));
         color: white;
         content: attr(data-label);
         white-space: nowrap;
         font-size: 11px;
-        transform: translate(50%, -24px);
+        transform: translate(50%, calc(-1 * @size-24));
       }
     }
 
     &__current {
       position: absolute;
-      top: 4px;
+      top: @size-4;
       z-index: 12;
       width: var(--measurement-current);
-      height: 12px;
-      border-top: 4px solid var(--brand-light, @brand-primary-light);
+      height: calc(@size-base * 1.5);
+      border-top: @size-4 solid var(--brand-light, @brand-primary-light);
       background-color: transparent;
       opacity: 1;
       transition: width 0.15s ease;
@@ -171,7 +189,7 @@
         content: '';
         text-align: center;
         transition: all 0.25s ease;
-        transform: translate(calc(50% + .5px), -32px);
+        transform: translate(calc(50% + .5px), calc(-1 * @size-32));
       }
 
       &:after {
@@ -181,10 +199,10 @@
         overflow: hidden;
         align-items: center;
         justify-content: center;
-        padding: 2px 12px;
+        padding: 2px calc(@size-base * 1.5);
         width: auto;
         border: 0;
-        border-radius: 32px;
+        border-radius: @size-32;
         background-color: var(--range-display-tooltip-bg);
         box-shadow: var(--c8y-elevation--md);
         color: @palette-high;
@@ -193,7 +211,7 @@
         font-size: 11px;
         transition: background-color .15s ease;
         transform: var(--range-display-tooltip-translate);
-        top: -8px;
+        top: calc(-1 * @size-8);
       }
     }
   }
@@ -204,7 +222,7 @@
     flex-flow: row nowrap;
     justify-content: space-between;
     width: 100%;
-    height: 8px;
+    height: @size-8;
     border-top: 0;
     border-left: 0;
   }
@@ -214,11 +232,11 @@
 
     &:before {
       position: absolute;
-      top: 4px;
+      top: @size-4;
       left: 0;
       display: block;
-      width: 4px;
-      height: 5px;
+      width: @size-4;
+      height: @size-5;
       border: 0;
       border-left: 1px solid currentColor;
       content: '';
@@ -231,13 +249,13 @@
       left: 50%;
       content: attr(data-label);
       text-align: center;
-      font-size: 12px;
+      font-size: calc(@size-base * 1.5);
       transform: translate(-50%, 14px);
     }
 
     .range-display--compact:not(.range-display--vertical) & {
       &:after {
-        top: 4px;
+        top: @size-4;
       }
 
       &:not(:first-child):not(:last-child):not(:nth-child(6)) {
@@ -263,20 +281,20 @@
         }
 
         &::after {
-          font-size: 10px;
+          font-size: @size-10;
         }
       }
 
       &:first-child::after {
-        transform: translate(0, 5px);
+        transform: translate(0, @size-5);
       }
 
       &:nth-child(6)::after {
-        transform: translate(-50%, 5px);
+        transform: translate(-50%, @size-5);
       }
 
       &:last-child::after {
-        transform: translate(-100%, 5px);
+        transform: translate(-100%, @size-5);
       }
     }
   }
@@ -293,14 +311,14 @@
       flex-direction: column;
       flex-grow: 1;
       margin: 0 105px;
-      padding: 38px 32px 34px 32px;
+      padding: 38px @size-32 34px @size-32;
       min-width: unset;
       min-height: 240px;
-      width: 80px;
+      width: @size-80;
 
       &__range {
         top: 38px;
-        right: 32px;
+        right: @size-32;
         bottom: 34px;
         left: 28px;
         flex-direction: column;
@@ -314,16 +332,16 @@
 
         &__unit {
           top: unset;
-          bottom: -24px;
+          bottom: calc(-1 * @size-24);
         }
 
         &__max,
         &__min {
           position: absolute;
           top: unset;
-          left: -4px;
+          left: calc(-1 * @size-4);
           max-width: 100%;
-          width: 8px;
+          width: @size-8;
           height: unset;
           border-radius: 0;
         }
@@ -371,10 +389,10 @@
           top: unset;
           bottom: 0;
           left: 6px;
-          width: 12px;
+          width: calc(@size-base * 1.5);
           height: var(--measurement-current);
           border-top: unset;
-          border-left: 4px solid var(--brand-light, @brand-primary-light);
+          border-left: @size-4 solid var(--brand-light, @brand-primary-light);
           background-color: transparent;
           opacity: 1;
 
@@ -382,12 +400,12 @@
             top: 0;
             right: unset;
             bottom: unset;
-            left: -8px;
+            left: calc(-1 * @size-8);
             display: flex;
             flex-direction: column;
-            width: 32px;
+            width: @size-32;
             height: 2px;
-            transform: translate(-20px, -50%);
+            transform: translate(calc(-1 * @size-20), -50%);
             border-top: 1px dashed @tooltip-background-default;
             border-left: 0;
           }
@@ -407,7 +425,7 @@
         flex-flow: column-reverse nowrap;
         flex-grow: 1;
         justify-content: space-between;
-        width: 8px;
+        width: @size-8;
         border-top: 0;
         border-left: 0;
       }
@@ -420,8 +438,8 @@
           top: 0;
           left: 0;
           display: block;
-          width: 4px;
-          height: 5px;
+          width: @size-4;
+          height: @size-5;
           border: 0;
           border-top: 1px solid currentColor;
           content: '';
@@ -433,7 +451,7 @@
           left: 50%;
           content: attr(data-label);
           text-align: center;
-          font-size: 12px;
+          font-size: calc(@size-base * 1.5);
           transform: translate(4px, -50%);
         }
       }