@c8y/style/styles/_c8y-empty-state.less

Styles for Cumulocity IoT applications

.c8y-empty-state {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  color: @component-color-text-muted;
  text-align: center;
  > .c8y-icon,
  > [class^='dlt-c8y-icon-'],
  > [class*=' dlt-c8y-icon-'] {
    margin-bottom: @margin-base;
    color: @component-color-text-muted;
    font-size: 90px;
    opacity: 0.6;
    .dashboard.dashboard-theme-dark & {
      color: @component-background-default;
    }
    .dashboard.dashboard-theme-branded & {
      color: @component-background-default;
    }
  }
  .btn-link {
    .btn-primary();
  }

  p, .btn{
    margin-bottom: @margin-base;
  }

  .dashboard.dashboard-theme-branded & {
    .btn-primary {
      .btn-default();
    }
    a {
      color: @component-color-default;
      text-decoration: underline;
    }
  }

  &.empty-list {
    display: flex;
    flex-flow: row nowrap;
    text-align: left;
    > .c8y-icon,
    > [class^='dlt-c8y-icon-'],
    > [class*=' dlt-c8y-icon-'] {
      flex: 0 0 auto;
      margin-right: 5px;
      color: @component-color-text-muted;
      font-size: 30px;
    }
    p {
      align-self: center;
      flex: 1 1 auto;
      margin-bottom: 0;
      color: @component-color-text-muted;
    }
  }
  &--horizontal {
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
    padding: @margin-base;
    max-width: 100%;
    text-align: left !important;
    > .c8y-icon,
    > [class^='dlt-c8y-icon-'],
    > [class*=' dlt-c8y-icon-'] {
      flex: 0 0 auto;
      margin-right: 4px;
      margin-bottom: 0;
      font-size: 30px;
    }
    h3 {
      align-self: center;
      font-size: inherit;
    }
    p {
      align-self: center;
      flex: 0 1 auto;
      margin-bottom: 0;
      color: @component-color-text-muted;
    }
  }
  .card-block .c8y-empty-state {
    padding: @margin-base 0;
  }
}

.panel,
.card,
.c8y-nav-stacked,
.c8y-list__item,
td,
.modal-content,
.smart-rest-editor {
  .c8y-empty-state {
    display: flex;
    flex-flow: row nowrap;
    margin-left: 0;
    padding: @margin-base;
    text-align: left !important;
    > .c8y-icon,
    > [class^='dlt-c8y-icon-'],
    > [class*=' dlt-c8y-icon-'] {
      flex: 0 0 45px;
      margin-right: 5px;
      margin-bottom: 0;
      font-size: 30px;
    }
    h3 {
      align-self: center;
      margin-right: 5px;
      font-weight: bold;
      font-size: inherit;
    }
    p {
      align-self: center;
      flex: 0 1 auto;
      margin-bottom: 0;
      color: @component-color-text-muted;
    }
  }
  .card-block .c8y-empty-state {
    padding: @margin-base 0;
  }
}

.c8y-nav-stacked,
.smart-rest-editor {
  .c8y-empty-state {
    padding: 0;
  }
}

.no-results {
  padding-top: @component-padding;
  text-align: center;
  .c8y-empty-state {
    display: inline-block;
    max-width: 280px;
    text-align: center !important;
  }
}

@media (max-width: @screen-xs) {
  .c8y-empty-state:not(.c8y-empty-state--horizontal) {
    padding: 8rem 4rem;
  }
}