_cards.scss

// Foundation Components
// Licensed under MIT Open Source

////
/// @group cards
////

/// Border color of a card.
/// @type color
$card-border-color: $light-gray !default;

/// Header background color of a card.
/// @type color
$card-header-background-color: $light-gray !default;

/// Padding of a card.
/// @type Number
$card-padding: $global-padding !default;

/// Padding of a card.
/// @type Shadow
$card-shadow: none !default;

$card-border-radius: $global-radius !default;

@mixin card-base() {
  display: flex;
  border: {
    color: $light-gray;
    radius: $card-border-radius;
    style: solid;
    width: 1px;
  }
  box-shadow: $card-shadow;
  flex-direction: column;
  flex-grow: 1;
  padding: $card-padding;
  @if $card-border-radius > 0 {
    overflow: hidden;
  }

  @each $breakpoint, $value in $grid-column-gutter {
    $padding: rem-calc($value);

    @include breakpoint($breakpoint) {
      margin-bottom: $padding;
    }
  }

  .card-block {
    flex-grow: 1;
  }

  .card-header {
    border-bottom: 1px solid $card-border-color;
    background-color: $card-header-background-color;
    padding: $card-padding;


    .card-title {
      margin-bottom: 0;
    }
  }

  .card-button {
    .button {
      margin-bottom: 0;
    }
  }

  .card-header, .card-image, .card-button, .card-footer {
    margin: 0 -$card-padding;
    &:first-child {
      margin: {
        left: -$card-padding;
        right: -$card-padding;
        bottom: 0;
        top: -$card-padding;
      }
    }
    &:last-child {
      margin: {
        left: -$card-padding;
        right: -$card-padding;
        top: 0;
        bottom: -$card-padding;
      }
    }
  }
}

@mixin card-flex-row() {
  .column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

@mixin foundation-comp-cards {
  .card {
    @include card-base();
  }

  .cards {
    @if $global-flexbox {
      @include card-flex-row();
    }
  }
}