material-sass 4.0.0.alpha6 → 4.0.0.beta

data/app/assets/stylesheets/material/base/_grid.scss

@@ -1,42 +1,43 @@
-//
-// column
-//
-  @if $enable-grid-classes {
-    @include make-grid-columns;
-  }
+// Column
 
-//
-// container
-//
-  @if $enable-grid-classes {
-    .container {
-      @include make-container;
-      @include make-container-max-widths;
-    }
+@if $enable-grid-classes {
+  @include make-grid-columns;
+}
+
+
+
+// Container
+
+@if $enable-grid-classes {
+  .container {
+    @include make-container;
+    @include make-container-max-widths;
   }
+}
 
-  @if $enable-grid-classes {
-    .container-fluid {
-      @include make-container;
-    }
+@if $enable-grid-classes {
+  .container-fluid {
+    @include make-container;
   }
+}
 
-//
-// row
-//
-  @if $enable-grid-classes {
-    .row {
-      @include make-row;
-    }
 
-    .no-gutters {
-      margin-right: 0;
-      margin-left: 0;
 
-      > .col,
-      > [class*="col-"] {
-        padding-right: 0;
-        padding-left: 0;
-      }
+// Row
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row;
+  }
+
+  .no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
     }
   }
+}

data/app/assets/stylesheets/material/base/_typography.scss

@@ -1,198 +1,189 @@
-//
-// blockquote
-//
-  .blockquote {
-    border-left: $blockquote-border-width solid $blockquote-border-color;
-    margin-bottom: $spacer-md-y;
-    padding: 0 $spacer-md-x;
-    @include typography-title;
-  }
+// Blockquote
 
-  .blockquote-footer {
-    color: $blockquote-small-color;
-    display: block;
-    margin-top: $spacer-xs-y;
-    @include typography-caption;
+.blockquote {
+  @include typography-title;
 
-    &::before {
-      content: "\2014 \00A0";
-    }
-  }
+  border-left: $blockquote-border-width solid $blockquote-border-color;
+  margin-bottom: $paragraph-margin-y;
+  padding: 0 $spacer;
+}
 
-  .blockquote-reverse {
-    border-left: 0;
-    border-right: $blockquote-border-width solid $blockquote-border-color;
-    text-align: right;
-  }
+.blockquote-footer {
+  @include typography-caption;
 
-  .blockquote-reverse .blockquote-footer {
-    &::after {
-      content: "\00A0 \2014";
-    }
-    &::before {
-      content: "";
-    }
-  }
+  color: $blockquote-small-color;
+  display: block;
+  margin-top: $spacer-xs;
 
-//
-// emphasis
-//
-  mark,
-  .mark {
-    background-color: $mark-bg;
-    padding: $mark-padding;
+  &::before {
+    content: '\2014 \00A0';
   }
+}
 
-  small,
-  .small {
-    font-size: $small-font-size;
-    font-weight: normal;
-  }
 
-//
-// headings
-//
-  .typography-display-4 {
-    @include typography-display-4;
-  }
 
-  .typography-display-3 {
-    @include typography-display-3;
-  }
+// Emphasis
 
-  .typography-display-2 {
-    @include typography-display-2;
-  }
+mark,
+.mark {
+  background-color: $mark-bg;
+  color: $mark-color;
+  padding: $mark-padding;
+}
 
-  .typography-display-1 {
-    @include typography-display-1;
-  }
+small,
+.small {
+  font-size: $small-font-size;
+  font-weight: normal;
+}
 
-  .typography-headline {
-    @include typography-headline;
-  }
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
 
-  .typography-title {
-    @include typography-title;
-  }
 
-  .typography-subheading {
-    @include typography-subheading;
-  }
 
-  .typography-body-2 {
-    @include typography-body-2;
-  }
+// Headings
 
-  .typography-body-1 {
-    @include typography-body-1;
-  }
+.typography-display-4 {
+  @include typography-display-4;
+}
 
-  .typography-caption {
-    @include typography-caption;
-  }
+.typography-display-3 {
+  @include typography-display-3;
+}
 
-  // bootstrap classes
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    .h1,
-    .h2,
-    .h3,
-    .h4,
-    .h5,
-    .h6 {
-      color: $headings-color;
-      font-family: $headings-font-family;
-      margin-bottom: $headings-margin-bottom;
-    }
-
-    h1,
-    .h1 {
-      @extend .typography-display-2;
-    }
-
-    h2,
-    .h2 {
-      @extend .typography-display-1;
-    }
-
-    h3,
-    .h3 {
-      @extend .typography-headline;
-    }
-
-    h4,
-    .h4 {
-      @extend .typography-title;
-    }
-
-    h5,
-    .h5 {
-      @extend .typography-subheading;
-    }
-
-    h6,
-    .h6 {
-      @extend .typography-body-2;
-    }
-
-    .display-1 {
-      @extend .typography-display-4;
-    }
-
-    .display-2 {
-      @extend .typography-display-3;
-    }
-
-    .display-3 {
-      @extend .typography-display-2;
-    }
-
-    .display-4 {
-      @extend .typography-display-1;
-    }
-
-    .lead {
-      @extend .typography-title;
-    }
-
-//
-// hr
-//
-  hr {
-    border: 0;
-    border-top: $hr-border-width solid $hr-border-color;
-    margin-top: $spacer-md-y;
-    margin-bottom: $spacer-md-y;
-  }
+.typography-display-2 {
+  @include typography-display-2;
+}
 
-//
-// list
-//
-  .list-inline {
-    @include list-unstyled;
-  }
+.typography-display-1 {
+  @include typography-display-1;
+}
 
-  .list-inline-item {
-    display: inline-block;
+.typography-headline {
+  @include typography-headline;
+}
+
+.typography-title {
+  @include typography-title;
+}
+
+.typography-subheading {
+  @include typography-subheading;
+}
+
+.typography-body-2 {
+  @include typography-body-2;
+}
+
+.typography-body-1 {
+  @include typography-body-1;
+}
+
+.typography-caption {
+  @include typography-caption;
+}
 
-    &:not(:last-child) {
-      margin-right: $list-inline-item-spacer;
-    }
-  }
 
-  .list-unstyled {
-    @include list-unstyled;
-  }
 
-//
-// misc
-//
-  .initialism {
-    font-size: 90%;
-    text-transform: uppercase;
+// Headings - bootstrap classes
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  color: $headings-color;
+  font-family: $headings-font-family;
+  margin-bottom: $headings-margin-y;
+}
+
+h1,
+.h1 {
+  @include typography-display-2;
+}
+
+h2,
+.h2 {
+  @include typography-display-1;
+}
+
+h3,
+.h3 {
+  @include typography-headline;
+}
+
+h4,
+.h4 {
+  @include typography-title;
+}
+
+h5,
+.h5 {
+  @include typography-subheading;
+}
+
+h6,
+.h6 {
+  @include typography-body-2;
+}
+
+.display-1 {
+  @include typography-display-4;
+}
+
+.display-2 {
+  @include typography-display-3;
+}
+
+.display-3 {
+  @include typography-display-2;
+}
+
+.display-4 {
+  @include typography-display-1;
+}
+
+.lead {
+  @include typography-title;
+}
+
+
+
+// Hr
+
+hr {
+  border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
+  margin-top: $paragraph-margin-y;
+  margin-bottom: $paragraph-margin-y;
+}
+
+
+
+// List
+
+.list-inline {
+  @include list-unstyled;
+}
+
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-inner-spacer-x;
   }
+}
+
+.list-unstyled {
+  @include list-unstyled;
+}

data/app/assets/stylesheets/material/bootstrap/_alert.scss

@@ -1,54 +1,47 @@
 .alert {
-  background-color: $card-bg;
+  @include border-radius($alert-border-radius);
+
   border: 0;
-  box-shadow: map-get($card-elevation-shadow, shadow);
+  box-shadow: map-get($alert-elevation-shadow, shadow);
   display: block;
-  margin-bottom: $card-margin-bottom;
-  padding: $card-spacer-inner-y $card-spacer-inner-x;
-  position: relative;
-  z-index: map-get($card-elevation-shadow, elevation);
-  @include border-radius($border-radius);
+  margin-bottom: $alert-margin-y;
+  padding: $alert-padding-y $alert-padding-x;
 }
 
-// colour
-  .alert-inverse {
-    background-color: $card-bg-inverse;
-    color: $card-color-inverse;
-  }
+// Colour
+@each $color, $values in $theme-colors {
+  .alert-#{$color} {
+    @include color-yiq(map-get(theme-color($color), lighter));
 
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+    background-color: map-get(theme-color($color), lighter);
 
-    .alert-#{$color} {
-      background-color: nth($palettes-color, $i);
-      color: nth($palettes-text-color, $i);
+    .alert-link {
+      color: map-get(theme-color($color), darker);
     }
   }
+}
 
-//
-// dismissible
-//
-  .alert-dismissible {
-    padding-right: ($card-spacer-inner-x * 2);
 
-    .close {
-      position: relative;
-        top: -0.125rem;
-        right: ($card-spacer-inner-x * -1);
-    }
-  }
 
-//
-// misc
-//
-  .alert-heading {
-    color: inherit;
+// Dismissible
+
+.alert-dismissible {
+  .close {
+    padding: $btn-padding-y $btn-padding-x;
+    position: relative;
+    top: (($close-font-size - $font-size-base * $line-height-base) / -2 - $btn-padding-y);
+    right: ($btn-padding-x * -1);
   }
+}
 
-  .alert-link {
-    font-weight: $alert-link-font-weight;
 
-    @include plain-active-focus-hover {
-      color: inherit;
-    }
-  }
+
+// Misc
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}