react-toolbox/components/card/style.scss

@import "../base";
@import "./config";

.figure {
  position: relative;
  display: flex;
  min-height: $card-title-height;
  flex-direction: column;
  justify-content: flex-end;
  background-position: center center;
  background-size: cover;
  > *:not(.overflow) {
    z-index: $z-index-normal;
    font-weight: $font-weight-normal;
  }
  > .overflow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: .75;
  }
}

.text {
  font-size: $font-size-small;
  line-height: $font-size-big;
  color: $color-text-secondary;
}

.navigation {
  padding: $card-navigation-offset;
  > * {
    min-width: 0;
    padding-right: $card-navigation-offset;
    padding-left: $card-navigation-offset;
  }
}

.ripple {
  background-color: $color-text-secondary;
}

.root {
  @include shadow-2dp();
  position: relative;
  display: flex;
  width: $card-width-normal;
  flex-direction: column;
  overflow: hidden;
  vertical-align: top;
  background: $color-background;
  > *:not(.navigation) {
    padding: $card-offset;
  }
  &:not(.color) > *:not(.figure), > *:not(:last-child) {
    box-shadow: 0 1px $color-divider;
  }
}

.touch {
  cursor: pointer;
}

.contrast {
  .figure {
    color: $card-color-white;
    text-shadow: 0;
  }
  .ripple {
    background-color: $card-color-white;
  }
}

.loading {
  pointer-events: none;
  cursor: none;
  filter: grayscale(100%);
  .ripple {
    @include ripple-loading(cardloading, 2 * $card-width-normal, 2 * $card-width-normal);
    width: 2 * $card-width-normal;
    height: 2 * $card-width-normal;
    animation-name: cardloading;
  }
}

.image {
  &, .figure {
    height: $card-width-normal;
  }
  .figure {
    padding: 0;
    > h5 {
      padding: $card-offset;
      font-size: $font-size-small;
      font-weight: $font-weight-bold;
      background-color: $card-text-overlay;
    }
  }
}

.event {
  .figure {
    justify-content: flex-start;
  }
}

.wide {
  width: $card-width-large;
}