foundation-scss 6.3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
- data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
- data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
- data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
- data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
- data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
- data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
- data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
- data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
- data/foundation-scss.gemspec +9 -0
- data/lib/foundation/scss/in/sass_path.rb +6 -0
- data/scss/_global.scss +219 -0
- data/scss/components/_accordion-menu.scss +36 -0
- data/scss/components/_accordion.scss +150 -0
- data/scss/components/_badge.scss +63 -0
- data/scss/components/_breadcrumbs.scss +100 -0
- data/scss/components/_button-group.scss +253 -0
- data/scss/components/_button.scss +332 -0
- data/scss/components/_callout.scss +106 -0
- data/scss/components/_card.scss +121 -0
- data/scss/components/_close-button.scss +102 -0
- data/scss/components/_drilldown.scss +93 -0
- data/scss/components/_dropdown-menu.scss +226 -0
- data/scss/components/_dropdown.scss +72 -0
- data/scss/components/_flex-video.scss +1 -0
- data/scss/components/_flex.scss +34 -0
- data/scss/components/_float.scss +27 -0
- data/scss/components/_label.scss +64 -0
- data/scss/components/_media-object.scss +114 -0
- data/scss/components/_menu-icon.scss +9 -0
- data/scss/components/_menu.scss +376 -0
- data/scss/components/_off-canvas.scss +329 -0
- data/scss/components/_orbit.scss +196 -0
- data/scss/components/_pagination.scss +193 -0
- data/scss/components/_progress-bar.scss +64 -0
- data/scss/components/_responsive-embed.scss +70 -0
- data/scss/components/_reveal.scss +178 -0
- data/scss/components/_slider.scss +138 -0
- data/scss/components/_sticky.scss +38 -0
- data/scss/components/_switch.scss +247 -0
- data/scss/components/_table.scss +329 -0
- data/scss/components/_tabs.scss +196 -0
- data/scss/components/_thumbnail.scss +67 -0
- data/scss/components/_title-bar.scss +84 -0
- data/scss/components/_tooltip.scss +107 -0
- data/scss/components/_top-bar.scss +173 -0
- data/scss/components/_visibility.scss +132 -0
- data/scss/forms/_checkbox.scss +41 -0
- data/scss/forms/_error.scss +88 -0
- data/scss/forms/_fieldset.scss +54 -0
- data/scss/forms/_forms.scss +34 -0
- data/scss/forms/_help-text.scss +30 -0
- data/scss/forms/_input-group.scss +135 -0
- data/scss/forms/_label.scss +50 -0
- data/scss/forms/_meter.scss +110 -0
- data/scss/forms/_progress.scss +94 -0
- data/scss/forms/_range.scss +149 -0
- data/scss/forms/_select.scss +85 -0
- data/scss/forms/_text.scss +170 -0
- data/scss/foundation.scss +118 -0
- data/scss/grid/_classes.scss +176 -0
- data/scss/grid/_column.scss +112 -0
- data/scss/grid/_flex-grid.scss +312 -0
- data/scss/grid/_grid.scss +48 -0
- data/scss/grid/_gutter.scss +82 -0
- data/scss/grid/_layout.scss +76 -0
- data/scss/grid/_position.scss +76 -0
- data/scss/grid/_row.scss +99 -0
- data/scss/grid/_size.scss +24 -0
- data/scss/settings/_settings.scss +620 -0
- data/scss/typography/_alignment.scss +22 -0
- data/scss/typography/_base.scss +509 -0
- data/scss/typography/_helpers.scss +78 -0
- data/scss/typography/_print.scss +86 -0
- data/scss/typography/_typography.scss +26 -0
- data/scss/util/_breakpoint.scss +281 -0
- data/scss/util/_color.scss +126 -0
- data/scss/util/_direction.scss +31 -0
- data/scss/util/_flex.scss +85 -0
- data/scss/util/_math.scss +72 -0
- data/scss/util/_mixins.scss +276 -0
- data/scss/util/_selector.scss +41 -0
- data/scss/util/_typography.scss +26 -0
- data/scss/util/_unit.scss +152 -0
- data/scss/util/_util.scss +14 -0
- data/scss/util/_value.scss +160 -0
- metadata +144 -0
@@ -0,0 +1,332 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group button
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Padding inside buttons.
|
10
|
+
/// @type List
|
11
|
+
$button-padding: 0.85em 1em !default;
|
12
|
+
|
13
|
+
/// Margin around buttons.
|
14
|
+
/// @type List
|
15
|
+
$button-margin: 0 0 $global-margin 0 !default;
|
16
|
+
|
17
|
+
/// Default fill for buttons. Can either be `solid` or `hollow`.
|
18
|
+
/// @type Keyword
|
19
|
+
$button-fill: solid !default;
|
20
|
+
|
21
|
+
/// Default background color for buttons.
|
22
|
+
/// @type Color
|
23
|
+
$button-background: $primary-color !default;
|
24
|
+
|
25
|
+
/// Background color on hover for buttons.
|
26
|
+
/// @type Color
|
27
|
+
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
|
28
|
+
|
29
|
+
/// Font color for buttons.
|
30
|
+
/// @type List
|
31
|
+
$button-color: $white !default;
|
32
|
+
|
33
|
+
/// Alternative font color for buttons.
|
34
|
+
/// @type List
|
35
|
+
$button-color-alt: $black !default;
|
36
|
+
|
37
|
+
/// Border radius for buttons, defaulted to global-radius.
|
38
|
+
/// @type Number
|
39
|
+
$button-radius: $global-radius !default;
|
40
|
+
|
41
|
+
/// Border width for hollow outline buttons
|
42
|
+
/// @type Number
|
43
|
+
$button-hollow-border-width: 1px !default;
|
44
|
+
|
45
|
+
/// Sizes for buttons.
|
46
|
+
/// @type Map
|
47
|
+
$button-sizes: (
|
48
|
+
tiny: 0.6rem,
|
49
|
+
small: 0.75rem,
|
50
|
+
default: 0.9rem,
|
51
|
+
large: 1.25rem,
|
52
|
+
) !default;
|
53
|
+
|
54
|
+
/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
|
55
|
+
/// @type Map
|
56
|
+
$button-palette: $foundation-palette !default;
|
57
|
+
|
58
|
+
/// opacity for a disabled button.
|
59
|
+
/// @type List
|
60
|
+
$button-opacity-disabled: 0.25 !default;
|
61
|
+
|
62
|
+
/// Background color lightness on hover for buttons.
|
63
|
+
/// @type Number
|
64
|
+
$button-background-hover-lightness: -20% !default;
|
65
|
+
|
66
|
+
/// Color lightness on hover for hollow buttons.
|
67
|
+
/// @type Number
|
68
|
+
$button-hollow-hover-lightness: -50% !default;
|
69
|
+
|
70
|
+
// Internal: flip from margin-right to margin-left for defaults
|
71
|
+
@if $global-text-direction == 'rtl' {
|
72
|
+
$button-margin: 0 0 $global-margin $global-margin !default;
|
73
|
+
}
|
74
|
+
|
75
|
+
/// transitions for buttons.
|
76
|
+
/// @type List
|
77
|
+
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
|
78
|
+
|
79
|
+
// TODO: Document button-base() mixin
|
80
|
+
@mixin button-base {
|
81
|
+
@include disable-mouse-outline;
|
82
|
+
display: inline-block;
|
83
|
+
vertical-align: middle;
|
84
|
+
margin: $button-margin;
|
85
|
+
|
86
|
+
@if (type-of($button-padding) == 'map') {
|
87
|
+
@each $size, $padding in $button-padding {
|
88
|
+
@include breakpoint($size) {
|
89
|
+
padding: $padding;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
@else {
|
94
|
+
padding: $button-padding;
|
95
|
+
}
|
96
|
+
|
97
|
+
-webkit-appearance: none;
|
98
|
+
border: 1px solid transparent;
|
99
|
+
border-radius: $button-radius;
|
100
|
+
transition: $button-transition;
|
101
|
+
|
102
|
+
font-size: map-get($button-sizes, default);
|
103
|
+
line-height: 1;
|
104
|
+
text-align: center;
|
105
|
+
cursor: pointer;
|
106
|
+
}
|
107
|
+
|
108
|
+
/// Expands a button to make it full-width.
|
109
|
+
/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
|
110
|
+
@mixin button-expand($expand: true) {
|
111
|
+
@if $expand {
|
112
|
+
display: block;
|
113
|
+
width: 100%;
|
114
|
+
margin-right: 0;
|
115
|
+
margin-left: 0;
|
116
|
+
}
|
117
|
+
@else {
|
118
|
+
display: inline-block;
|
119
|
+
width: auto;
|
120
|
+
margin: $button-margin;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
/// Sets the visual style of a button.
|
125
|
+
/// @param {Color} $background [$button-background] - Background color of the button.
|
126
|
+
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
|
127
|
+
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
|
128
|
+
@mixin button-style(
|
129
|
+
$background: $button-background,
|
130
|
+
$background-hover: $button-background-hover,
|
131
|
+
$color: $button-color,
|
132
|
+
$background-hover-lightness: $button-background-hover-lightness
|
133
|
+
) {
|
134
|
+
@if $color == auto {
|
135
|
+
$color: color-pick-contrast($background, ($button-color, $button-color-alt));
|
136
|
+
}
|
137
|
+
|
138
|
+
@if $background-hover == auto {
|
139
|
+
$background-hover: scale-color($background, $lightness: $background-hover-lightness);
|
140
|
+
}
|
141
|
+
|
142
|
+
background-color: $background;
|
143
|
+
color: $color;
|
144
|
+
|
145
|
+
&:hover, &:focus {
|
146
|
+
background-color: $background-hover;
|
147
|
+
color: $color;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
/// Removes background fill on hover and focus for hollow buttons.
|
152
|
+
@mixin button-hollow {
|
153
|
+
&,
|
154
|
+
&:hover, &:focus {
|
155
|
+
background-color: transparent;
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
@mixin button-hollow-style(
|
160
|
+
$color: $primary-color,
|
161
|
+
$hover-lightness: $button-hollow-hover-lightness,
|
162
|
+
$border-width: $button-hollow-border-width
|
163
|
+
) {
|
164
|
+
$color-hover: scale-color($color, $lightness: $hover-lightness);
|
165
|
+
|
166
|
+
border: $border-width solid $color;
|
167
|
+
color: $color;
|
168
|
+
|
169
|
+
&:hover, &:focus {
|
170
|
+
border-color: $color-hover;
|
171
|
+
color: $color-hover;
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
|
176
|
+
/// @param [Color] $background [$primary-color] - Background color of the disabled button.
|
177
|
+
/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
|
178
|
+
@mixin button-disabled(
|
179
|
+
$background: $primary-color,
|
180
|
+
$color: $button-color
|
181
|
+
) {
|
182
|
+
@if $color == auto {
|
183
|
+
$color: color-pick-contrast($background, ($button-color, $button-color-alt));
|
184
|
+
}
|
185
|
+
|
186
|
+
opacity: $button-opacity-disabled;
|
187
|
+
cursor: not-allowed;
|
188
|
+
|
189
|
+
&, &:hover, &:focus {
|
190
|
+
background-color: $background;
|
191
|
+
color: $color;
|
192
|
+
}
|
193
|
+
}
|
194
|
+
|
195
|
+
/// Adds a dropdown arrow to a button.
|
196
|
+
/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
|
197
|
+
/// @param {Color} $color [white] - Color of the arrow.
|
198
|
+
/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
|
199
|
+
@mixin button-dropdown(
|
200
|
+
$size: 0.4em,
|
201
|
+
$color: $white,
|
202
|
+
$offset: get-side($button-padding, right)
|
203
|
+
) {
|
204
|
+
&::after {
|
205
|
+
@include css-triangle($size, $color, down);
|
206
|
+
position: relative;
|
207
|
+
top: 0.4em; // Aligns the arrow with the text of the button
|
208
|
+
|
209
|
+
display: inline-block;
|
210
|
+
float: #{$global-right};
|
211
|
+
margin-#{$global-left}: get-side($button-padding, right);
|
212
|
+
}
|
213
|
+
}
|
214
|
+
|
215
|
+
/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
|
216
|
+
/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
|
217
|
+
/// @param {Color} $background [$button-background] - Background color of the button.
|
218
|
+
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
|
219
|
+
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
|
220
|
+
/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
|
221
|
+
@mixin button(
|
222
|
+
$expand: false,
|
223
|
+
$background: $button-background,
|
224
|
+
$background-hover: $button-background-hover,
|
225
|
+
$color: $button-color,
|
226
|
+
$style: $button-fill
|
227
|
+
) {
|
228
|
+
@include button-base;
|
229
|
+
|
230
|
+
@if $style == solid {
|
231
|
+
@include button-style($background, $background-hover, $color);
|
232
|
+
}
|
233
|
+
@else if $style == hollow {
|
234
|
+
@include button-hollow;
|
235
|
+
@include button-hollow-style($background);
|
236
|
+
}
|
237
|
+
|
238
|
+
@if $expand {
|
239
|
+
@include button-expand;
|
240
|
+
}
|
241
|
+
}
|
242
|
+
|
243
|
+
@mixin foundation-button {
|
244
|
+
.button {
|
245
|
+
@include button;
|
246
|
+
|
247
|
+
// Sizes
|
248
|
+
@each $size, $value in map-remove($button-sizes, default) {
|
249
|
+
&.#{$size} {
|
250
|
+
font-size: $value;
|
251
|
+
}
|
252
|
+
}
|
253
|
+
|
254
|
+
&.expanded { @include button-expand; }
|
255
|
+
|
256
|
+
// Colors
|
257
|
+
@each $name, $color in $button-palette {
|
258
|
+
@if $button-fill != hollow {
|
259
|
+
&.#{$name} {
|
260
|
+
@include button-style($color, auto, auto);
|
261
|
+
}
|
262
|
+
}
|
263
|
+
@else {
|
264
|
+
&.#{$name} {
|
265
|
+
@include button-hollow-style($color);
|
266
|
+
}
|
267
|
+
|
268
|
+
&.#{$name}.dropdown::after {
|
269
|
+
border-top-color: $color;
|
270
|
+
}
|
271
|
+
}
|
272
|
+
}
|
273
|
+
|
274
|
+
// Hollow style
|
275
|
+
@if $button-fill != hollow {
|
276
|
+
&.hollow {
|
277
|
+
@include button-hollow;
|
278
|
+
@include button-hollow-style;
|
279
|
+
|
280
|
+
@each $name, $color in $button-palette {
|
281
|
+
&.#{$name} {
|
282
|
+
@include button-hollow-style($color);
|
283
|
+
}
|
284
|
+
}
|
285
|
+
}
|
286
|
+
}
|
287
|
+
|
288
|
+
// Disabled style
|
289
|
+
&.disabled,
|
290
|
+
&[disabled] {
|
291
|
+
@include button-disabled;
|
292
|
+
|
293
|
+
@each $name, $color in $button-palette {
|
294
|
+
&.#{$name} {
|
295
|
+
@include button-disabled($color, auto);
|
296
|
+
}
|
297
|
+
}
|
298
|
+
}
|
299
|
+
|
300
|
+
// Dropdown arrow
|
301
|
+
&.dropdown {
|
302
|
+
@include button-dropdown;
|
303
|
+
|
304
|
+
@if $button-fill == hollow {
|
305
|
+
&::after {
|
306
|
+
border-top-color: $button-background;
|
307
|
+
}
|
308
|
+
}
|
309
|
+
|
310
|
+
&.hollow {
|
311
|
+
&::after {
|
312
|
+
border-top-color: $button-background;
|
313
|
+
}
|
314
|
+
|
315
|
+
@each $name, $color in $button-palette {
|
316
|
+
&.#{$name} {
|
317
|
+
&::after {
|
318
|
+
border-top-color: $color;
|
319
|
+
}
|
320
|
+
}
|
321
|
+
}
|
322
|
+
}
|
323
|
+
}
|
324
|
+
|
325
|
+
// Button with dropdown arrow only
|
326
|
+
&.arrow-only::after {
|
327
|
+
top: -0.1em;
|
328
|
+
float: none;
|
329
|
+
margin-#{$global-left}: 0;
|
330
|
+
}
|
331
|
+
}
|
332
|
+
}
|
@@ -0,0 +1,106 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group callout
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Default background color.
|
10
|
+
/// @type Color
|
11
|
+
$callout-background: $white !default;
|
12
|
+
|
13
|
+
/// Default fade value for callout backgrounds.
|
14
|
+
/// @type Number
|
15
|
+
$callout-background-fade: 85% !default;
|
16
|
+
|
17
|
+
/// Default border style for callouts.
|
18
|
+
/// @type List
|
19
|
+
$callout-border: 1px solid rgba($black, 0.25) !default;
|
20
|
+
|
21
|
+
/// Default bottom margin for callouts.
|
22
|
+
/// @type Number
|
23
|
+
$callout-margin: 0 0 1rem 0 !default;
|
24
|
+
|
25
|
+
/// Default inner padding for callouts.
|
26
|
+
/// @type Number
|
27
|
+
$callout-padding: 1rem !default;
|
28
|
+
|
29
|
+
/// Default font color for callouts.
|
30
|
+
/// @type Color
|
31
|
+
$callout-font-color: $body-font-color !default;
|
32
|
+
|
33
|
+
/// Default font color for callouts, if the callout has a dark background.
|
34
|
+
/// @type Color
|
35
|
+
$callout-font-color-alt: $body-background !default;
|
36
|
+
|
37
|
+
/// Default border radius for callouts.
|
38
|
+
/// @type Color
|
39
|
+
$callout-radius: $global-radius !default;
|
40
|
+
|
41
|
+
/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
|
42
|
+
/// @type Number | Boolean
|
43
|
+
$callout-link-tint: 30% !default;
|
44
|
+
|
45
|
+
/// Adds basic styles for a callout, including padding and margin.
|
46
|
+
@mixin callout-base() {
|
47
|
+
position: relative;
|
48
|
+
margin: $callout-margin;
|
49
|
+
padding: $callout-padding;
|
50
|
+
|
51
|
+
border: $callout-border;
|
52
|
+
border-radius: $callout-radius;
|
53
|
+
|
54
|
+
// Respect the padding, fool.
|
55
|
+
> :first-child {
|
56
|
+
margin-top: 0;
|
57
|
+
}
|
58
|
+
|
59
|
+
> :last-child {
|
60
|
+
margin-bottom: 0;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
/// Generate quick styles for a callout using a single color as a baseline.
|
65
|
+
/// @param {Color} $color [$callout-background] - Color to use.
|
66
|
+
@mixin callout-style($color: $callout-background) {
|
67
|
+
$background: scale-color($color, $lightness: $callout-background-fade);
|
68
|
+
|
69
|
+
background-color: $background;
|
70
|
+
color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
|
71
|
+
}
|
72
|
+
|
73
|
+
@mixin callout-size($padding) {
|
74
|
+
padding-top: $padding;
|
75
|
+
padding-right: $padding;
|
76
|
+
padding-bottom: $padding;
|
77
|
+
padding-left: $padding;
|
78
|
+
}
|
79
|
+
|
80
|
+
|
81
|
+
/// Adds styles for a callout.
|
82
|
+
/// @param {Color} $color [$callout-background] - Color to use.
|
83
|
+
@mixin callout($color: $callout-background) {
|
84
|
+
@include callout-base;
|
85
|
+
@include callout-style($color);
|
86
|
+
}
|
87
|
+
|
88
|
+
@mixin foundation-callout {
|
89
|
+
.callout {
|
90
|
+
@include callout;
|
91
|
+
|
92
|
+
@each $name, $color in $foundation-palette {
|
93
|
+
&.#{$name} {
|
94
|
+
@include callout-style($color);
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
&.small {
|
99
|
+
@include callout-size(0.5rem);
|
100
|
+
}
|
101
|
+
|
102
|
+
&.large {
|
103
|
+
@include callout-size(3rem);
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
@@ -0,0 +1,121 @@
|
|
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: $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,
|
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
|
+
}
|
60
|
+
|
61
|
+
margin-bottom: $margin;
|
62
|
+
|
63
|
+
border: $border;
|
64
|
+
border-radius: $radius;
|
65
|
+
|
66
|
+
background: $background;
|
67
|
+
box-shadow: $shadow;
|
68
|
+
|
69
|
+
overflow: hidden;
|
70
|
+
color: $color;
|
71
|
+
|
72
|
+
& > :last-child {
|
73
|
+
margin-bottom: 0;
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
/// Adds styles for a card divider.
|
78
|
+
@mixin card-divider(
|
79
|
+
$background: $card-divider-background,
|
80
|
+
$padding: $card-padding
|
81
|
+
) {
|
82
|
+
@if $global-flexbox {
|
83
|
+
flex: 0 1 auto;
|
84
|
+
}
|
85
|
+
|
86
|
+
padding: $padding;
|
87
|
+
background: $background;
|
88
|
+
|
89
|
+
& > :last-child {
|
90
|
+
margin-bottom: 0;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
/// Adds styles for a card section.
|
95
|
+
@mixin card-section(
|
96
|
+
$padding: $card-padding
|
97
|
+
) {
|
98
|
+
@if $global-flexbox {
|
99
|
+
flex: 1 0 auto;
|
100
|
+
}
|
101
|
+
|
102
|
+
padding: $padding;
|
103
|
+
|
104
|
+
& > :last-child {
|
105
|
+
margin-bottom: 0;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
@mixin foundation-card {
|
110
|
+
.card {
|
111
|
+
@include card-container;
|
112
|
+
}
|
113
|
+
|
114
|
+
.card-divider {
|
115
|
+
@include card-divider;
|
116
|
+
}
|
117
|
+
|
118
|
+
.card-section {
|
119
|
+
@include card-section;
|
120
|
+
}
|
121
|
+
}
|