@c8y/style/styles/components/_smartrules.less

Styles for Cumulocity IoT applications

/**
 * 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
.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 {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      min-height: @size-40;
    }
  }

  .card-actions {
    .btn-collapse {
      display: none;
    }
  }

  .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;
    }

    .smart-rule-icon-size(@size-20);

    .card-icon {
      .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 {
      .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;
    }

    .smart-rule-details-layout(@size-8);
  }
}

.interact-grid {
  .smart-rule-list-card {
    .card-header-actions-visible;

    .collapse {
      //display: block;
      height: auto !important;
    }

    .smart-rule-details {
      height: calc(~'100% - 88px');

      .row {
        margin: 0;
      }

      .col-sm-3,
      .col-sm-9 {
        padding: 0 @component-padding;
        width: 100%;
      }

      .audit-list-table-padding(@component-padding);
    }

    .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;
          .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;

        .btn-collapse {
          display: block;
        }
      }

      .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(~'75% - 95px');
  }
}