material-sass 4.0.0.alpha6 → 4.0.0.beta

data/app/assets/stylesheets/material/material/_button.scss

@@ -1,14 +1,16 @@
 .btn {
-  background-color: $btn-bg;
+  @include border-radius($btn-border-radius);
+  @include transition-standard(box-shadow);
+
+  background-color: transparent;
   background-image: none;
   border: 0;
   box-shadow: map-get($btn-elevation-shadow, shadow);
   color: $btn-color;
-  cursor: pointer;
   display: inline-block;
   font-size: $btn-font-size;
   font-weight: $btn-font-weight;
-  line-height: 1;
+  line-height: $btn-line-height;
   margin: 0;
   max-width: 100%;
   min-width: $btn-min-width;
@@ -19,223 +21,165 @@
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  z-index: map-get($btn-elevation-shadow, elevation);
-  @include border-radius($border-radius);
-  @include transition-standard(background-color, box-shadow, color);
-
-  &::before {
-    background-color: $btn-focus-overlay;
-    content: "";
-    display: block;
-    opacity: 0;
-    position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    z-index: -1;
-    @include border-radius($border-radius);
-    @include transition-standard(opacity);
-  }
-
-  // active, focus, hover
-    @include active-focus-hover {
-      color: $btn-color;
 
-      @if ($link-decoration-active != "none") {
-        text-decoration: none;
-      }
+  @include active-focus-hover {
+    color: $btn-color;
+    text-decoration: none;
+  }
+
+  @include focus-hover {
+    background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
+  }
+
+  &:active,
+  &.active {
+    background-color: $btn-bg-active;
+    background-image: none;
+    box-shadow: map-get($btn-elevation-shadow-active, shadow);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: $btn-bg-disabled;
+    background-image: none;
+    box-shadow: none;
+    color: $btn-color-disabled;
+    opacity: 1;
+
+    .waves-ripple {
+      display: none;
     }
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  .show > &.dropdown-toggle {
+    background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
+  }
+}
+
+a {
+  &.btn.disabled {
+    pointer-events: none;
+  }
+}
 
-    @include focus-hover {
-      &::before {
-        opacity: 1;
-      }
+fieldset {
+  &[disabled] a {
+    &.btn {
+      pointer-events: none;
     }
+  }
+}
 
-    &:active,
-    &.active {
-      background-color: $btn-bg-active;
-      box-shadow: map-get($btn-elevation-shadow-active, shadow);
-      z-index: map-get($btn-elevation-shadow-active, elevation);
+// Colour
+@each $color, $values in $theme-colors {
+  .btn-#{$color} {
+    @include color-yiq(map-get(theme-color($color), color));
+
+    background-color: map-get(theme-color($color), color);
 
-      &::before {
-        opacity: 0;
-      }
+    @include active-focus-hover {
+      @include color-yiq(map-get(theme-color($color), color));
     }
 
-    &:focus {
-      outline: 0;
+    &:active,
+    &.active {
+      background-color: map-get(theme-color($color), darker);
     }
 
-  // disabled
     &:disabled,
     &.disabled {
       background-color: $btn-bg-disabled;
-      box-shadow: none;
       color: $btn-color-disabled;
-      cursor: $cursor-disabled;
-      opacity: 1;
-      pointer-events: none;
-
-      &::before,
-      .waves-ripple {
-        display: none;
-      }
     }
+  }
+}
 
-  // open
-    .open > &,
-    .open > & {
-      &.dropdown-toggle::before {
-        opacity: 1;
-      }
-    }
+[class*='bg-dark'] :not([class*='bg-light']) .btn {
+  &:disabled,
+  &.disabled {
+    background-color: $btn-bg-disabled-inverse;
+    color: $btn-color-disabled-inverse;
+  }
+}
 
-    .dropdown.open > & {
-      &.dropdown-toggle,
-      &.dropdown-toggle::before {
-        @include border-bottom-radius(0);
-      }
-    }
+// Size
+.btn-lg,
+%btn-lg {
+  font-size: $btn-font-size-lg;
+  padding: $btn-padding-y-lg $btn-padding-x-lg;
+}
 
-    .dropup.open > & {
-      &.dropdown-toggle,
-      &.dropdown-toggle::before {
-        @include border-top-radius(0);
-      }
-    }
+.btn-sm,
+%btn-sm {
+  font-size: $btn-font-size-sm;
+  padding: $btn-padding-y-sm $btn-padding-x-sm;
 }
 
-// colour
-  .btn-inverse {
-    color: $btn-color-inverse;
-
-    // active, focus, hover
-      @include active-focus-hover {
-        color: $btn-color-inverse;
-      }
-
-      &:active,
-      &.active {
-        background-color: $btn-bg-inverse-active;
-      }
-
-    // disabled
-      &:disabled,
-      &.disabled {
-        background-color: $btn-bg-inverse-disabled;
-        color: $btn-color-inverse-disabled;
-      }
-  }
-
-  @each $color in $palettes {
-    $i: index($palettes, $color);
-
-    .btn-#{$color} {
-      background-color: nth($palettes-color, $i);
-      color: nth($palettes-text-color, $i);
-
-      // active, focus, hover
-        @include active-focus-hover {
-          color: nth($palettes-text-color, $i);
-        }
-
-        &:active,
-        &.active {
-          background-color: nth($palettes-color-dark, $i);
-        }
-
-      // disabled
-        &:disabled,
-        &.disabled {
-          background-color: $btn-bg-disabled;
-          color: $btn-color-disabled;
-        }
-    }
-  }
 
-// size
-  .btn-lg {
-    font-size: $btn-font-size-lg;
-    padding: $btn-padding-y-lg $btn-padding-x-lg;
-  }
 
-  .btn-sm {
-    font-size: $btn-font-size-sm;
-    padding: $btn-padding-y-sm $btn-padding-x-sm;
+// Block button
+
+.btn-block {
+  display: block;
+  width: 100%;
+
+  + .btn-block {
+    margin-top: $btn-block-margin-y;
   }
+}
 
-//
-// block button
-//
-  .btn-block {
-    display: block;
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  &.btn-block {
     width: 100%;
+  }
+}
 
-    + .btn-block {
-      margin-top: $btn-block-spacer;
-    }
+
+
+// Link button
+
+.btn-link {
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  color: $link-color;
+  font-weight: normal;
+  text-decoration: $link-decoration;
+  text-transform: none;
+
+  @include active-focus-hover {
+    color: $link-color-hover;
+    text-decoration: $link-decoration-hover;
   }
 
-  input[type="button"],
-  input[type="reset"],
-  input[type="submit"] {
-    &.btn-block {
-      width: 100%;
-    }
+  @include focus-hover {
+    background-image: none;
   }
 
-//
-// link button
-//
-  .btn-link {
+  &:active,
+  &.active {
     background-color: transparent;
-    border-radius: 0;
     box-shadow: none;
-    color: $link-color;
-    font-weight: normal;
-    text-decoration: $link-decoration;
-    text-transform: none;
-    z-index: initial;
-
-    &::before {
-      display: none;
-    }
+  }
 
-    // active, focus, hover
-      @include active-focus-hover {
-        color: $link-color-active;
-        text-decoration: $link-decoration-active;
-      }
-
-      &:active,
-      &.active {
-        background-color: transparent;
-        box-shadow: none;
-        z-index: initial;
-      }
-
-      &:focus {
-        @include tab-focus;
-      }
-
-    // disabled
-      &:disabled,
-      &.disabled {
-        background-color: transparent;
-        color: $btn-color-disabled;
-        outline: 0;
-
-        @if ($link-decoration-active != "none") {
-          text-decoration: none;
-        }
-      }
-  }
-
-//
-// no minimum width
-//
-  .btn-fluid {
-    min-width: 0;
+  &:disabled,
+  &.disabled {
+    background-color: transparent;
+    color: $btn-color-disabled;
+    text-decoration: none;
   }
+}
+
+
+
+// No minimum width
+
+.btn-fluid {
+  min-width: 0;
+}

data/app/assets/stylesheets/material/material/_card.scss

@@ -1,348 +1,400 @@
 .card {
+  @include border-radius($card-border-radius);
+
+  background-clip: border-box;
   background-color: $card-bg;
   box-shadow: map-get($card-elevation-shadow, shadow);
   display: flex;
   flex-direction: column;
+  min-width: 0;
   position: relative;
-  z-index: map-get($card-elevation-shadow, elevation);
-  @include border-radius($border-radius);
-}
+  word-wrap: break-word;
 
-.card[href],
-.card[tabindex] {
-  // active, focus, hover
+  &[href],
+  &[tabindex] {
     @include active-focus-hover {
-      box-shadow: map-get($card-elevation-shadow-active, shadow);
+      box-shadow: map-get($card-elevation-shadow-hover, shadow);
       text-decoration: none;
-      z-index: map-get($card-elevation-shadow-active, elevation);
     }
 
     &:focus {
       outline: 0;
     }
+  }
 }
 
-// colour
-  .card-inverse {
-    background-color: $card-bg-inverse;
-    color: $card-color-inverse;
+// Colour
+@each $color, $values in $theme-colors {
+  .card {
+    &.border-#{$color} {
+      box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 1px map-get(theme-color($color), color);
+
+      &[href],
+      &[tabindex] {
+        @include active-focus-hover {
+          box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 1px map-get(theme-color($color), color);
+        }
+      }
+    }
   }
+}
 
-  @each $color in $palettes {
-    $i: index($palettes, $color);
 
-    .card-#{$color} {
-      background-color: nth($palettes-color, $i);
-      color: nth($palettes-text-color, $i);
-    }
+
+// Action
+
+.card-actions {
+  align-items: flex-start;
+  display: flex;
+  padding: ($card-action-padding-y - $card-action-inner-spacer-y / 2) ($card-action-padding-x - $card-action-inner-spacer-x / 2);
+
+  &:first-child {
+    @include border-top-radius($card-border-radius);
   }
 
-//
-// action
-//
-  .card-actions {
-    display: flex;
-    padding: $card-action-spacer-y ($card-action-spacer-x / 2);
-    @include clearfix;
+  &:last-child {
+    @include border-bottom-radius($card-border-radius);
+  }
 
-    &:first-child {
-      @include border-top-radius($border-radius);
-    }
+  .btn {
+    @include text-truncate;
 
-    &:last-child {
-      @include border-bottom-radius($border-radius);
-    }
+    flex: 0 1 auto;
+    margin: ($card-action-inner-spacer-y / 2) ($card-action-inner-spacer-x / 2);
+    min-width: 0;
+    padding-right: $card-action-inner-spacer-x;
+    padding-left: $card-action-inner-spacer-x;
+  }
+}
 
-    .btn {
-      margin-right: ($card-action-spacer-x / 2);
-      margin-left: ($card-action-spacer-x / 2);
-      min-width: 0;
-      overflow-x: hidden;
-      padding-right: $card-action-spacer-x;
-      padding-left: $card-action-spacer-x;
-      text-overflow: ellipsis;
-    }
 
-    // vertical
-      &.flex-column,
-      &.flex-column-reverse {
-        .btn {
-          display: table;
 
-          + .btn {
-            margin-top: ($card-action-spacer-y / 2);
-          }
-        }
-      }
+// Body
+
+.card-body {
+  flex: 1 1 auto;
+  padding: $card-inner-spacer-y $card-padding-x;
+
+  &:first-child,
+  .card-header[class*='border-'] + &,
+  .card-img-top + &,
+  .list-group + & {
+    padding-top: $card-padding-y;
   }
 
-  .card-link {
-    // active, focus, hover
-      @include active-focus-hover {
-        text-decoration: none;
-      }
+  &:first-child {
+    @include border-top-radius($card-border-radius);
+  }
 
-    + .card-link {
-      margin-left: $card-action-spacer-x;
-    }
+  &:last-child {
+    @include border-bottom-radius($card-border-radius);
+
+    padding-bottom: $card-padding-y;
   }
 
-//
-// block
-//
-  .card-block {
-    flex: 1 1 auto;
-    padding: $card-spacer-inner-y $card-spacer-inner-x;
+  .card-header:not([class*='border-']) + & {
+    padding-top: 0;
+  }
 
-    &:first-child,
-    .card-img-top + & {
-      padding-top: ($card-spacer-inner-y * 1.5);
-    }
+  > :last-child {
+    margin-bottom: 0;
+  }
 
-    &:last-child {
-      padding-bottom: ($card-spacer-inner-y * 1.5);
-    }
+  + .card-img-bottom,
+  + .list-group {
+    margin-top: ($card-padding-y - $card-inner-spacer-y);
   }
+}
 
-//
-// footer
-//
-  .card-footer {
-    padding: 0 $card-spacer-inner-x $card-spacer-inner-y;
 
-    &:first-child {
-      padding-top: $card-spacer-inner-y;
-      @include border-top-radius($border-radius);
-    }
 
-    &:last-child {
-      @include border-bottom-radius($border-radius);
+// Footer
+
+.card-footer {
+  padding: $card-inner-spacer-y $card-padding-x;
+
+  @each $color, $values in $theme-colors {
+    &.border-#{$color} {
+      border-top: $card-border-width solid map-get(theme-color($color), color);
     }
   }
 
-//
-// header
-//
-  .card-header {
-    margin-bottom: 0;
-    padding: $card-spacer-inner-y $card-spacer-inner-x 0;
+  &:first-child {
+    @include border-top-radius($card-border-radius);
 
-    &:first-child,
-    .card-img-top + & {
-      padding-top: ($card-spacer-inner-y * 1.5);
+    border-top: 0;
+  }
+
+  &:last-child {
+    @include border-bottom-radius($card-border-radius);
+  }
+
+  .card-body + &,
+  .card-header + & {
+    &:not[class*='border-'] {
+      padding-top: 0;
     }
 
-    &:first-child {
-      @include border-top-radius($border-radius);
+    &[class*='border-'] {
+      margin-top: ($card-padding-y - $card-inner-spacer-y);
     }
+  }
 
-    &:last-child {
-      padding-bottom: ($card-spacer-inner-y * 1.5);
-      @include border-bottom-radius($border-radius);
+  .card-header[class*='border-'] + & {
+    &[class*='border-'] {
+      margin-top: ($card-border-width * -1);
     }
   }
 
-  .card-header-pills {
-    margin-top: ($card-action-spacer-y - $card-spacer-inner-y);
-    margin-right: ($card-action-spacer-x - $card-spacer-inner-x);
-    margin-bottom: $card-action-spacer-y;
-    margin-left: ($card-action-spacer-x - $card-spacer-inner-x);
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
 
-    .card-header:first-child &,
-    .card-img-top + .card-header & {
-      margin-top: ($card-action-spacer-y - $card-spacer-inner-y * 1.5);
-    }
 
-    .nav-item + .nav-item,
-    .nav-link + .nav-link {
-      margin-left: $card-action-spacer-x;
-    }
+// Header
+
+.card-header {
+  margin-bottom: 0;
+  padding: $card-inner-spacer-y $card-padding-x;
 
-    .nav-link {
-      padding-right: $card-action-spacer-x;
-      padding-left: $card-action-spacer-x;
+  @each $color, $values in $theme-colors {
+    &.border-#{$color} {
+      border-bottom: $card-border-width solid map-get(theme-color($color), color);
     }
+  }
 
-    // vertical
-      &.flex-column,
-      &.flex-column-reverse {
-        .nav-item,
-        .nav-link {
-          display: table;
-        }
+  &:first-child,
+  .card-img-top + &,
+  .list-group + & {
+    padding-top: $card-padding-y;
+  }
 
-        .nav-item + .nav-item,
-        .nav-link + .nav-link {
-          margin-top: ($card-action-spacer-y / 2);
-          margin-left: 0;
-        }
-      }
+  &:first-child {
+    @include border-top-radius($card-border-radius);
   }
 
-  .card-header-tabs {
-    margin-top: ($card-spacer-inner-y * -1);
-    margin-right: ($card-spacer-inner-x * -1);
-    margin-left: ($card-spacer-inner-x * -1);
+  &:last-child {
+    @include border-bottom-radius($card-border-radius);
 
-    .card-header:first-child &,
-    .card-img-top + .card-header & {
-      margin-top: ($card-spacer-inner-y * -1.5);
-    }
+    border-bottom: 0;
+    padding-bottom: $card-padding-y;
+  }
 
-    .card-header:last-child & {
-      margin-bottom: ($card-spacer-inner-y * -1.5);
+  &:not([class*='border-']) {
+    + .card-img-bottom,
+    + .list-group {
+      margin-top: ($card-padding-y - $card-inner-spacer-y);
     }
   }
 
-//
-// image
-//
-  .card-img {
-    @include border-radius($border-radius);
+  &[class*='border-'] {
+    padding-top: $card-padding-y;
+    padding-bottom: $card-padding-y;
   }
+}
 
-  .card-img-bottom {
-    @include border-bottom-radius($border-radius);
+.card-header-pills {
+  margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) 0;
+  padding: ($card-action-padding-y - $card-action-inner-spacer-y / 2) ($card-action-padding-x - $card-action-inner-spacer-x / 2);
+
+  .card-header:first-child &,
+  .card-header[class*='border-'] &,
+  .card-img-top + .card-header & {
+    margin-top: ($card-padding-y * -1);
   }
 
-  .card-img-top {
-    @include border-top-radius($border-radius);
+  .card-header:last-child &,
+  .card-header[class*='border-'] & {
+    margin-bottom: ($card-padding-y * -1);
   }
 
-//
-// image overlay
-//
-  .card-img-overlay {
-    max-height: 100%;
-    padding: ($card-spacer-inner-y * 1.5) $card-spacer-inner-x;
-    position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
+  .nav-link {
+    margin: ($card-action-inner-spacer-y / 2) ($card-action-inner-spacer-x / 2);
+    padding-right: $card-action-inner-spacer-x;
+    padding-left: $card-action-inner-spacer-x;
   }
+}
 
-//
-// set
-//
-  .card-columns {
-    column-count: 2;
-    column-gap: 0;
-    margin-right: ($card-spacer-outer-x / -2);
-    margin-left: ($card-spacer-outer-x / -2);
+.card-header-tabs {
+  margin-top: ($card-inner-spacer-y * -1);
+  margin-right: ($card-inner-spacer-x * -1);
+  margin-bottom: ($card-padding-y - $card-inner-spacer-y);
+  margin-left: ($card-inner-spacer-x * -1);
+
+  .card-header:first-child &,
+  .card-header[class*='border-'] &,
+  .card-img-top + .card-header &,
+  .list-group + .card-header & {
+    margin-top: ($card-padding-y * -1);
+  }
 
-    .card {
-      display: inline-block;
-      margin-right: ($card-spacer-outer-x / 2);
-      margin-bottom: $card-spacer-outer-y;
-      margin-left: ($card-spacer-outer-x / 2);
-      width: calc(100% - #{$card-spacer-outer-x});
-    }
+  .card-header[class*='border-'] &,
+  .card-header:last-child & {
+    margin-bottom: ($card-padding-y * -1);
+  }
+}
 
-    @include media-breakpoint-up(sm) {
-      column-count: 3;
-    }
+
+
+// Image
+
+.card-img {
+  @include border-radius($card-border-radius);
+}
+
+.card-img-bottom {
+  @include border-bottom-radius($card-border-radius);
+}
+
+.card-img-top {
+  @include border-top-radius($card-border-radius);
+}
+
+
+
+// Image overlay
+
+.card-img-overlay {
+  max-height: 100%;
+  padding: $card-padding-y $card-padding-x;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+
+
+// Set
+
+.card-columns {
+  column-count: $card-columns-count;
+  column-gap: $card-margin-x;
+  margin-top: ($card-margin-y / -2);
+  margin-bottom: ($card-margin-y / 2);
+
+  @include media-breakpoint-up(md) {
+    column-count: $card-columns-count-desktop;
   }
 
-  .card-deck {
+  .card {
+    display: inline-flex;
+    margin-top: ($card-margin-y / 2);
+    margin-bottom: ($card-margin-y / 2);
+    width: 100%;
+  }
+}
+
+.card-deck {
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: ($card-margin-x / -2);
+    margin-left: ($card-margin-x / -2);
+  }
+
+  .card {
+    margin-bottom: $card-margin-y;
+
     @include media-breakpoint-up(sm) {
-      display: flex;
-      flex-flow: row wrap;
-      margin-right: ($card-spacer-outer-x / -2);
-      margin-left: ($card-spacer-outer-x / -2);
-
-      .card {
-        flex: 1 0 0;
-        margin-right: ($card-spacer-outer-x / 2);
-        margin-bottom: $card-spacer-outer-y;
-        margin-left: ($card-spacer-outer-x / 2);
-      }
+      flex: 1 0 0;
+      margin-right: ($card-margin-x / 2);
+      margin-left: ($card-margin-x / 2);
     }
   }
+}
 
-  .card-group {
-    @include media-breakpoint-up(sm) {
-      display: flex;
-      flex-flow: row wrap;
+.card-group {
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+  }
 
-      .card {
-        flex: 1 0 0;
+  .card {
+    box-shadow: $shadow-1dp;
+    margin-bottom: $card-margin-y;
 
-        &:first-child {
+    @include media-breakpoint-up(sm) {
+      flex: 1 0 0;
+
+      &:first-child:not(:last-child) {
+        @include border-right-radius(0);
+
+        .card-actions,
+        .card-body,
+        .card-footer,
+        .card-header,
+        .card-img,
+        .card-img-bottom,
+        .card-img-top {
           @include border-right-radius(0);
-
-          .card-actions,
-          .card-footer,
-          .card-header,
-          .card-img,
-          .card-img-bottom,
-          .card-img-top {
-            @include border-right-radius(0);
-          }
         }
+      }
 
-        &:last-child {
-          @include border-left-radius(0);
+      &:last-child:not(:first-child) {
+        @include border-left-radius(0);
 
-          .card-actions,
-          .card-footer,
-          .card-header,
-          .card-img,
-          .card-img-bottom,
-          .card-img-top {
-            @include border-left-radius(0);
-          }
+        .card-actions,
+        .card-body,
+        .card-footer,
+        .card-header,
+        .card-img,
+        .card-img-bottom,
+        .card-img-top {
+          @include border-left-radius(0);
         }
+      }
 
-        &:not(:first-child):not(:last-child) {
-          @include border-radius(0);
+      &:not(:first-child):not(:last-child) {
+        @include border-radius(0);
 
-          .card-actions,
-          .card-footer,
-          .card-header,
-          .card-img,
-          .card-img-bottom,
-          .card-img-top {
-            @include border-radius(0);
-          }
+        .card-actions,
+        .card-body,
+        .card-footer,
+        .card-header,
+        .card-img,
+        .card-img-bottom,
+        .card-img-top {
+          @include border-radius(0);
         }
       }
     }
   }
+}
 
-//
-// text and title
-//
-  .card-blockquote {
-    border-left: 0;
-    margin-bottom: 0;
-    padding: 0;
-  }
 
-  .card-subtitle {
-    margin-top: ($card-spacer-inner-y * -1);
-    margin-bottom: 0;
-    @include typography-body-1;
+
+// Text and title
+
+.card-link {
+  @include active-focus-hover {
+    text-decoration: none;
   }
 
-  .card-text {
-    &:last-child {
-      margin-bottom: 0;
-    }
+  + .card-link {
+    margin-left: $card-inner-spacer-x;
   }
+}
 
-  .card-title {
-    margin-bottom: $card-spacer-inner-y;
-    @include typography-headline;
+.card-subtitle {
+  @include typography-body-1;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  margin-top: ($card-inner-spacer-y * -1);
+  margin-bottom: 0;
+}
 
-    .card-block:not(:first-child) > &:first-child {
-      margin-top: ($card-spacer-inner-y / 2);
-    }
+.card-text:last-child {
+  margin-bottom: 0;
+}
 
-    .card-img-top + .card-block > &:first-child {
-      margin-top: 0;
-    }
+.card-title {
+  @include typography-headline;
+
+  margin-bottom: $card-inner-spacer-y;
+
+  &:last-child {
+    margin-bottom: 0;
   }
+}