accounts-grid-list.component.scss

:host {
  display: block;
  padding: 1.5%;
  position: relative;
}

.fix-height {
  position: relative;
  top: 0;
  max-height: 52vh;
  margin: auto;
  padding: 0;
  overflow: auto;
}

@import '~@angular/material/theming';

/* Toolbar
-------------------------------------------------- */
mat-toolbar {
  padding: 8px 24px 0;
}

mat-form-field {
  font-size: 16px;
}

/* Card
-------------------------------------------------- */
mat-grid-tile {
  mat-card {
    width: calc(100% - 70px);
    height: calc(100% - 70px);
    @include mat-elevation(2);

    //@include mat-elevation-transition;
    transition: transform 0.25s ease;

    &:hover {
      cursor: pointer;
      @include mat-elevation(6);
      //box-shadow: 0 15px 37px 0 #dbe2eb;
      transform: translateY(-1rem);
    }

    &.active {
      @include mat-elevation(8);
    }

    .mat-card-title,
    .mat-card-subtitle {
      white-space: nowrap;
      width: 30em;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.mat-bg-primary {
      background: #3f51b5 !important;
      color: #fff !important;
    }
    &.mat-bg-accent {
      background-color: #ffc107;
      color: #000;
    }
    &.mat-bg-warn {
      background-color: #f44336;
      color: #fff;
    }
  }
}

/* List
-------------------------------------------------- */
mat-list-item {
  //position: relative; // For mdRipple
  &:hover {
    cursor: pointer;
    background: #f5f5f5;
  }
  &.active {
    background: #eaeaea;
  }

  .subline {
    color: #999999;
  }
}

//@mixin md-icon-size($size: 24px) {
//  font-size: $size;
//  height: $size;
//  width: $size;
//}
//
//.mat-icon {
//  @include md-icon-size(16px);
//}