material-sass 4.0.0.beta3 → 4.0.0

data/assets/stylesheets/material/mixins/_grid-framework.scss

@@ -44,6 +44,10 @@
       .order#{$infix}-first {
         order: -1;
       }
+
+      .order#{$infix}-last {
+        order: $grid-columns + 1;
+      }
     }
 
     .col#{$infix},
@@ -53,9 +57,9 @@
   }
 
   %grid-column {
-    @include make-gutters;
-
     min-height: 1px;
+    padding-right: ($grid-gutter-width / 2);
+    padding-left: ($grid-gutter-width / 2);
     position: relative;
     width: 100%;
   }

data/assets/stylesheets/material/mixins/_grid.scss

@@ -1,5 +1,4 @@
 // Make column
-
 @mixin make-col($size) {
   flex: 0 0 percentage($size / $grid-columns);
   max-width: percentage($size / $grid-columns);
@@ -11,29 +10,21 @@
   margin-left: if($num == 0, 0, percentage($num));
 }
 
-@mixin make-gutters($type: padding) {
-  @each $breakpoint in map-keys($grid-gutter-widths) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($grid-gutter-widths, $breakpoint);
-
-      @if ($type == margin) {
-        margin-right: ($gutter / -2);
-        margin-left: ($gutter / -2);
-      } @else if ($type == padding) {
-        padding-right: ($gutter / 2);
-        padding-left: ($gutter / 2);
-      }
-    }
-  }
+@mixin make-col-ready() {
+  min-height: 1px;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
+  position: relative;
+  width: 100%;
 }
 
 // Make container
 
 @mixin make-container() {
-  @include make-gutters;
-
   margin-right: auto;
   margin-left: auto;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
   width: 100%;
 }
 
@@ -48,8 +39,8 @@
 // Make row
 
 @mixin make-row() {
-  @include make-gutters(margin);
-
   display: flex;
   flex-wrap: wrap;
+  margin-right: ($grid-gutter-width / -2);
+  margin-left: ($grid-gutter-width / -2);
 }

data/assets/stylesheets/material/utilities/_background.scss

@@ -15,5 +15,5 @@
 // Palette
 
 @each $color, $values in $theme-colors {
-  @include bg-variant('.bg-#{$color}', map-get(theme-color($color), color), map-get(theme-color($color), darker));
+  @include bg-variant('.bg-#{$color}', theme-color($color), theme-color-dark($color));
 }

data/assets/stylesheets/material/utilities/_border.scss

@@ -42,7 +42,6 @@
   border-left: 0 !important;
 }
 
-// Colour
 .border-black {
   border-color: $black !important;
 }
@@ -85,7 +84,7 @@
 
 @each $color, $values in $theme-colors {
   .border-#{$color} {
-    border-color: map-get(theme-color($color), color) !important;
+    border-color: theme-color($color) !important;
   }
 }
 

data/assets/stylesheets/material/utilities/_display.scss

@@ -46,32 +46,40 @@
 
 // Utilities for toggling `display` in print
 
-.d-print-block {
-  display: none !important;
-
-  @media print {
+@media print {
+  .d-print-block {
     display: block !important;
   }
-}
 
-.d-print-inline {
-  display: none !important;
+  .d-print-flex {
+    display: flex !important;
+  }
 
-  @media print {
+  .d-print-inline {
     display: inline !important;
   }
-}
 
-.d-print-inline-block {
-  display: none !important;
-
-  @media print {
+  .d-print-inline-block {
     display: inline-block !important;
   }
-}
 
-.d-print-none {
-  @media print {
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-print-none {
     display: none !important;
   }
+
+  .d-print-table {
+    display: table !important;
+  }
+
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-print-table-row {
+    display: table-row !important;
+  }
 }

data/assets/stylesheets/material/utilities/_flex.scss

@@ -98,6 +98,10 @@
 
     // Flex wrap
 
+    .flex#{$infix}-fill {
+      flex: 1 1 auto !important;
+    }
+
     .flex#{$infix}-nowrap {
       flex-wrap: nowrap !important;
     }

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

@@ -47,7 +47,7 @@
 @include text-emphasis-variant('.text-muted', $text-muted);
 
 @each $color, $values in $theme-colors {
-  @include text-emphasis-variant('.text-#{$color}', map-get(theme-color($color), color), map-get(theme-color($color), darker));
+  @include text-emphasis-variant('.text-#{$color}', theme-color($color), theme-color-dark($color));
 }
 
 // Italcs and weight

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

@@ -7,7 +7,6 @@ $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;
 
@@ -24,7 +23,6 @@ $shadow-12dp:    0 12px 17px 2px $shadow-color-1, 0 5px 22px 4px $shadow-color-2
 $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;
 
@@ -55,10 +53,6 @@ $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

data/assets/stylesheets/material/variables/_grid.scss

@@ -1,24 +1,15 @@
-$grid-columns:              12 !default;
-$grid-gutter-width-base:    16px !default;
-$grid-gutter-width-desktop: 24px !default;
-
-$grid-gutter-widths: (
-  xs: $grid-gutter-width-base,
-  sm: $grid-gutter-width-base,
-  md: $grid-gutter-width-desktop,
-  lg: $grid-gutter-width-desktop,
-  xl: $grid-gutter-width-desktop
-) !default;
+$grid-columns:      12 !default;
+$grid-gutter-width: 40px !default;
 
 // Breakpoint
 // Based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
 
 $grid-breakpoints: (
   xs: 0,
-  sm: 600px,
-  md: 960px,
-  lg: 1280px,
-  xl: 1920px
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
@@ -28,10 +19,10 @@ $grid-breakpoints: (
 // Based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
 
 $container-max-widths: (
-  sm: 600px,
-  md: 840px,
-  lg: 1024px,
-  xl: 1600px
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
 ) !default;
 
 @include _assert-ascending($container-max-widths, '$container-max-widths');

data/assets/stylesheets/material/variables/_palette.scss

@@ -2,55 +2,54 @@
 // Change these values to customise colour palettes
 
 $primary: (
-  color:   $material-color-purple-500,
-  darker:  $material-color-purple-700,
-  lighter: $material-color-purple-100
+  color: $material-color-purple-500,
+  dark:  $material-color-purple-700,
+  light: $material-color-purple-100
 ) !default;
 
 $secondary: (
-  color:   $material-color-pink-a200,
-  darker:  $material-color-pink-a400,
-  lighter: $material-color-pink-a100
+  color: $material-color-pink-a200,
+  dark:  $material-color-pink-a400,
+  light: $material-color-pink-a100
 ) !default;
 
 $danger: (
-  color:   $material-color-red-500,
-  darker:  $material-color-red-700,
-  lighter: $material-color-red-100
+  color: $material-color-red-500,
+  dark:  $material-color-red-700,
+  light: $material-color-red-100
 ) !default;
 
 $info: (
-  color:   $material-color-blue-500,
-  darker:  $material-color-blue-700,
-  lighter: $material-color-blue-100
+  color: $material-color-blue-500,
+  dark:  $material-color-blue-700,
+  light: $material-color-blue-100
 ) !default;
 
 $success: (
-  color:   $material-color-green-500,
-  darker:  $material-color-green-700,
-  lighter: $material-color-green-100
+  color: $material-color-green-500,
+  dark:  $material-color-green-700,
+  light: $material-color-green-100
 ) !default;
 
 $warning: (
-  color:   $material-color-orange-500,
-  darker:  $material-color-orange-700,
-  lighter: $material-color-orange-100
+  color: $material-color-orange-500,
+  dark:  $material-color-orange-700,
+  light: $material-color-orange-100
 ) !default;
 
 $dark: (
-  color:   $material-color-grey-800,
-  darker:  $material-color-grey-900,
-  lighter: $material-color-grey-600
+  color: $material-color-grey-800,
+  dark:  $material-color-grey-900,
+  light: $material-color-grey-600
 ) !default;
 
 $light: (
-  color:   $material-color-grey-100,
-  darker:  $material-color-grey-300,
-  lighter: $material-color-grey-050
+  color: $material-color-grey-100,
+  dark:  $material-color-grey-300,
+  light: $material-color-grey-050
 ) !default;
 
 $theme-colors: () !default;
-
 $theme-colors: map-merge(
   (
     'primary':   $primary,
@@ -66,3 +65,5 @@ $theme-colors: map-merge(
 );
 
 $yiq-contrasted-threshold: 150 !default;
+$yiq-text-dark:            $black-primary !default;
+$yiq-text-light:           $white-primary !default;

data/assets/stylesheets/material/variables/_spacer.scss

@@ -1,14 +1,19 @@
 $border-color:       $black-divider !default;
-$border-color-solid: $black-divider-solid !default;
+$border-color-solid: #e1e1e1 !default;
 $border-radius:      2px !default;
 $border-width:       1px !default;
 
-$sizes: (
-  25: 25%,
-  50: 50%,
-  75: 75%,
-  100: 100%
-) !default;
+$sizes: () !default;
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
 
 $spacer:      1rem !default;
 
@@ -17,17 +22,15 @@ $spacer-sm:   ($spacer * 0.5) !default;
 $spacer-lg:   ($spacer * 1.5) !default;
 $spacer-xl:   ($spacer * 3) !default;
 
-$spacers: (
-  0: 0,
-  no: 0,
-  1: $spacer-xs,
-  xs: $spacer-xs,
-  2: $spacer-sm,
-  sm: $spacer-sm,
-  3: $spacer,
-  md: $spacer,
-  4: $spacer-lg,
-  lg: $spacer-lg,
-  5: $spacer-xl,
-  xl: $spacer-xl
-) !default;
+$spacers: () !default;
+$spacers: map-merge(
+  (
+    0: 0,
+    1: $spacer-xs,
+    2: $spacer-sm,
+    3: $spacer,
+    4: $spacer-lg,
+    5: $spacer-xl
+  ),
+  $spacers
+);

data/assets/stylesheets/material/variables/_typography.scss

@@ -16,7 +16,6 @@ $font-family-serif:      'Roboto Slab', Georgia, 'Times New Roman', Times, serif
 
 $font-family-base:       $font-family-sans-serif !default;
 
-$font-weight-bold:       700 !default;
 $font-weight-medium:     500 !default;
 $font-weight-regular:    400 !default;
 $font-weight-light:      300 !default;

data/assets/stylesheets/material/variables/_variable-bootstrap.scss

@@ -83,14 +83,12 @@ $pre-scrollable-max-height: 340px !default;
 // Form
 
 $custom-file-button-icon:     'attachment' !default;
-$custom-file-width:           14rem !default;
-$custom-file-text:            (en: 'Choose file...') !default;
 
 $form-check-inline-margin-x:  $spacer-sm !default;
-$form-check-input-margin-x:   $spacer-xs !default;
+$form-check-input-gutter:     1.25rem !default;
 
-$form-feedback-invalid-color: map-get(theme-color(danger), color) !default;
-$form-feedback-valid-color:   map-get(theme-color(success), color) !default;
+$form-feedback-invalid-color: theme-color(danger) !default;
+$form-feedback-valid-color:   theme-color(success) !default;
 
 $form-group-margin-y:         $spacer !default;
 
@@ -107,14 +105,14 @@ $jumbotron-padding-y:        3rem !default;
 
 // Link
 
-$link-color:            map-get(theme-color(primary), color) !default;
-$link-color-hover:      map-get(theme-color(primary), darker) !default;
+$link-color:            theme-color(primary) !default;
+$link-color-hover:      theme-color(primary) !default;
 $link-decoration:       none !default;
 $link-decoration-hover: underline !default;
 
 // Misc
 
-$blockquote-border-color:    map-get(theme-color(primary), color) !default;
+$blockquote-border-color:    theme-color(primary) !default;
 $blockquote-border-width:    0.3125rem !default;
 $blockquote-small-color:     $black-hint !default;
 
@@ -157,7 +155,7 @@ $nav-link-padding-y:      0.5rem !default;
 $nav-pills-bg-hover:      $black-divider !default;
 $nav-pills-border-radius: $border-radius !default;
 $nav-pills-color:         $black-primary !default;
-$nav-pills-color-active:  map-get(theme-color(secondary), color) !default;
+$nav-pills-color-active:  theme-color(secondary) !default;
 $nav-pills-link-opacity:  0.7 !default;
 
 // Pagination