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;
}
}
|
