material-sass 4.0.0.beta2 → 4.0.0.beta3

data/assets/stylesheets/material/bootstrap/_custom-form.scss

@@ -7,31 +7,41 @@
 .custom-file {
   display: inline-block;
   height: $textfield-height;
-  max-width: 100%;
+  margin-bottom: 0;
   position: relative;
+  width: 100%;
 }
 
-.custom-file-control {
+.custom-file-input {
+  height: $textfield-height;
+  margin: 0;
+  opacity: 0;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+
+  @include focus-hover {
+    ~ .custom-file-label {
+      border-bottom-color: $textfield-border-color-focus;
+      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
+    }
+  }
+}
+
+.custom-file-label {
   @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
+  @include text-truncate;
   @include transition-standard(border-color, box-shadow);
 
-  align-items: center;
   border-bottom: $textfield-border-width solid $textfield-border-color;
   color: $textfield-hint-color;
-  display: flex;
-  justify-content: space-between;
+  height: $textfield-height;
+  padding-right: ($material-icon-size + $selection-control-spacer-x);
   position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
   left: 0;
 
-  @each $lang, $text in $custom-file-text {
-    &:lang(#{$lang})::before {
-      content: $text;
-    }
-  }
-
   @include hover {
     border-bottom-color: $textfield-border-color-hover;
     box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
@@ -41,21 +51,9 @@
     @include set-material-icons;
 
     content: $custom-file-button-icon;
-  }
-
-  &::before {
-    @include text-truncate;
-  }
-}
-
-.custom-file-input {
-  margin: 0;
-  max-width: 100%;
-  min-width: $custom-file-width;
-  opacity: 0;
-
-  &:focus ~ .custom-file-control {
-    border-bottom-color: $textfield-border-color-focus;
-    box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
   }
 }

data/assets/stylesheets/material/bootstrap/_form.scss

@@ -3,6 +3,12 @@
 .form-check {
   display: block;
   margin-bottom: $textfield-margin-y;
+
+  &.disabled {
+    .form-check-label {
+      color: $textfield-color-disabled;
+    }
+  }
 }
 
 .form-check-inline {
@@ -28,10 +34,6 @@
   display: inline-flex;
   font-size: inherit;
   line-height: inherit;
-
-  .form-check.disabled & {
-    color: $textfield-color-disabled;
-  }
 }
 
 // Form group
@@ -103,6 +105,7 @@
   color: inherit;
   font-size: $font-size-base;
   line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
+  margin-bottom: 0;
   padding-top: $textfield-padding-y;
   padding-bottom: $textfield-padding-y;
 }
@@ -121,14 +124,6 @@
   padding-bottom: $textfield-padding-y-sm;
 }
 
-.col-form-legend {
-  font-size: $font-size-base;
-  line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
-  margin-bottom: 0;
-  padding-top: $textfield-padding-y;
-  padding-bottom: $textfield-padding-y;
-}
-
 // Misc
 
 .form-text {
@@ -151,27 +146,3 @@
 .form-control-range {
   display: block;
 }
-
-// Validation
-
-.invalid-feedback {
-  @include typography-caption;
-
-  color: $form-feedback-invalid-color;
-  display: none;
-  margin-top: $textfield-margin-y;
-
-  .form-control-lg + & {
-    margin-top: $textfield-margin-y-lg;
-  }
-
-  .form-control-sm + & {
-    margin-top: $textfield-margin-y-sm;
-  }
-}
-
-.invalid-tooltip {
-  display: none;
-  position: absolute;
-  top: 100%;
-}

data/assets/stylesheets/material/bootstrap/_pagination.scss

@@ -29,8 +29,8 @@
     background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
   }
 
-  &:active,
-  &.active {
+  &.active,
+  &:active {
     background-color: $btn-bg-active;
     background-image: none;
   }
@@ -39,6 +39,10 @@
     outline: 0;
   }
 
+  &:not([disabled]):not(.disabled) {
+    cursor: pointer;
+  }
+
   .page-item:first-child & {
     margin-left: 0;
   }
@@ -50,6 +54,7 @@
   .page-item.disabled & {
     background-color: transparent;
     color: $pagination-color-disabled;
+    cursor: auto;
     pointer-events: none;
   }
 }

data/assets/stylesheets/material/bootstrap/_popover.scss

@@ -4,27 +4,23 @@
 
 .popover {
   @include reset-text;
-  @include border-radius($border-radius);
+  @include border-radius($popover-border-radius);
 
   background-clip: padding-box;
-  background-color: $dialog-content-bg;
-  box-shadow: map-get($dialog-elevation-shadow, shadow);
+  background-color: $popover-bg;
+  box-shadow: map-get($popover-elevation-shadow, shadow);
   display: block;
-  font-size: $font-size-base;
-  margin: $tooltip-margin;
-  max-width: $dialog-width-sm;
+  font-size: $popover-font-size;
+  margin: $popover-margin;
+  max-width: $popover-max-width;
   position: absolute;
   top: 0;
   left: 0;
-  z-index: map-get($dialog-elevation-shadow, elevation);
-
-  @include media-breakpoint-up(md) {
-    margin: $tooltip-margin-desktop;
-  }
+  z-index: map-get($popover-elevation-shadow, elevation);
 }
 
 .popover-body {
-  padding: $dialog-padding-y $dialog-padding-x;
+  padding: $popover-padding-y $popover-padding-x;
 
   > :last-child {
     margin-bottom: 0;
@@ -35,13 +31,21 @@
   @include typography-title;
 
   margin-bottom: 0;
-  padding: $dialog-padding-y $dialog-padding-x 0;
+  padding: $popover-padding-y $popover-padding-x 0;
 
   &:empty {
     display: none;
   }
 
   &:last-child {
-    padding-bottom: $dialog-padding-y;
+    padding-bottom: $popover-padding-y;
+  }
+}
+
+// Desktop
+
+@include media-breakpoint-up(md) {
+  .popover {
+    margin: $popover-margin-desktop;
   }
 }

data/assets/stylesheets/material/material.scss

@@ -53,7 +53,6 @@
 @import 'material/text-field-box';
 @import 'material/text-field-floating-label';
 @import 'material/text-field-input-group';
-@import 'material/text-field-textarea';
 @import 'material/toolbar';
 @import 'material/tooltip';
 

data/assets/stylesheets/material/material/_button-flat.scss

@@ -3,13 +3,13 @@
   background-color: transparent;
   box-shadow: none;
 
-  &:active,
-  &.active {
+  &.active,
+  &:active {
     box-shadow: none;
   }
 
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     background-color: transparent;
   }
 }
@@ -21,8 +21,8 @@
       color: map-get(theme-color($color), color);
     }
 
-    &:disabled,
-    &.disabled {
+    &.disabled,
+    &:disabled {
       color: $btn-color-disabled;
     }
   }
@@ -34,8 +34,8 @@
     background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
   }
 
-  &:active,
-  &.active {
+  &.active,
+  &:active {
     background-color: $btn-bg-active-inverse;
   }
 }

data/assets/stylesheets/material/material/_button-group.scss

@@ -8,6 +8,16 @@
   position: relative;
   vertical-align: middle;
 
+  @each $color, $values in $theme-colors {
+    > .btn-#{$color} {
+      &.disabled,
+      &:disabled {
+        background-color: map-get(theme-color($color), lighter);
+        color: color-yiq(map-get(theme-color($color), lighter));
+      }
+    }
+  }
+
   > .btn {
     @include transition-standard(border-color, opacity);
 
@@ -15,16 +25,6 @@
     flex: 0 1 auto;
     min-width: 0;
 
-    @each $color, $values in $theme-colors {
-      &-#{$color} {
-        &:disabled,
-        &.disabled {
-          background-color: map-get(theme-color($color), lighter);
-          color: color-yiq(map-get(theme-color($color), lighter));
-        }
-      }
-    }
-
     &.active,
     &:active {
       box-shadow: none;
@@ -38,13 +38,13 @@
     &[class*='btn-outline'] {
       opacity: $btn-group-toggle-opacity;
 
-      &:active,
-      &.active {
+      &.active,
+      &:active {
         opacity: 1;
       }
 
-      &:disabled,
-      &.disabled {
+      &.disabled,
+      &:disabled {
         opacity: 1;
       }
     }
@@ -74,34 +74,15 @@
     margin-left: 0;
   }
 
-  // Border radius
-
-  > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
-    @include border-right-radius(0);
-  }
-
-  > .btn:last-child:not(:first-child),
-  > .dropdown-toggle:not(:first-child) {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
     @include border-left-radius(0);
   }
 
-  > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-    border-radius: 0;
-  }
-
-  > .btn-group:first-child:not(:last-child) {
-    > .btn:last-child,
-    > .dropdown-toggle {
-      @include border-right-radius(0);
-    }
-  }
-
-  > .btn-group:last-child:not(:first-child) > .btn:first-child {
-    @include border-left-radius(0);
-  }
-
-  > .btn-group:not(:first-child):not(:last-child) > .btn {
-    border-radius: 0;
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn,
+  > .dropdown-toggle:not(:last-of-type) {
+    @include border-right-radius(0);
   }
 }
 
@@ -122,33 +103,15 @@
     margin-top: 0;
   }
 
-  // Border radius
-
-  > .btn:first-child:not(:last-child) {
-    @include border-bottom-radius(0);
-  }
-
-  > .btn:last-child:not(:first-child) {
-    @include border-top-radius(0);
-  }
-
-  > .btn:not(:first-child):not(:last-child) {
-    border-radius: 0;
-  }
-
-  > .btn-group:first-child:not(:last-child) {
-    > .btn:last-child,
-    > .dropdown-toggle {
-      @include border-bottom-radius(0);
-    }
-  }
-
-  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }
 
-  > .btn-group:not(:first-child):not(:last-child) > .btn {
-    border-radius: 0;
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn,
+  > .dropdown-toggle:not(:last-of-type) {
+    @include border-bottom-radius(0);
   }
 }
 

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

@@ -31,30 +31,30 @@
     background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
   }
 
-  &:active,
-  &.active {
+  &.active,
+  &:active {
     background-color: $btn-bg-active;
     background-image: none;
     box-shadow: map-get($btn-elevation-shadow-active, shadow);
   }
 
-  &:disabled,
-  &.disabled {
+  &.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;
   }
 
+  &:not([disabled]):not(.disabled) {
+    cursor: pointer;
+  }
+
   .show > &.dropdown-toggle {
     background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
   }
@@ -76,13 +76,13 @@ fieldset[disabled] a.btn {
       color: color-yiq(map-get(theme-color($color), color));
     }
 
-    &:active,
-    &.active {
+    &.active,
+    &:active {
       background-color: map-get(theme-color($color), darker);
     }
 
-    &:disabled,
-    &.disabled {
+    &.disabled,
+    &:disabled {
       background-color: $btn-bg-disabled;
       color: $btn-color-disabled;
     }
@@ -90,8 +90,8 @@ fieldset[disabled] a.btn {
 }
 
 [class*='bg-dark'] :not([class*='bg-light']) .btn {
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     background-color: $btn-bg-disabled-inverse;
     color: $btn-color-disabled-inverse;
   }
@@ -148,14 +148,14 @@ fieldset[disabled] a.btn {
     background-image: none;
   }
 
-  &:active,
-  &.active {
+  &.active,
+  &:active {
     background-color: transparent;
     box-shadow: none;
   }
 
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     background-color: transparent;
     color: $btn-color-disabled;
     text-decoration: none;