vue-material/src/components/mdCard/mdCard.theme

.THEME_NAME {
  &.md-card {
    background-color: #{'BACKGROUND-COLOR-A100'};

    &.md-primary {
      background-color: #{'PRIMARY-COLOR'};
      color: #{'PRIMARY-CONTRAST'};

      .md-card-header,
      .md-card-actions {
        .md-icon-button {
          .md-icon {
            color: #{'PRIMARY-CONTRAST-0.87'};
          }
        }
      }
    }

    &.md-accent {
      background-color: #{'ACCENT-COLOR'};
      color: #{'ACCENT-CONTRAST'};

      .md-card-header,
      .md-card-actions {
        .md-icon-button {
          .md-icon {
            color: #{'ACCENT-CONTRAST-0.87'};
          }
        }
      }
    }

    &.md-warn {
      background-color: #{'WARN-COLOR'};
      color: #{'WARN-CONTRAST'};

      .md-card-header,
      .md-card-actions {
        .md-icon-button {
          .md-icon {
            color: #{'WARN-CONTRAST-0.87'};
          }
        }
      }
    }

    .md-card-header,
    .md-card-actions {
      .md-icon-button {
        .md-icon {
          color: #{'BACKGROUND-CONTRAST-0.54'};
        }
      }
    }

    > .md-card-area {
      &:after {
        background-color: #{'BACKGROUND-CONTRAST-0.12'};
      }
    }

    .md-card-media-cover {
      &.md-text-scrim {
        .md-backdrop {
          background: linear-gradient(to bottom, #{'BACKGROUND-CONTRAST-0.0'} 20%, #{'BACKGROUND-CONTRAST-0.275'} 66%, #{'BACKGROUND-CONTRAST-0.55'} 100%);
        }
      }

      &.md-solid {
        .md-card-area {
          background-color: #{'BACKGROUND-CONTRAST-0.4'};
        }
      }
    }

    .md-card-expand {
      .md-card-actions {
        background-color: #{'BACKGROUND-COLOR-A100'};
      }
    }
  }
}