@c8y/style/styles/_smartrules.less

Styles for Cumulocity IoT applications

.smart-rule-list-card {
  .card-header {
    .card-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      min-height: 40px;
    }
  }

  .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: 20px 0 10px 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;
    } 

    .card-icon {
      i {
        vertical-align: bottom;
      }

      span {
        vertical-align: middle;
      }
    }
  }

  .smart-rule-group-switch {
    order: 3;
    padding: 24px 0 8px;

    > .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: @margin-base !important;

    .card-back .card-header-actions {
      display: flex;

      + .card-inner-scroll:before {
        display: block;
      }
    }

    .card-header {
      display: block;
      margin: 0 40px !important;
    }

    .card-actions {
      position: absolute !important;
      top: 0;
      right: 0;
      width: auto;
    }

    .card-back.collapse {
      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%;
      }
    }
  }
}

.interact-grid {
  .smart-rule-list-card {
    .card-header-actions {
      display: flex;

      + .card-inner-scroll:before {
        display: block;
      }
    }

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

    .card-actions.collapsible {
      width: 40px;

      + .card-header {
        display: block;
        margin: 0 40px;
      }
    }
  }
}

@media (min-width: @screen-sm-min) {
  .interact-list {
    .smart-rule-list-card {
      padding-right: @margin-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;

          i {
            vertical-align: bottom;
          }

          span {
            vertical-align: middle;
          }
        }
      }

      .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(@margin-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 10px;
        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 4px 0 4px;

        .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 @margin-8;
      }

      .smart-rule-description {
        order: 3;
        text-align: left;

        .smart-rule-name {
          display: block;
        }
      }

      .card-actions {
        top: 10px;

        .btn-collapse {
          display: block;
        }
      }

      .card-back {
        position: static;
        display: inherit;
        overflow: hidden;
        -webkit-transform: none;
        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: @margin-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');
  }
}