material-sass 4.0.0.beta3 → 4.0.0

data/assets/stylesheets/material/material/_progress.scss

@@ -15,10 +15,10 @@
   @each $color, $values in $theme-colors {
     &.bg-#{$color} {
       background-color: transparent !important; // stylelint-disable-line declaration-no-important
-      border-bottom-color: map-get(theme-color($color), color);
+      border-bottom-color: theme-color($color);
 
       &::after {
-        background-color: map-get(theme-color($color), lighter);
+        background-color: theme-color-light($color);
       }
     }
   }
@@ -64,9 +64,9 @@
   @each $color, $values in $theme-colors {
     &.bg-#{$color}::before {
       // stylelint-disable value-no-vendor-prefix
-      background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-      background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-      background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
       // stylelint-enable
     }
   }
@@ -122,11 +122,11 @@
 
   @each $color, $values in $theme-colors {
     &.bg-#{$color} {
-      border-bottom-color: map-get(theme-color($color), lighter);
+      border-bottom-color: theme-color-light($color);
 
       &::after,
       &::before {
-        background-color: map-get(theme-color($color), color);
+        background-color: theme-color($color);
       }
 
       &::before {

data/assets/stylesheets/material/material/_tab.scss

@@ -90,6 +90,10 @@
     &.show {
       display: block;
     }
+
+    .nav-tabs-scrollable & {
+      bottom: $nav-tab-height;
+    }
   }
 }
 

data/assets/stylesheets/material/material/_text-field-box.scss

@@ -4,27 +4,27 @@
 
     padding-top: 0;
 
-    &.has-value > label,
-    &.is-focused > label {
+    &.has-value label,
+    &.is-focused label {
       top: $textfield-box-label-spacer-y;
     }
 
-    > .form-control {
+    .form-control {
       padding-bottom: ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem);
     }
   }
 
-  > .form-control {
+  // stylelint-disable-next-line selector-no-qualifying-type
+  select.form-control:not([multiple]):not([size]) {
+    @include form-select-size($textfield-font-size, $textfield-box-height, $textfield-box-padding-x);
+  }
+
+  .form-control {
     @include form-control-size($textfield-font-size, $textfield-box-height, $textfield-line-height, $textfield-box-padding-x, $textfield-box-padding-y);
 
     background-color: $textfield-box-bg;
     border-radius: $textfield-box-border-radius;
   }
-
-  // stylelint-disable-next-line selector-no-qualifying-type
-  > select.form-control:not([multiple]):not([size]) {
-    @include form-select-size($textfield-font-size, $textfield-box-height, $textfield-box-padding-x);
-  }
 }
 
 // Size
@@ -33,14 +33,14 @@
     @include textfield-box-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-line-height-lg, $textfield-box-padding-x-lg, $textfield-box-padding-y-lg);
   }
 
-  > .form-control {
-    @include form-control-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-line-height-lg, $textfield-box-padding-x-lg, $textfield-box-padding-y-lg);
-  }
-
   // stylelint-disable-next-line selector-no-qualifying-type
-  > select.form-control:not([multiple]):not([size]) {
+  select.form-control:not([multiple]):not([size]) {
     @include form-select-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-box-padding-x-lg);
   }
+
+  .form-control {
+    @include form-control-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-line-height-lg, $textfield-box-padding-x-lg, $textfield-box-padding-y-lg);
+  }
 }
 
 .textfield-box-sm {
@@ -48,12 +48,12 @@
     @include textfield-box-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-line-height-sm, $textfield-box-padding-x-sm, $textfield-box-padding-y-sm);
   }
 
-  > .form-control {
-    @include form-control-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-line-height-sm, $textfield-box-padding-x-sm, $textfield-box-padding-y-sm);
-  }
-
   // stylelint-disable-next-line selector-no-qualifying-type
-  > select.form-control:not([multiple]):not([size]) {
+  select.form-control:not([multiple]):not([size]) {
     @include form-select-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-box-padding-x-sm);
   }
+
+  .form-control {
+    @include form-control-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-line-height-sm, $textfield-box-padding-x-sm, $textfield-box-padding-y-sm);
+  }
 }

data/assets/stylesheets/material/material/_text-field-floating-label.scss

@@ -4,17 +4,17 @@
   padding-top: $floating-label-font-size-focus;
   position: relative;
 
-  &.has-value > label,
-  &.is-focused > label {
+  &.has-value label,
+  &.is-focused label {
     line-height: 1;
     top: 0;
   }
 
-  &.is-focused > label {
+  &.is-focused label {
     color: $floating-label-color-focus;
   }
 
-  &:not(.has-value):not(.is-focused) > .form-control {
+  &:not(.has-value):not(.is-focused) .form-control {
     &[type='date'],
     &[type='datetime-local'],
     &[type='time'] {
@@ -22,7 +22,7 @@
     }
   }
 
-  > label {
+  label {
     @include text-truncate;
     @include transition-standard(color, top, transform);
 
@@ -35,7 +35,7 @@
     transform-origin: 0 0;
   }
 
-  > .form-control {
+  .form-control {
     position: relative;
 
     &[type='file']::-webkit-file-upload-button {
@@ -66,7 +66,7 @@
 .floating-label-lg {
   @include floating-label-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-y-lg);
 
-  > .form-control {
+  .form-control {
     @extend %form-control-lg;
   }
 }
@@ -74,7 +74,7 @@
 .floating-label-sm {
   @include floating-label-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-y-sm);
 
-  > .form-control {
+  .form-control {
     @extend %form-control-sm;
   }
 }

data/assets/stylesheets/material/material/_text-field-input-group.scss

@@ -5,9 +5,9 @@
   position: relative;
   width: 100%;
 
-  .custom-file,
-  .custom-select,
-  .form-control {
+  > .custom-file,
+  > .custom-select,
+  > .form-control {
     flex: 1 1 auto;
     margin-bottom: 0;
     width: 1%;

data/assets/stylesheets/material/material/_text-field.scss

@@ -59,11 +59,11 @@
 
 @each $color, $values in $theme-colors {
   .form-control-#{$color} {
-    border-color: map-get(theme-color($color), color);
+    border-color: theme-color($color);
 
     @include focus-hover {
-      border-color: map-get(theme-color($color), color);
-      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) map-get(theme-color($color), color);
+      border-color: theme-color($color);
+      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) theme-color($color);
     }
   }
 }

data/assets/stylesheets/material/material/_toolbar.scss

@@ -25,21 +25,6 @@
 
   // Vertically align some elements normally placed in `.navbar`
 
-  .btn {
-    margin-top: (($btn-height - $toolbar-element-height) / -2);
-    margin-bottom: (($btn-height - $toolbar-element-height) / -2);
-  }
-
-  .btn-lg {
-    margin-top: (($btn-height-lg - $toolbar-element-height) / -2);
-    margin-bottom: (($btn-height-lg - $toolbar-element-height) / -2);
-  }
-
-  .btn-sm {
-    margin-top: (($btn-height-sm - $toolbar-element-height) / -2);
-    margin-bottom: (($btn-height-sm - $toolbar-element-height) / -2);
-  }
-
   .form-control {
     @include border-radius($toolbar-element-border-radius);
     @include transition-standard(opacity);
@@ -47,9 +32,8 @@
     background-color: $toolbar-element-bg;
     border: 0;
     color: inherit;
-    height: $toolbar-element-height;
     opacity: $toolbar-element-opacity;
-    padding: (($toolbar-element-height - $textfield-font-size * $textfield-line-height) / 2) $toolbar-inner-spacer-x;
+    padding: (($textfield-height - $textfield-font-size * $textfield-line-height) / 2) $toolbar-inner-spacer-x;
 
     @include focus-hover {
       box-shadow: none;
@@ -57,12 +41,14 @@
     }
   }
 
-  .form-inline {
-    margin-left: $toolbar-inner-spacer-x;
+  .form-control-lg {
+    padding-top: (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2);
+    padding-bottom: (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2);
+  }
 
-    &:first-child {
-      margin-left: 0;
-    }
+  .form-control-sm {
+    padding-top: (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2);
+    padding-bottom: (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2);
   }
 
   .input-group {
@@ -77,16 +63,42 @@
     }
 
     .form-control {
-      @include border-radius(0);
-
       background-color: transparent;
-      margin-left: 0;
       opacity: 1;
+
+      &:not(:first-child) {
+        padding-left: 0;
+      }
+
+      &:not(:last-child) {
+        padding-right: 0;
+      }
     }
 
-    .input-group-addon {
+    .input-group-append {
       margin-left: 0;
+      min-width: 0;
+    }
+
+    .input-group-prepend {
+      margin-right: 0;
+      min-width: 0;
     }
+
+    .input-group-text {
+      margin-right: $toolbar-inner-spacer-x;
+      margin-left: $toolbar-inner-spacer-x;
+    }
+  }
+
+  .input-group-lg > .form-control {
+    padding-top: (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2);
+    padding-bottom: (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2);
+  }
+
+  .input-group-sm > .form-control {
+    padding-top: (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2);
+    padding-bottom: (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2);
   }
 
   .nav-tabs {
@@ -180,7 +192,6 @@
   color: inherit;
   display: inline-flex;
   height: $toolbar-element-height;
-  margin-left: $toolbar-inner-spacer-x;
   position: relative;
   white-space: nowrap;
 
@@ -203,10 +214,6 @@
     left: ($toolbar-inner-spacer-x / -2);
   }
 
-  &:first-child {
-    margin-left: 0;
-  }
-
   &:focus {
     outline: 0;
 
@@ -214,6 +221,14 @@
       opacity: 1;
     }
   }
+
+  &:not(:first-child) {
+    margin-left: $toolbar-inner-spacer-x;
+  }
+
+  &:not(:last-child) {
+    margin-right: $toolbar-inner-spacer-x;
+  }
 }
 
 .navbar-text {
@@ -222,11 +237,6 @@
   display: inline-flex;
   flex-wrap: wrap;
   height: $toolbar-element-height;
-  margin-left: $toolbar-inner-spacer-x;
-
-  &:first-child {
-    margin-left: 0;
-  }
 }
 
 // Nav
@@ -294,22 +304,6 @@
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        .navbar-collapse {
-          .form-inline,
-          .navbar-brand,
-          .navbar-text {
-            margin-left: 0;
-          }
-
-          > :first-child {
-            margin-top: $toolbar-inner-spacer-y;
-          }
-
-          > :not(:last-child) {
-            margin-bottom: $toolbar-inner-spacer-y;
-          }
-        }
-
         > .container,
         > .container-fluid {
           padding-right: 0;
@@ -326,16 +320,10 @@
           flex-basis: auto;
         }
 
-        .navbar-nav {
-          flex-wrap: nowrap;
-        }
-
         .navbar-toggler {
           display: none;
 
-          + .form-inline,
-          + .navbar-brand,
-          + .navbar-text {
+          &:first-child + .navbar-brand {
             margin-left: 0;
           }
         }
@@ -360,7 +348,6 @@
   height: $toolbar-element-height;
   justify-content: center;
   line-height: 1;
-  margin-left: $toolbar-inner-spacer-x;
   padding: 0;
   position: relative;
   width: $toolbar-element-height;
@@ -389,15 +376,11 @@
     left: 0;
   }
 
-  &:first-child {
-    margin-left: 0;
-  }
-
   &:focus {
     outline: 0;
   }
 
-  &:not([disabled]):not(.disabled) {
+  &:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
 }

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

@@ -15,10 +15,29 @@
 }
 
 @function breakpoint-next($name) {
-  $map: map-keys($grid-breakpoints);
-  $n: index($map, $name);
+  $breakpoint-names: map-keys($grid-breakpoints);
+  $n: index($breakpoint-names, $name);
 
-  @return if($n < length($map), nth($map, $n + 1), null);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+@mixin media-breakpoint-between($lower, $upper) {
+  $max: breakpoint-max($upper);
+  $min: breakpoint-min($lower);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper) {
+      @content;
+    }
+  }
 }
 
 @mixin media-breakpoint-down($name) {
@@ -33,34 +52,33 @@
   }
 }
 
-@mixin media-breakpoint-up($name) {
+@mixin media-breakpoint-only($name) {
+  $max: breakpoint-max($name);
   $min: breakpoint-min($name);
 
-  @if $min {
-    @media (min-width: $min) {
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name) {
       @content;
     }
-  } @else {
-    @content;
-  }
-}
-
-// Additional mixins
-
-@mixin media-breakpoint-between($lower, $upper) {
-  $max: breakpoint-max($upper);
-  $min: breakpoint-min($lower);
-
-  @media (min-width: $min) and (max-width: $max) {
-    @content;
   }
 }
 
-@mixin media-breakpoint-only($name) {
-  $max: breakpoint-max($name);
+@mixin media-breakpoint-up($name) {
   $min: breakpoint-min($name);
 
-  @media (min-width: $min) and (max-width: $max) {
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
     @content;
   }
 }