summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/foundation-apps/scss/components/_card.scss
blob: e085373e81f5984178881fd0c230ee8c97d5903e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/*
  Cards

  Structure:

  titles
  lists
*/

/// @Foundation.settings
// Card
$card-background: #fff !default;
$card-color: isitlight($card-background) !default;
$card-border: 1px solid smartscale($card-background, 7%) !default;
$card-radius: $global-radius !default;
$card-shadow: 0 1px 2px rgba(#000, 0.2) !default;
$card-padding: $global-padding !default;
$card-margin: 0.5rem !default;

$card-divider-background: smartscale($card-background, 7%) !default;
///

@mixin card-container(
  $background: $card-background,
  $color: $card-color,
  $border: $card-border,
  $radius: $card-radius,
  $shadow: $card-shadow,
  $padding: $card-padding,
  $margin: $card-margin
) {
  border: $border;
  margin-bottom: $margin;
  background: $background;
  color: $color;
  border-radius: $radius;
  box-shadow: $shadow;
  overflow: hidden;

  h1, h2, h3, h4, h5, h6 {
    color: inherit;
  }

  ul {
    margin-bottom: 0;
  }

  img {
    width: 100%;
  }
}

@mixin card-divider(
  $background: $card-divider-background,
  $padding: $card-padding
) {
  background: $background;
  padding: $padding;
}

@mixin card-section(
  $padding: $card-padding
) {
  padding: $padding;
}

@include exports(card) {
  .card {
    @include card-container;

    @each $color in map-keys($foundation-colors) {
      &.#{$color} {
        $color-value: map-get($foundation-colors, $color);
        @include card-container(
          $background: $color-value,
          $color: isitlight($color-value),
          $border: 0
        );
        .card-divider {
          @include card-divider(
            $background: smartscale($color-value, 7%)
          );
        }
      }
    }
  }
    .card-divider {
      @include card-divider;
    }
    .card-section {
      @include card-section;
    }
}