--- /dev/null
+/*\r
+ Cards\r
+\r
+ Structure:\r
+\r
+ titles\r
+ lists\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Card\r
+$card-background: #fff !default;\r
+$card-color: isitlight($card-background) !default;\r
+$card-border: 1px solid smartscale($card-background, 7%) !default;\r
+$card-radius: $global-radius !default;\r
+$card-shadow: 0 1px 2px rgba(#000, 0.2) !default;\r
+$card-padding: $global-padding !default;\r
+$card-margin: 0.5rem !default;\r
+\r
+$card-divider-background: smartscale($card-background, 7%) !default;\r
+///\r
+\r
+@mixin card-container(\r
+ $background: $card-background,\r
+ $color: $card-color,\r
+ $border: $card-border,\r
+ $radius: $card-radius,\r
+ $shadow: $card-shadow,\r
+ $padding: $card-padding,\r
+ $margin: $card-margin\r
+) {\r
+ border: $border;\r
+ margin-bottom: $margin;\r
+ background: $background;\r
+ color: $color;\r
+ border-radius: $radius;\r
+ box-shadow: $shadow;\r
+ overflow: hidden;\r
+\r
+ h1, h2, h3, h4, h5, h6 {\r
+ color: inherit;\r
+ }\r
+\r
+ ul {\r
+ margin-bottom: 0;\r
+ }\r
+\r
+ img {\r
+ width: 100%;\r
+ }\r
+}\r
+\r
+@mixin card-divider(\r
+ $background: $card-divider-background,\r
+ $padding: $card-padding\r
+) {\r
+ background: $background;\r
+ padding: $padding;\r
+}\r
+\r
+@mixin card-section(\r
+ $padding: $card-padding\r
+) {\r
+ padding: $padding;\r
+}\r
+\r
+@include exports(card) {\r
+ .card {\r
+ @include card-container;\r
+\r
+ @each $color in map-keys($foundation-colors) {\r
+ &.#{$color} {\r
+ $color-value: map-get($foundation-colors, $color);\r
+ @include card-container(\r
+ $background: $color-value,\r
+ $color: isitlight($color-value),\r
+ $border: 0\r
+ );\r
+ .card-divider {\r
+ @include card-divider(\r
+ $background: smartscale($color-value, 7%)\r
+ );\r
+ }\r
+ }\r
+ }\r
+ }\r
+ .card-divider {\r
+ @include card-divider;\r
+ }\r
+ .card-section {\r
+ @include card-section;\r
+ }\r
+}\r