Update JSON API
[src/app-framework-demo.git] / afm-client / bower_components / foundation-apps / scss / components / _card.scss
diff --git a/afm-client/bower_components/foundation-apps/scss/components/_card.scss b/afm-client/bower_components/foundation-apps/scss/components/_card.scss
new file mode 100644 (file)
index 0000000..e085373
--- /dev/null
@@ -0,0 +1,93 @@
+/*\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