webapp/src/app/pages/dashboard/status-card/status-card.component.scss

   1 @import '../../../@theme/styles/themes';
   2 @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
   3
   4 @include nb-install-component() {
   5   nb-card {
   6     flex-direction: row;
   7     align-items: center;
   8     height: 6rem;
   9     overflow: visible;
  10
  11     $bevel: btn-hero-bevel(nb-theme(card-bg));
  12     $shadow: nb-theme(btn-hero-shadow);
  13     box-shadow: $bevel, $shadow;
  14
  15     .icon-container {
  16       height: 100%;
  17       padding: 0.625rem;
  18     }
  19
  20     .icon {
  21       display: flex;
  22       align-items: center;
  23       justify-content: center;
  24       width: 5.75rem;
  25       height: 4.75rem;
  26       font-size: 3.75rem;
  27       border-radius: nb-theme(card-border-radius);
  28       transition: width 0.4s ease;
  29       transform: translate3d(0, 0, 0);
  30       -webkit-transform-style: preserve-3d;
  31       -webkit-backface-visibility: hidden;
  32       color: nb-theme(color-white);
  33
  34       &.primary {
  35         @include btn-hero-primary-gradient();
  36         @include btn-hero-primary-bevel-glow-shadow();
  37       }
  38       &.success {
  39         @include btn-hero-success-gradient();
  40         @include btn-hero-success-bevel-glow-shadow();
  41       }
  42       &.info {
  43         @include btn-hero-info-gradient();
  44         @include btn-hero-info-bevel-glow-shadow();
  45       }
  46       &.warning {
  47         @include btn-hero-warning-gradient();
  48         @include btn-hero-warning-bevel-glow-shadow();
  49       }
  50     }
  51
  52     &:hover {
  53       background: lighten(nb-theme(card-bg), 5%);
  54
  55       .icon {
  56         &.primary {
  57           background-image: btn-hero-primary-light-gradient();
  58         }
  59         &.success {
  60           background-image: btn-hero-success-light-gradient();
  61         }
  62         &.info {
  63           background-image: btn-hero-info-light-gradient();
  64         }
  65         &.warning {
  66           background-image: btn-hero-warning-light-gradient();
  67         }
  68       }
  69     }
  70
  71     &.off {
  72       color: nb-theme(card-fg);
  73
  74       .icon {
  75         color: nb-theme(card-fg);
  76
  77         &.primary, &.success, &.info, &.warning {
  78           box-shadow: none;
  79           background-image: linear-gradient(to right, transparent, transparent);
  80         }
  81       }
  82
  83       .title {
  84         color: nb-theme(card-fg);
  85       }
  86     }
  87
  88     .details {
  89       display: flex;
  90       flex-direction: column;
  91       justify-content: center;
  92       height: 100%;
  93       padding: 0 0.5rem 0 0.75rem;
  94       border-left: 1px solid transparent;
  95     }
  96
  97     .title {
  98       font-family: nb-theme(font-secondary);
  99       font-size: 1.25rem;
 100       font-weight: nb-theme(font-weight-bold);
 101       color: nb-theme(card-fg-heading);
 102     }
 103
 104     .status {
 105       font-size: 1rem;
 106       font-weight: nb-theme(font-weight-light);
 107       text-transform: uppercase;
 108       color: nb-theme(card-fg);
 109     }
 110   }
 111
 112   @include nb-for-theme(cosmic) {
 113     nb-card {
 114       &.off .icon-container {
 115         border-right: 1px solid nb-theme(separator);
 116       }
 117
 118       .icon-container {
 119         padding: 0;
 120       }
 121
 122       .details {
 123         padding-left: 1.25rem;
 124       }
 125
 126       .icon {
 127         width: 7rem;
 128         height: 100%;
 129         font-size: 4.5rem;
 130         border-radius: nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius);
 131       }
 132
 133       .title {
 134         font-weight: nb-theme(font-weight-bolder);
 135       }
 136
 137       .status {
 138         font-weight: nb-theme(font-weight-light);
 139       }
 140     }
 141   }
 142 }