UNPKG

2.47 kBSCSSView Raw
1// Foundation for Sites by ZURB
2// foundation.zurb.com
3// Licensed under MIT Open Source
4
5////
6/// @group card
7////
8
9/// Defualt background color.
10/// @type Color
11$card-background: $white !default;
12
13/// Default font color for cards.
14/// @type Color
15$card-font-color: $body-font-color !default;
16
17/// Default background.
18/// @type Color
19$card-divider-background: $light-gray !default;
20
21/// Default border style.
22/// @type List
23$card-border: 1px solid $light-gray !default;
24
25/// Default card shadow.
26/// @type List
27$card-shadow: none !default;
28
29/// Default border radius.
30/// @type List
31$card-border-radius: $global-radius !default;
32
33/// Default padding.
34/// @type Number
35$card-padding: $global-padding !default;
36
37/// Default bottom margin.
38/// @type number
39$card-margin-bottom: $global-margin !default;
40
41/// Adds styles for a card container.
42/// @param {Color} $background - Background color of the card.
43/// @param {Color} $color - font color of the card.
44/// @param {Number} $margin - Bottom margin of the card.
45/// @param {List} $border - Border around the card.
46/// @param {List} $radius - border radius of the card.
47/// @param {List} $shadow - box shadow of the card.
48@mixin card-container(
49 $background: $card-background,
50 $color: $card-font-color,
51 $margin: $card-margin-bottom,
52 $border: $card-border,
53 $radius: $card-border-radius,
54 $shadow: $card-shadow
55) {
56 @if $global-flexbox {
57 display: flex;
58 flex-direction: column;
59 flex-grow: 1;
60 }
61
62 margin-bottom: $margin;
63
64 border: $border;
65 border-radius: $radius;
66
67 background: $background;
68 box-shadow: $shadow;
69
70 overflow: hidden;
71 color: $color;
72
73 & > :last-child {
74 margin-bottom: 0;
75 }
76}
77
78/// Adds styles for a card divider.
79@mixin card-divider(
80 $background: $card-divider-background,
81 $padding: $card-padding
82) {
83 @if $global-flexbox {
84 flex: 0 1 auto;
85 display: flex;
86 }
87
88 padding: $padding;
89 background: $background;
90
91 & > :last-child {
92 margin-bottom: 0;
93 }
94}
95
96/// Adds styles for a card section.
97@mixin card-section(
98 $padding: $card-padding
99) {
100 @if $global-flexbox {
101 flex: 1 0 auto;
102 }
103
104 padding: $padding;
105
106 & > :last-child {
107 margin-bottom: 0;
108 }
109}
110
111@mixin foundation-card {
112 .card {
113 @include card-container;
114 }
115
116 .card-divider {
117 @include card-divider;
118 }
119
120 .card-section {
121 @include card-section;
122 }
123
124 // For IE 11 - Flexbug
125 // https://github.com/philipwalton/flexbugs/issues/75
126 .card-image {
127 min-height: 1px;
128 }
129}