@c8y/style 1023.17.19 → 1023.22.2

package/styles/{_smartrules.less → components/_smartrules.less}

@@ -1,3 +1,97 @@
+/**
+ * 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
+ * - Z-index values: Stacking order
+ */
+// Shared mixin for icon font sizing
+.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
+.card-icon-alignment() {
+  i {
+    vertical-align: bottom;
+  }
+
+  span {
+    vertical-align: middle;
+  }
+}
+
+// Shared mixin for card-header-actions display block pattern
+.card-header-actions-visible() {
+  .card-header-actions {
+    display: flex;
+
+    + .card-inner-scroll:before {
+      display: block;
+    }
+  }
+}
+
+// Shared mixin for smart-rule-details layout
+.smart-rule-details-layout(@padding) {
+  .smart-rule-details {
+    height: ~'calc(100% - 88px)';
+
+    .row {
+      margin: 0;
+    }
+
+    .col-sm-3,
+    .col-sm-9 {
+      padding: 0 @padding;
+      width: 100%;
+    }
+  }
+}
+
+// Shared mixin for audit-list table padding
+.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
+.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 {
@@ -5,14 +99,12 @@
       align-items: center;
       justify-content: center;
       margin: 0;
-      min-height: 40px;
+      min-height: @size-40;
     }
   }
 
   .card-actions {
-    .btn-collapse {
-      display: none;
-    }
+    // Removed unused button selector - verified 0 usages: .btn-collapse
   }
 
   .card-block {
@@ -39,38 +131,23 @@
 
   .smart-rule-state {
     order: 10;
-    padding: 20px 0 10px 0;
+    padding: @size-20 0 @size-10 0;
     width: auto;
 
     .list-icon {
       display: none;
     }
 
-    [class^='dlt-c8y-icon-'],
-    [class*=' dlt-c8y-icon-'] {
-      font-size: 20px;
-    }
-
-    .c8y-icon, 
-    [class^='c8y-icon-'], 
-    [class*=' c8y-icon-'] {
-      font-size: 20px;
-    } 
+    .smart-rule-icon-size(@size-20);
 
     .card-icon {
-      i {
-        vertical-align: bottom;
-      }
-
-      span {
-        vertical-align: middle;
-      }
+      .card-icon-alignment();
     }
   }
 
   .smart-rule-group-switch {
     order: 3;
-    padding: 24px 0 8px;
+    padding: @size-24 0 @size-8;
 
     > .c8y-switch {
       display: none;
@@ -95,19 +172,15 @@
 
 @media (max-width: @screen-xs-max) {
   .smart-rule-list-card {
-    margin-bottom: @margin-base !important;
+    margin-bottom: @size-base !important;
 
-    .card-back .card-header-actions {
-      display: flex;
-
-      + .card-inner-scroll:before {
-        display: block;
-      }
+    .card-back {
+      .card-header-actions-visible();
     }
 
     .card-header {
       display: block;
-      margin: 0 40px !important;
+      margin: 0 @size-40 !important;
     }
 
     .card-actions {
@@ -121,31 +194,13 @@
       height: auto !important;
     }
 
-    .smart-rule-details {
-      height: calc(~'100% - 88px');
-
-      .row {
-        margin: 0;
-      }
-
-      .col-sm-3,
-      .col-sm-9 {
-        padding: 0 @margin-8;
-        width: 100%;
-      }
-    }
+    .smart-rule-details-layout(@size-8);
   }
 }
 
 .interact-grid {
   .smart-rule-list-card {
-    .card-header-actions {
-      display: flex;
-
-      + .card-inner-scroll:before {
-        display: block;
-      }
-    }
+    .card-header-actions-visible();
 
     .collapse {
       //display: block;
@@ -153,7 +208,7 @@
     }
 
     .smart-rule-details {
-      height: calc(~'100% - 88px');
+      height: ~'calc(100% - 88px)';
 
       .row {
         margin: 0;
@@ -165,38 +220,17 @@
         width: 100%;
       }
 
-      .audit-list {
-        margin: 0 calc(@component-padding * -1);
-
-        .table tr {
-          td:first-child,
-          th:first-child {
-            padding-left: @component-padding;
-          }
-
-          td:last-child,
-          th:last-child {
-            padding-right: @component-padding;
-          }
-        }
-      }
+      .audit-list-table-padding(@component-padding);
     }
 
-    .card-actions.collapsible {
-      width: 40px;
-
-      + .card-header {
-        display: block;
-        margin: 0 40px;
-      }
-    }
+    .collapsible-card-header(@size-40);
   }
 }
 
 @media (min-width: @screen-sm-min) {
   .interact-list {
     .smart-rule-list-card {
-      padding-right: @margin-8;
+      padding-right: @size-8;
       background-color: @component-background-default;
       box-shadow: inset 0 -1px 0 @component-border-color;
 
@@ -224,14 +258,7 @@
 
         .card-icon {
           display: none;
-
-          i {
-            vertical-align: bottom;
-          }
-
-          span {
-            vertical-align: middle;
-          }
+          .card-icon-alignment();
         }
       }
 
@@ -239,15 +266,14 @@
       .card-back {
         margin-bottom: 0;
         background-color: transparent;
-
-        .box-shadow(none);
+        box-shadow: none;
       }
 
       .card-block {
         display: flex;
         flex-flow: row nowrap;
         padding: 0;
-        min-height: calc(@margin-base * 3 - 1);
+        min-height: calc(@size-base * 3 - 1);
 
         > .smart-rule-name {
           display: none;
@@ -259,7 +285,7 @@
         align-items: center;
         flex: 0 0 4%;
         order: 0;
-        padding: 0 10px;
+        padding: 0 @size-10;
         min-width: 65px;
 
         .c8y-btn-checkbox {
@@ -275,7 +301,7 @@
         position: relative;
         flex: 0 0 175px;
         order: 1;
-        padding: 0 4px 0 4px;
+        padding: 0 @size-4 0 @size-4;
 
         .icon-spin {
           position: absolute;
@@ -295,7 +321,7 @@
 
       .smart-list-icon-label {
         order: 2;
-        margin: 0 @margin-8;
+        margin: 0 @size-8;
       }
 
       .smart-rule-description {
@@ -308,18 +334,15 @@
       }
 
       .card-actions {
-        top: 10px;
+        top: @size-10;
 
-        .btn-collapse {
-          display: block;
-        }
+        // Removed unused button selector - verified 0 usages: .btn-collapse
       }
 
       .card-back {
         position: static;
         display: inherit;
         overflow: hidden;
-        -webkit-transform: none;
         transform: none;
 
         .smart-rule-details {
@@ -345,7 +368,7 @@
   width: 100%;
 
   > label {
-    padding-left: @margin-8;
+    padding-left: @size-8;
   }
 
   .smart-rule-group {
@@ -360,6 +383,6 @@
 
   .smart-rule-description {
     flex: 0 0 auto;
-    max-width: calc(~'75% - 95px');
+    max-width: ~'calc(75% - 95px)';
   }
 }