material-sass 4.0.0.alpha6 → 4.0.0.beta

data/app/assets/stylesheets/material/utilities/_spacing.scss

@@ -1,75 +1,70 @@
-//
-// margin and padding
-//
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint);
 
-      .m#{$infix}-auto {
-        margin: auto !important;
-      }
+    .m#{$infix}-auto {
+      margin: auto !important;
+    }
 
-      .mt#{$infix}-auto {
-        margin-top: auto !important;
-      }
+    .mt#{$infix}-auto {
+      margin-top: auto !important;
+    }
 
-      .mr#{$infix}-auto {
-        margin-right: auto !important;
-      }
+    .mr#{$infix}-auto {
+      margin-right: auto !important;
+    }
 
-      .mb#{$infix}-auto {
-        margin-bottom: auto !important;
-      }
+    .mb#{$infix}-auto {
+      margin-bottom: auto !important;
+    }
 
-      .ml#{$infix}-auto {
-        margin-left: auto !important;
-      }
+    .ml#{$infix}-auto {
+      margin-left: auto !important;
+    }
 
-      .mx#{$infix}-auto {
-        margin-right: auto !important;
-        margin-left: auto !important;
-      }
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+      margin-left: auto !important;
+    }
 
-      .my#{$infix}-auto {
-        margin-top: auto !important;
-        margin-bottom: auto !important;
-      }
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+      margin-bottom: auto !important;
+    }
 
-      @each $prop, $prop-abbr in (margin: m, padding: p) {
-        @each $size, $values in $spacers {
-          $length-x: map-get($values, x);
-          $length-y: map-get($values, y);
+    @each $prop, $prop-abbr in (margin: m, padding: p) {
+      @each $size, $value in $spacers {
 
-          .#{$prop-abbr}#{$infix}-#{$size} {
-            #{$prop}: $length-y $length-x !important;
-          }
+        .#{$prop-abbr}#{$infix}-#{$size} {
+          #{$prop}: $value !important;
+        }
 
-          .#{$prop-abbr}t#{$infix}-#{$size} {
-            #{$prop}-top: $length-y !important;
-          }
+        .#{$prop-abbr}t#{$infix}-#{$size} {
+          #{$prop}-top: $value !important;
+        }
 
-          .#{$prop-abbr}r#{$infix}-#{$size} {
-            #{$prop}-right: $length-x !important;
-          }
+        .#{$prop-abbr}r#{$infix}-#{$size} {
+          #{$prop}-right: $value !important;
+        }
 
-          .#{$prop-abbr}b#{$infix}-#{$size} {
-            #{$prop}-bottom: $length-y !important;
-          }
+        .#{$prop-abbr}b#{$infix}-#{$size} {
+          #{$prop}-bottom: $value !important;
+        }
 
-          .#{$prop-abbr}l#{$infix}-#{$size} {
-            #{$prop}-left: $length-x !important;
-          }
+        .#{$prop-abbr}l#{$infix}-#{$size} {
+          #{$prop}-left: $value !important;
+        }
 
-          .#{$prop-abbr}x#{$infix}-#{$size} {
-            #{$prop}-right: $length-x !important;
-            #{$prop}-left: $length-x !important;
-          }
+        .#{$prop-abbr}x#{$infix}-#{$size} {
+          #{$prop}-right: $value !important;
+          #{$prop}-left: $value !important;
+        }
 
-          .#{$prop-abbr}y#{$infix}-#{$size} {
-            #{$prop}-top: $length-y !important;
-            #{$prop}-bottom: $length-y !important;
-          }
+        .#{$prop-abbr}y#{$infix}-#{$size} {
+          #{$prop}-top: $value !important;
+          #{$prop}-bottom: $value !important;
         }
       }
     }
   }
+}

data/app/assets/stylesheets/material/utilities/_text.scss

@@ -1,97 +1,102 @@
-// alignment
-  .text-justify {
-    text-align: justify !important;
-  }
+// Alignment
 
-  .text-nowrap {
-    white-space: nowrap !important;
-  }
+.text-justify {
+  text-align: justify !important;
+}
 
-  .text-truncate {
-    @include text-truncate;
-  }
+.text-nowrap {
+  white-space: nowrap !important;
+}
 
-  // horizontal
-    @each $breakpoint in map-keys($grid-breakpoints) {
-      @include media-breakpoint-up($breakpoint) {
-        $infix: breakpoint-infix($breakpoint);
+.text-truncate {
+  @include text-truncate;
+}
 
-        .text#{$infix}-center {
-          text-align: center !important;
-        }
+// Responsive alignment
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint);
 
-        .text#{$infix}-left {
-          text-align: left !important;
-        }
+    .text#{$infix}-center {
+      text-align: center !important;
+    }
 
-        .text#{$infix}-right {
-          text-align: right !important;
-        }
-      }
+    .text#{$infix}-left {
+      text-align: left !important;
     }
 
-// color
-  // black and white
-    @include text-emphasis-variant('.text-black', $black);
-    @include text-emphasis-variant('.text-black-primary', $black-primary);
-    @include text-emphasis-variant('.text-black-secondary', $black-secondary);
-    @include text-emphasis-variant('.text-black-hint', $black-hint);
-    @include text-emphasis-variant('.text-black-divider', $black-divider);
+    .text#{$infix}-right {
+      text-align: right !important;
+    }
+  }
+}
 
-    @include text-emphasis-variant('.text-white', $white);
-    @include text-emphasis-variant('.text-white-primary', $white-primary);
-    @include text-emphasis-variant('.text-white-secondary', $white-secondary);
-    @include text-emphasis-variant('.text-white-hint', $white-hint);
-    @include text-emphasis-variant('.text-white-divider', $white-divider);
 
-  // font colour
-    @include text-emphasis-variant('.text-gray-dark', $black-primary, $black);
 
-  // offwhite
-    @include text-emphasis-variant('.text-muted', $text-muted, $text-muted-active);
+// Color
 
-  // palette
-    @each $color in $palettes {
-      $i: index($palettes, $color);
+// Black and white
+@include text-emphasis-variant('.text-black', $black);
+@include text-emphasis-variant('.text-black-primary', $black-primary);
+@include text-emphasis-variant('.text-black-secondary', $black-secondary);
+@include text-emphasis-variant('.text-black-hint', $black-hint);
+@include text-emphasis-variant('.text-black-divider', $black-divider);
 
-      @include text-emphasis-variant('.text-#{$color}', nth($palettes-color, $i), nth($palettes-color-dark, $i));
-    }
+@include text-emphasis-variant('.text-white', $white);
+@include text-emphasis-variant('.text-white-primary', $white-primary);
+@include text-emphasis-variant('.text-white-secondary', $white-secondary);
+@include text-emphasis-variant('.text-white-hint', $white-hint);
+@include text-emphasis-variant('.text-white-divider', $white-divider);
 
-    @include text-emphasis-variant('.text-inverse', $white-primary, $white);
+@include text-emphasis-variant('.text-muted', $text-muted);
 
-// italcs and weight
-  .font-italic {
-    font-style: italic;
-  }
+// Palette
+@each $color, $values in $theme-colors {
+  @include text-emphasis-variant('.text-#{$color}', map-get(theme-color($color), color), map-get(theme-color($color), darker));
+}
 
-  .font-weight-bold,
-  .font-weight-medium {
-    font-weight: $font-weight-medium;
-  }
 
-  .font-weight-light {
-    font-weight: $font-weight-light;
-  }
 
-  .font-weight-normal,
-  .font-weight-regular {
-    font-weight: $font-weight-regular;
-  }
+// Italcs and weight
 
-// misc
-  .text-hide {
-    @include text-hide;
-  }
+.font-italic {
+  font-style: italic;
+}
 
-// transformation
-  .text-capitalize {
-    text-transform: capitalize !important;
-  }
+.font-weight-bold,
+.font-weight-medium {
+  font-weight: $font-weight-medium;
+}
 
-  .text-lowercase {
-    text-transform: lowercase !important;
-  }
+.font-weight-light {
+  font-weight: $font-weight-light;
+}
 
-  .text-uppercase {
-    text-transform: uppercase !important;
-  }
+.font-weight-normal,
+.font-weight-regular {
+  font-weight: $font-weight-regular;
+}
+
+
+
+// Misc
+
+.text-hide {
+  @include text-hide;
+}
+
+
+
+// Transformation
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}

data/app/assets/stylesheets/material/utilities/_visibility.scss

@@ -1,50 +1,9 @@
+// Utilities for common `visibility` values
+
 .invisible {
   visibility: hidden !important;
 }
 
-//
-// print
-//
-  .hidden-print {
-    @media print {
-      display: none !important;
-    }
-  }
-
-  .visible-print-block {
-    display: none !important;
-    @media print {
-      display: block !important;
-    }
-  }
-
-  .visible-print-inline {
-    display: none !important;
-    @media print {
-      display: inline !important;
-    }
-  }
-
-  .visible-print-inline-block {
-    display: none !important;
-    @media print {
-      display: inline-block !important;
-    }
-  }
-
-//
-// responsive
-//
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    .hidden-#{$breakpoint}-up {
-      @include media-breakpoint-up($breakpoint) {
-        display: none !important;
-      }
-    }
-
-    .hidden-#{$breakpoint}-down {
-      @include media-breakpoint-down($breakpoint) {
-        display: none !important;
-      }
-    }
-  }
+.visible {
+  visibility: visible !important;
+}

data/app/assets/stylesheets/material/utilities/_waves.scss

@@ -1,12 +1,10 @@
-/*
- * waves v0.7.4
- * http://fian.my.id/Waves
- */
-
 .waves-effect {
   position: relative;
   -webkit-tap-highlight-color: transparent;
+
   .waves-ripple {
+    @include transition-standard(opacity, transform);
+
     background-clip: content-box;
     background-color: $waves-bg;
     border-radius: 50%;
@@ -17,8 +15,8 @@
     position: absolute;
     transform: scale(0) translate(0, 0);
     width: $waves-size;
-    @include transition-standard(opacity, transform);
   }
+
   &.waves-light .waves-ripple {
     background-color: $waves-bg-light;
   }
@@ -28,21 +26,16 @@
   overflow: hidden;
   pointer-events: none;
   position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   user-select: none;
+
   .waves-circle > & {
     border-radius: 50%;
-
-    // r='0' disables rendering of the element
-    // the fake mask fixes an issue in Firefox
-    // it replaces `mask: url()` in previous versions
-    // because `url()` may cause issues with some build tools
-    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='none' r='0' stroke-width='0' /%3E%3C/svg%3E");
-
+    mask: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle fill="none" r="0" stroke-width="0" /%3E%3C/svg%3E');
+    mask-image: radial-gradient(circle, $white 100%, $black 100%);
     transform: translateZ(0);
-    -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
   }
 }

data/app/assets/stylesheets/material/variables/_elevation-shadow.scss

@@ -1,84 +1,91 @@
-//
-// elevation
-// based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
-//
-//
-  $elevation-24dp: 24 * 10 !default;
-  $elevation-16dp: 16 * 10 !default;
-  $elevation-12dp: 12 * 10 !default;
-  $elevation-8dp:  8 * 10 !default;
-  $elevation-6dp:  6 * 10 !default;
-  $elevation-4dp:  4 * 10 !default;
-  $elevation-3dp:  3 * 10 !default;
-  $elevation-2dp:  2 * 10 !default;
-  $elevation-1dp:  1 * 10 !default;
+// Elevation
+// Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
 
-//
-// shadow
-// based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
-//
-  $shadow-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-                0 9px 46px 8px rgba(0, 0, 0, 0.12),
-                0 11px 15px -7px rgba(0, 0, 0, 0.4) !default;
-  $shadow-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-                0 6px 30px 5px rgba(0, 0, 0, 0.12),
-                0 8px 10px -5px rgba(0, 0, 0, 0.4) !default;
-  $shadow-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
-                0 4px 22px 3px rgba(0, 0, 0, 0.12),
-                0 6px 7px -4px rgba(0, 0, 0, 0.4) !default;
-  $shadow-8dp:  0 8px 10px 1px rgba(0, 0, 0, 0.14),
-                0 3px 14px 2px rgba(0, 0, 0, 0.12),
-                0 5px 5px -3px rgba(0, 0, 0, 0.4) !default;
-  $shadow-6dp:  0 6px 10px 0 rgba(0, 0, 0, 0.14),
-                0 1px 18px 0 rgba(0, 0, 0, 0.12),
-                0 3px 5px -1px rgba(0, 0, 0, 0.4) !default;
-  $shadow-4dp:  0 4px 5px 0 rgba(0, 0, 0, 0.14),
-                0 1px 10px 0 rgba(0, 0, 0, 0.12),
-                0 2px 4px -1px rgba(0, 0, 0, 0.4) !default;
-  $shadow-3dp:  0 3px 4px 0 rgba(0, 0, 0, 0.14),
-                0 1px 8px 0 rgba(0, 0, 0, 0.12),
-                0 3px 3px -2px rgba(0, 0, 0, 0.4) !default;
-  $shadow-2dp:  0 2px 2px 0 rgba(0, 0, 0, 0.14),
-                0 1px 5px 0 rgba(0, 0, 0, 0.12),
-                0 3px 1px -2px rgba(0, 0, 0, 0.2) !default;
-  $shadow-1dp:  none !default;
+$elevation-24dp: 24 * 10 !default;
+$elevation-16dp: 16 * 10 !default;
+$elevation-12dp: 12 * 10 !default;
+$elevation-8dp:  8 * 10 !default;
+$elevation-6dp:  6 * 10 !default;
+$elevation-4dp:  4 * 10 !default;
+$elevation-3dp:  3 * 10 !default;
+$elevation-2dp:  2 * 10 !default;
+$elevation-1dp:  1 * 10 !default;
 
-//
-// value pair
-//
-  $elevation-shadow-24dp: (
-    elevation: $elevation-24dp,
-    shadow: $shadow-24dp
-  ) !default;
-  $elevation-shadow-16dp: (
-    elevation: $elevation-16dp,
-    shadow: $shadow-16dp
-  ) !default;
-  $elevation-shadow-12dp: (
-    elevation: $elevation-12dp,
-    shadow: $shadow-12dp
-  ) !default;
-  $elevation-shadow-8dp:  (
-    elevation: $elevation-8dp,
-    shadow: $shadow-8dp
-  ) !default;
-  $elevation-shadow-6dp:  (
-    elevation: $elevation-6dp,
-    shadow: $shadow-6dp
-  ) !default;
-  $elevation-shadow-4dp:  (
-    elevation: $elevation-4dp,
-    shadow: $shadow-4dp
-  ) !default;
-  $elevation-shadow-3dp:  (
-    elevation: $elevation-3dp,
-    shadow: $shadow-3dp
-  ) !default;
-  $elevation-shadow-2dp:  (
-    elevation: $elevation-2dp,
-    shadow: $shadow-2dp
-  ) !default;
-  $elevation-shadow-1dp:  (
-    elevation: $elevation-1dp,
-    shadow: $shadow-1dp
-  ) !default;
+
+
+// Shadow
+// Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
+
+$shadow-color-1: rgba(0, 0, 0, .14) !default;
+$shadow-color-2: rgba(0, 0, 0, .12) !default;
+$shadow-color-3: rgba(0, 0, 0, .2) !default;
+
+$shadow-24dp:    0 24px 38px 3px $shadow-color-1,
+                 0 9px 46px 8px $shadow-color-2,
+                 0 11px 15px 0 $shadow-color-3 !default;
+$shadow-16dp:    0 16px 24px 2px $shadow-color-1,
+                 0 6px 30px 5px $shadow-color-2,
+                 0 8px 10px 0 $shadow-color-3 !default;
+$shadow-12dp:    0 12px 17px 2px $shadow-color-1,
+                 0 5px 22px 4px $shadow-color-2,
+                 0 7px 8px 0 $shadow-color-3 !default;
+$shadow-8dp:     0 8px 10px 1px $shadow-color-1,
+                 0 3px 14px 3px $shadow-color-2,
+                 0 4px 15px 0 $shadow-color-3 !default;
+$shadow-6dp:     0 6px 10px 0 $shadow-color-1,
+                 0 1px 18px 0 $shadow-color-2,
+                 0 3px 5px 0 $shadow-color-3 !default;
+$shadow-4dp:     0 2px 4px 0 $shadow-color-1,
+                 0 4px 5px 0 $shadow-color-2,
+                 0 1px 10px 0 $shadow-color-3 !default;
+$shadow-3dp:     0 3px 3px 0 $shadow-color-1,
+                 0 3px 4px 0 $shadow-color-2,
+                 0 1px 8px 0 $shadow-color-3 !default;
+$shadow-2dp:     0 0 4px 0 $shadow-color-1,
+                 0 3px 4px 0 $shadow-color-2,
+                 0 1px 5px 0 $shadow-color-3 !default;
+$shadow-1dp:     0 0 2px 0 $shadow-color-1,
+                 0 2px 2px 0 $shadow-color-2,
+                 0 1px 3px 0 $shadow-color-3 !default;
+
+
+
+// Value pair
+// Combination of elevation and shadow
+
+$elevation-shadow-24dp: (
+  elevation: $elevation-24dp,
+  shadow: $shadow-24dp
+) !default;
+$elevation-shadow-16dp: (
+  elevation: $elevation-16dp,
+  shadow: $shadow-16dp
+) !default;
+$elevation-shadow-12dp: (
+  elevation: $elevation-12dp,
+  shadow: $shadow-12dp
+) !default;
+$elevation-shadow-8dp:  (
+  elevation: $elevation-8dp,
+  shadow: $shadow-8dp
+) !default;
+$elevation-shadow-6dp:  (
+  elevation: $elevation-6dp,
+  shadow: $shadow-6dp
+) !default;
+$elevation-shadow-4dp:  (
+  elevation: $elevation-4dp,
+  shadow: $shadow-4dp
+) !default;
+$elevation-shadow-3dp:  (
+  elevation: $elevation-3dp,
+  shadow: $shadow-3dp
+) !default;
+$elevation-shadow-2dp:  (
+  elevation: $elevation-2dp,
+  shadow: $shadow-2dp
+) !default;
+$elevation-shadow-1dp:  (
+  elevation: $elevation-1dp,
+  shadow: $shadow-1dp
+) !default;