bluesky-bootstrap-theme/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;
}

@mixin card-color($background-color, $text-color) {
  & > .card-header { background-color: $background-color; color:$text-color; }
}

@mixin alert-color($background-color) {
  background-color: lighten($background-color, 35%);
  color: darken($background-color, 80%);
}

/* 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);
    }
}

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

.card {
  &-blue { @include card-color($color-blue, #FFF); }
  &-violet { @include card-color($color-violet, #FFF); }
  &-purple { @include card-color($color-purple, #FFF); }
  &-red { @include card-color($color-red, #FFF); }
  &-orange { @include card-color($color-orange, #FFF); }
  &-green { @include card-color($color-green, #FFF); }
  &-skyblue { @include card-color($color-skyblue, #FFF); }
  &-dark { @include card-color($color-dark, #FFF); }
  &-light { @include card-color($color-light, #111); }
  &-turquoise { @include card-color($color-turquoise, #FFF); }
  &-yellow { @include card-color($color-yellow, #FFF); }
  &-brown { @include card-color($color-brown, #FFF); }
  &-grey { @include card-color($color-grey, #FFF); }

  &-primary { @include card-color($color-primary, #FFF); }
  &-secondary { @include card-color($color-secondary, #FFF); }
  &-warning { @include card-color($color-warning, #FFF); }
  &-danger { @include card-color($color-danger, #FFF); }
  &-info { @include card-color($color-info, #FFF); }
  &-success { @include card-color($color-success, #FFF); }
}

/* 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);
}

.alert a, .alert-link {
  color:rgba(0, 0, 0, 0.7);
  font-weight:bold;
}

.alert {
  &-blue { @include alert-color($color-blue); }
  &-violet { @include alert-color($color-violet); }
  &-purple { @include alert-color($color-purple); }
  &-red { @include alert-color($color-red); }
  &-orange { @include alert-color($color-orange); }
  &-green { @include alert-color($color-green); }
  &-skyblue { @include alert-color($color-skyblue); }
  &-dark { @include alert-color($color-dark); }
  &-light { @include alert-color($color-light); }
  &-turquoise { @include alert-color($color-turquoise); }
  &-yellow { @include alert-color($color-yellow); }
  &-brown { @include alert-color($color-brown); }
  &-grey { @include alert-color($color-grey); }

  &-primary { @include alert-color($color-primary); }
  &-secondary { @include alert-color($color-secondary); }
  &-warning { @include alert-color($color-warning); }
  &-danger { @include alert-color($color-danger); }
  &-info { @include alert-color($color-info); }
  &-success { @include alert-color($color-success); }
}