ngx-admin/src/app/pages/dashboard/status-card/status-card.component.scss

@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';

@include nb-install-component() {
  nb-card {
    flex-direction: row;
    align-items: center;
    height: 6rem;
    overflow: visible;

    $bevel: btn-hero-bevel(nb-theme(card-bg));
    $shadow: nb-theme(btn-hero-shadow);
    box-shadow: $bevel, $shadow;

    .icon-container {
      height: 100%;
      padding: 0.625rem;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5.75rem;
      height: 4.75rem;
      font-size: 3.75rem;
      border-radius: nb-theme(card-border-radius);
      transition: width 0.4s ease;
      transform: translate3d(0, 0, 0);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      color: nb-theme(color-white);

      &.primary {
        @include btn-hero-primary-gradient();
        @include btn-hero-primary-bevel-glow-shadow();
      }
      &.success {
        @include btn-hero-success-gradient();
        @include btn-hero-success-bevel-glow-shadow();
      }
      &.info {
        @include btn-hero-info-gradient();
        @include btn-hero-info-bevel-glow-shadow();
      }
      &.warning {
        @include btn-hero-warning-gradient();
        @include btn-hero-warning-bevel-glow-shadow();
      }
    }

    &:hover {
      background: lighten(nb-theme(card-bg), 5%);

      .icon {
        &.primary {
          background-image: btn-hero-primary-light-gradient();
        }
        &.success {
          background-image: btn-hero-success-light-gradient();
        }
        &.info {
          background-image: btn-hero-info-light-gradient();
        }
        &.warning {
          background-image: btn-hero-warning-light-gradient();
        }
      }
    }

    &.off {
      color: nb-theme(card-fg);

      .icon {
        color: nb-theme(card-fg);

        &.primary, &.success, &.info, &.warning {
          box-shadow: none;
          background-image: linear-gradient(to right, transparent, transparent);
        }
      }

      .title {
        color: nb-theme(card-fg);
      }
    }

    .details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
      @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
      border-left: 1px solid transparent;
    }

    .title {
      font-family: nb-theme(font-secondary);
      font-size: 1.25rem;
      font-weight: nb-theme(font-weight-bold);
      color: nb-theme(card-fg-heading);
    }

    .status {
      font-size: 1rem;
      font-weight: nb-theme(font-weight-light);
      text-transform: uppercase;
      color: nb-theme(card-fg);
    }
  }

  @include nb-for-theme(cosmic) {
    nb-card {
      &.off .icon-container {
        @include nb-ltr(border-right, 1px solid nb-theme(separator));
        @include nb-rtl(border-left, 1px solid nb-theme(separator));
      }

      .icon-container {
        padding: 0;
      }

      .details {
        @include nb-ltr(padding-left, 1.25rem);
        @include nb-rtl(padding-right, 1.25rem);
      }

      .icon {
        width: 7rem;
        height: 100%;
        font-size: 4.5rem;
        @include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
        @include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
      }

      .title {
        font-weight: nb-theme(font-weight-bolder);
      }

      .status {
        font-weight: nb-theme(font-weight-light);
      }
    }
  }
}