roleplay.css/scss/components/_cards.scss

// Mixin and colors

$card-color-default: white;

@mixin card-self-contained() {
    @include card-container();
    background-color:$card-color-default;
}

@mixin card-container() {
    @include border-radius();
    box-shadow: $large-shadow;
    border: none;
    margin-bottom: $baselinerem;
    background-color:transparent;
}

@mixin card-element() {
    border:0;
    border-radius:0;
    background-color:$card-color-default;

    &:first-child {
        @include border-radius-top($border-radius);
    }

    &:last-child {
        @include border-radius-bottom($border-radius);
    }

    &:only-child {
        @include border-radius();
    }
}

@mixin card-relief {
    .card-body:last-child {
        box-shadow: $large-shadow, $inset-shadow;
    }

    box-shadow: $large-shadow, $inset-shadow;
}

// CARD COLORIZATION

@mixin colorize-card() {
    @each $name, $color in list-colors() {
        &-#{$name} { @include card-color(get-color($name), #FFF, #000); }
    }
}

@mixin card-color($background-color, $light-color, $dark-color) {
  & > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
  &.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
}

// ALERT COLORIZATION

@mixin colorize-alert() {
  @each $name, $color in list-colors() {
        &-#{$name} { @include alert-color(get-color($name)); }
    }
}

@mixin alert-color($background-color) {
  background-color: lighten($background-color, 35%);
  @if (luminance($background-color) > 128 * 0.8) {
    color: darken($background-color, 70%);
    a, .alert-link {
      color:darken($background-color, 70%);
      font-weight:bold;
    }
  } @else {
    color: lighten($background-color, 80%);
    a, .alert-link {
      color:lighten($background-color, 85%);
      font-weight:bold;
    }
  }

}

/* 10.1 - Cards */

.card {
    @include card-container();

    h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
	   color:#333;
	   text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    }

    @include colorize-card();
}

.card-body {
    @include card-element();
}

/* 10.1.1 - Headers */

.card-header, .card-footer {
    @include card-element();
    @include borders();
    font-size:1.1em;
    box-shadow: $inset-relief;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    font-weight:600;
    border-radius: 0;

    h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
        font-size:1em;
        text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
        padding:0px;
        margin:0px;
        color:#FFF;
        font-weight:600;
        line-height:1.5em;
    }
}

/* 10.1.2 - Meta */

.card-meta {
  padding:1em;
    @include card-element();
  border-bottom: $border-size solid rgba(0,0,0,0.2);

  &.media {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .media-left .media-object {
	  height: 64px;
	  width: 64px;
	  border-radius: 10px;
    margin-right: $baselinerem;
  }


  author {
	  display:block;
	  font-weight:600;
  }

  time {
  	display:block;
  	font-style:italic;
  }
}

/* 10.1.3 - Lists */

.list-group {
    @include card-element();
}

.list-group-item {
	border: none;
	background-color:transparent;
}

a.list-group-item:hover {
	border-style:none;
	border-width:0px;
	border-radius:0px;
	background-color:rgba(0,0,0,0.1);
}

/* 10.2 - Breadcrumb */

.breadcrumb {
  @include card-relief();
  @include li-no-margin();
  background-color:#eeeeec;
}

/* 10.3 - Alerts */

.alert {
  @include card-self-contained();
  color:rgba(0, 0, 0, 0.7);

  @include colorize-alert();
}