first implementation of fun stats site

1 files changed, 58 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/scss/_cards.scss b/templates/assets/bootstrap-material-design/scss/_cards.scss
new file mode 100644
index 0000000..b68e2cb
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/_cards.scss
@@ -0,0 +1,58 @@
+//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
+// Card resting elevation: 2dp
+.card {
+  border: 0;
+
+  // Cards have a default elevation of 2dp.
+  @include box-shadow($bmd-shadow-2dp);
+  @extend %std-font;
+
+  // spec: see "Avatar, Title, and Subtitle area"
+  // Height: 72dp
+  // Padding: 16dp
+  // Top and bottom padding: 16dp
+  .card-header {
+    padding: 1rem;
+  }
+
+  .card-block {
+    padding: 1.5rem 1rem 1rem;
+    //@extend %std-font;
+  }
+
+  // Primary title/text
+  //  - Title: 24sp or 14sp
+  //  - Subtitle: 14sp
+
+  // non-h* card-titles will be 14sp
+  //&.card-title {
+  //  @extend %std-font;
+  //}
+
+  // any h* will signal the larger size should render as 24sp
+  @include headings() {
+    &.card-title {
+      font-size: 1.5rem;
+      font-weight: 300;
+    }
+  }
+
+  .bmd-card-actions, // needed?  if you have actions in the middle of the card (see spec), it may be necessary
+  .card-footer { // assume footer is the set of actions?
+    padding: .5rem;
+  }
+
+  &.bmd-card-raised {
+    // Card raised elevation: 8dp
+    @include box-shadow($bmd-shadow-8dp);
+  }
+
+  @include media-breakpoint-up(lg) {
+    // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
+    &.bmd-card-flat {
+      box-shadow: none;
+    }
+  }
+}
+
+