react-toolbox/components/card/style.scss

@import "../variables";
@import "../mixins";

$card-color-white: unquote("rgb(#{$color-white})") !default;
$card-title-height: 17.6 * $unit;
$card-width-normal: 32 * $unit;
$card-width-large: 51.2 * $unit;
$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");

.figure {
  position: relative;
  display: flex;
  min-height: $card-title-height;
  flex-direction: column;
  background-position: center center;
  background-size: cover;
  justify-content: flex-end;
  > *:not(.overflow) {
    z-index: 1;
    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: 1.8 * $unit;
  color: $color-text-secondary;
}

.navigation {
  $offset: ($offset / 2);
  padding: $offset;
  > * {
    min-width: 0;
    padding-right: $offset;
    padding-left: $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;
  // -- Children
  > *:not(.navigation) {
    padding: $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 {
    width: 2 * $card-width-normal;
    height: 2 * $card-width-normal;
  }
}

.image {
  &, .figure {
    height: $card-width-normal;
  }
  .figure {
    padding: 0;
    > h2 {
      padding: $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;
}