afb-client/bower_components/foundation-apps/scss/components/_card.scss

   1 /*
   2   Cards
   3
   4   Structure:
   5
   6   titles
   7   lists
   8 */
   9
  10 /// @Foundation.settings
  11 // Card
  12 $card-background: #fff !default;
  13 $card-color: isitlight($card-background) !default;
  14 $card-border: 1px solid smartscale($card-background, 7%) !default;
  15 $card-radius: $global-radius !default;
  16 $card-shadow: 0 1px 2px rgba(#000, 0.2) !default;
  17 $card-padding: $global-padding !default;
  18 $card-margin: 0.5rem !default;
  19
  20 $card-divider-background: smartscale($card-background, 7%) !default;
  21 ///
  22
  23 @mixin card-container(
  24   $background: $card-background,
  25   $color: $card-color,
  26   $border: $card-border,
  27   $radius: $card-radius,
  28   $shadow: $card-shadow,
  29   $padding: $card-padding,
  30   $margin: $card-margin
  31 ) {
  32   border: $border;
  33   margin-bottom: $margin;
  34   background: $background;
  35   color: $color;
  36   border-radius: $radius;
  37   box-shadow: $shadow;
  38   overflow: hidden;
  39
  40   h1, h2, h3, h4, h5, h6 {
  41     color: inherit;
  42   }
  43
  44   ul {
  45     margin-bottom: 0;
  46   }
  47
  48   img {
  49     width: 100%;
  50   }
  51 }
  52
  53 @mixin card-divider(
  54   $background: $card-divider-background,
  55   $padding: $card-padding
  56 ) {
  57   background: $background;
  58   padding: $padding;
  59 }
  60
  61 @mixin card-section(
  62   $padding: $card-padding
  63 ) {
  64   padding: $padding;
  65 }
  66
  67 @include exports(card) {
  68   .card {
  69     @include card-container;
  70
  71     @each $color in map-keys($foundation-colors) {
  72       &.#{$color} {
  73         $color-value: map-get($foundation-colors, $color);
  74         @include card-container(
  75           $background: $color-value,
  76           $color: isitlight($color-value),
  77           $border: 0
  78         );
  79         .card-divider {
  80           @include card-divider(
  81             $background: smartscale($color-value, 7%)
  82           );
  83         }
  84       }
  85     }
  86   }
  87     .card-divider {
  88       @include card-divider;
  89     }
  90     .card-section {
  91       @include card-section;
  92     }
  93 }