@c8y/style/styles/_card-dashboard.less

Styles for Cumulocity IoT applications

.card.card-dashboard {
  fill: @component-color-default;

  .card-title,
  .card-title span {
    .text-truncate();
    color: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
    pointer-events: none;
  }

  .card-title {
    display: flex;
  }

  c8y-dashboard-child-title {
    max-width: 100%;
    min-width: 0;
  }


  >.card-inner-scroll {
    position: relative;
    z-index: 9;
    height: calc(~'100% - @{margin-48}');
    color: @component-color-default;
    container-type: size;

    &:before {
      background: @component-background-default;
    }

    &.has-footer {
      height: calc(~'100% - @{margin-48} - @{margin-16} - @{form-control-height-base} - @{margin-16}'
      );
    }

    >.component-map {
      position: relative;
      z-index: 11;
      height: 100%;
    }
  }

  >.fixed-header {
    .table {
      margin-bottom: 0;
    }

    +.card-inner-scroll {
      height: calc(~'100% - 125px');
    }

    &.datepicker {
      padding-top: 5px;

      +.card-inner-scroll {
        height: calc(~'100% - 174px');
      }
    }
  }

  >.card-header-actions-no-title+.card-inner-scroll {
    height: 100%;
  }

  .card {
    margin-bottom: 0;

    .box-shadow(none);

    .card-inner-scroll {
      overflow: visible;
    }
  }

  .card-header-actions {
    .card-title {
      opacity: 1;
    }

    &.drag-handle:hover {
      .header-actions {
        .optionsBtn {
          color: @component-color-actions;
          opacity: 1;
        }

        .drag-handle {
          opacity: 1;
        }
      }

      .card-title,
      .card-title span {
        opacity: 1;
      }
    }
  }

  .card-inner-scroll {
    >* {
      padding-top: 0;
    }

    >[c8y-html-widget]>table,
    .table {
      margin: 0;

      td:first-child,
      th:first-child {
        padding-left: @component-padding;
      }

      td:last-child,
      th:last-child {
        padding-right: @component-padding;
      }
    }
  }

  group-assignment,
  c8y-device-status {
    display: block;
    height: 100%;
  }
}

.grid-stack-item .card+.ui-resizable-handle {
  margin-bottom: calc(@margin-base * -1);
}

.grid-stack>.grid-stack-item>.grid-stack-item-content {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: visible !important;
}

@media (max-width: @screen-sm-min) {
  .grid-stack-item {
    margin-bottom: 0 !important;
  }
}