material-sass 4.1.0 → 4.1.1

data/assets/javascripts/material/components/pickdate.js

@@ -202,7 +202,7 @@ var PickDate = function ($) {
 
     PickDate._jQueryInterface = function _jQueryInterface(config) {
       return this.each(function () {
-        var _config = _extends({}, PickDate.Default, $(this).data(), typeof config === 'object' && config);
+        var _config = _extends({}, Default, $(this).data(), typeof config === 'object' && config ? config : {});
 
         var data = $(this).data(DATA_KEY);
 

data/assets/javascripts/material/components/tab-switch.js

@@ -1,6 +1,6 @@
 /*
  * Tab indicator animation
- * Requires Bootstrap's (v4.1.0) `tab.js`
+ * Requires Bootstrap's (v4.1.X) `tab.js`
  */
 var TabSwitch = function ($) {
   // constants >>>
@@ -41,7 +41,6 @@ var TabSwitch = function ($) {
       var navLeft = $(this._nav).offset().left;
       var navScrollLeft = $(this._nav).scrollLeft();
       var navWidth = $(this._nav).outerWidth();
-      var supportsTransition = Util.supportsTransitionEnd();
 
       if (!this._navindicator) {
         this._createIndicator(navLeft, navScrollLeft, navWidth, relatedTarget);
@@ -55,11 +54,7 @@ var TabSwitch = function ($) {
       var elWidth = $(element).outerWidth();
       $(this._navindicator).addClass(ClassName.SHOW);
       Util.reflow(this._navindicator);
-
-      if (supportsTransition) {
-        $(this._nav).addClass(ClassName.ANIMATE);
-      }
-
+      $(this._nav).addClass(ClassName.ANIMATE);
       $(this._navindicator).css({
         left: elLeft + navScrollLeft - navLeft,
         right: navWidth - (elLeft + navScrollLeft - navLeft + elWidth)
@@ -70,11 +65,6 @@ var TabSwitch = function ($) {
         $(_this._navindicator).removeClass(ClassName.SHOW);
       };
 
-      if (!supportsTransition) {
-        complete();
-        return;
-      }
-
       var transitionDuration = Util.getTransitionDurationFromElement(this._navindicator);
       $(this._navindicator).one(Util.TRANSITION_END, complete).emulateTransitionEnd(transitionDuration);
     };

data/assets/javascripts/material/components/util.js

@@ -1,16 +1,16 @@
 /*
  * Global util js
- * Based on Bootstrap's (v4.1.0) `util.js`
+ * Based on Bootstrap's (v4.1.X) `util.js`
  */
 var Util = function ($) {
   var MAX_UID = 1000000;
   var MILLISECONDS_MULTIPLIER = 1000;
-  var transition = false;
+  var TRANSITION_END = 'transitionend';
 
   function getSpecialTransitionEndEvent() {
     return {
-      bindType: transition.end,
-      delegateType: transition.end,
+      bindType: TRANSITION_END,
+      delegateType: TRANSITION_END,
       handle: function handle(event) {
         if ($(event.target).is(this)) {
           return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
@@ -22,12 +22,8 @@ var Util = function ($) {
   }
 
   function setTransitionEndSupport() {
-    transition = transitionEndTest();
     $.fn.emulateTransitionEnd = transitionEndEmulator;
-
-    if (Util.supportsTransitionEnd()) {
-      $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
-    }
+    $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
   }
 
   function toType(obj) {
@@ -49,16 +45,6 @@ var Util = function ($) {
     return this;
   }
 
-  function transitionEndTest() {
-    if (typeof window !== 'undefined' && window.QUnit) {
-      return false;
-    }
-
-    return {
-      end: 'transitionend'
-    };
-  }
-
   var Util = {
     TRANSITION_END: 'mdTransitionEnd',
     getSelectorFromElement: function getSelectorFromElement(element) {
@@ -104,10 +90,10 @@ var Util = function ($) {
       return element.offsetHeight;
     },
     supportsTransitionEnd: function supportsTransitionEnd() {
-      return Boolean(transition);
+      return Boolean(TRANSITION_END);
     },
     triggerTransitionEnd: function triggerTransitionEnd(element) {
-      $(element).trigger(transition.end);
+      $(element).trigger(TRANSITION_END);
     },
     typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
       for (var property in configTypes) {

data/assets/stylesheets/material/base/_base.scss

@@ -43,7 +43,6 @@
 
 article,
 aside,
-dialog,
 figcaption,
 figure,
 footer,

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

@@ -65,7 +65,8 @@
     width: auto;
   }
 
-  .form-control {
+  .form-control,
+  .form-control-file {
     display: inline-block;
     vertical-align: middle;
     width: auto;
@@ -121,29 +122,52 @@
   display: block;
   margin-top: $textfield-margin-y;
 
-  .form-control-lg + & {
+  .custom-select-lg + &,
+  .floating-label-lg + &,
+  .floating-label-lg .custom-select + &,
+  .floating-label-lg .form-control + &,
+  .floating-label-lg .form-control-file + &,
+  .form-control-lg + &,
+  .textfield-box-lg + &,
+  .textfield-box-lg .custom-select + &,
+  .textfield-box-lg .form-control + &,
+  .textfield-box-lg .form-control-file + & {
     margin-top: $textfield-margin-y-lg;
   }
 
-  .form-control-sm + & {
+  .custom-select-sm + &,
+  .floating-label-sm + &,
+  .floating-label-sm .custom-select + &,
+  .floating-label-sm .form-control + &,
+  .floating-label-sm .form-control-file + &,
+  .form-control-sm + &,
+  .textfield-box-sm + &,
+  .textfield-box-sm .custom-select + &,
+  .textfield-box-sm .form-control + &,
+  .textfield-box-sm .form-control-file + & {
     margin-top: $textfield-margin-y-sm;
   }
 }
 
-.form-control-file,
-.form-control-range {
-  display: block;
-}
+// Readonly control as plain text
 
-.form-control-file {
-  @extend %form-control;
-
-  &::-webkit-file-upload-button {
-    background-color: transparent;
-    background-image: none;
-    border: 0;
-    color: $textfield-hint-color;
-    height: auto;
-    padding: 0;
+.form-control-plaintext {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0 0 $textfield-border-width;
+  box-shadow: none;
+  color: $textfield-plaintext-color;
+  display: block;
+  font-size: $textfield-font-size;
+  line-height: $textfield-line-height;
+  padding: $textfield-padding-y 0 calc(#{$textfield-padding-y} - #{$textfield-border-width});
+  width: 100%;
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
   }
 }

data/assets/stylesheets/material/material.scss

@@ -18,7 +18,6 @@
 @import 'bootstrap/carousel';
 @import 'bootstrap/close';
 @import 'bootstrap/code';
-@import 'bootstrap/custom-form';
 @import 'bootstrap/form';
 @import 'bootstrap/image';
 @import 'bootstrap/jumbotron';

data/assets/stylesheets/material/material/_expansion-panel.scss

@@ -202,6 +202,7 @@
   color: inherit;
   display: flex;
   justify-content: space-between;
+  min-height: $expansion-panel-height;
   padding: $expansion-panel-padding-y $expansion-panel-padding-x;
   text-align: inherit;
   width: 100%;

data/assets/stylesheets/material/material/_selection-control.scss

@@ -1,14 +1,21 @@
 .custom-control {
   display: block;
-  margin-bottom: $selection-control-spacer-y;
   min-height: ($font-size-base * $line-height-base);
   padding-left: ($selection-control-indicator-size + $selection-control-spacer-x);
   position: relative;
+
+  + .custom-control {
+    margin-top: $selection-control-spacer-y;
+  }
 }
 
 .custom-control-inline {
   display: inline-flex;
   margin-right: ($selection-control-spacer-x * 2);
+
+  + .custom-control-inline {
+    margin-top: 0;
+  }
 }
 
 // Base styles for custom control indicators

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

@@ -1,59 +1,94 @@
 .textfield-box {
-  &.floating-label {
-    @include textfield-box-size($textfield-font-size, $textfield-box-height, $textfield-line-height, $textfield-box-padding-x, $textfield-box-padding-y);
+  %form-control {
+    background-color: $textfield-box-bg;
+    border-radius: $textfield-box-border-radius;
+    padding: $textfield-box-padding-y $textfield-box-padding-x calc(#{$textfield-box-padding-y} - #{$textfield-border-width});
+  }
+
+  %form-select {
+    padding-right: $textfield-select-bg-size;
+  }
 
-    padding-top: 0;
+  %form-textarea {
+    border-width: 0 0 $textfield-border-width;
+    padding: $textfield-box-padding-y $textfield-box-padding-x calc(#{$textfield-box-padding-y} - #{$textfield-border-width});
 
-    &.has-value label,
-    &.is-focused label {
-      top: $textfield-box-label-spacer-y;
+    @include hover {
+      box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
     }
 
-    .form-control {
-      padding-bottom: ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem);
+    &:focus {
+      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
     }
   }
 
-  // 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 sizing
 
-  .form-control {
-    @include form-control-size($textfield-font-size, $textfield-box-height, $textfield-line-height, $textfield-box-padding-x, $textfield-box-padding-y);
+  // stylelint-disable-next-line order/order, selector-no-qualifying-type
+  textarea.form-control {
+    min-height: $textfield-box-height;
+  }
 
-    background-color: $textfield-box-bg;
-    border-radius: $textfield-box-border-radius;
+  .form-control[type='file'],
+  .form-control-file {
+    max-height: $textfield-box-height;
   }
 }
 
 // Size
+
 .textfield-box-lg {
-  &.floating-label {
-    @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 {
+    font-size: $textfield-font-size-lg;
+    line-height: $textfield-line-height-lg;
+    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width});
   }
 
-  // stylelint-disable-next-line selector-no-qualifying-type
-  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-textarea {
+    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width});
   }
 
-  .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);
+  // Form control sizing
+
+  // stylelint-disable-next-line order/order, selector-no-qualifying-type
+  textarea.form-control {
+    min-height: $textfield-box-height-lg;
+  }
+
+  .custom-select {
+    padding-right: $textfield-select-bg-size;
+  }
+
+  .form-control[type='file'],
+  .form-control-file {
+    max-height: $textfield-box-height-lg;
   }
 }
 
 .textfield-box-sm {
-  &.floating-label {
-    @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 {
+    font-size: $textfield-font-size-sm;
+    line-height: $textfield-line-height-sm;
+    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width});
+  }
+
+  %form-textarea {
+    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width});
+  }
+
+  // Form control sizing
+
+  // stylelint-disable-next-line order/order, selector-no-qualifying-type
+  textarea.form-control {
+    min-height: $textfield-box-height-sm;
   }
 
-  // stylelint-disable-next-line selector-no-qualifying-type
-  select.form-control:not([multiple]):not([size]) {
-    @include form-select-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-box-padding-x-sm);
+  .custom-select {
+    padding-right: $textfield-select-bg-size;
   }
 
-  .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);
+  .form-control[type='file'],
+  .form-control-file {
+    max-height: $textfield-box-height-sm;
   }
 }

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

@@ -1,13 +1,11 @@
 .floating-label {
-  @include floating-label-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-y);
-
-  padding-top: $floating-label-font-size-focus;
+  padding-top: $floating-label-font-size;
   position: relative;
 
   &.has-value label,
   &.is-focused label {
-    line-height: 1;
     top: 0;
+    transform: scale($floating-label-font-size / $textfield-font-size);
   }
 
   &.is-focused label {
@@ -23,30 +21,23 @@
   }
 
   label {
-    @include text-truncate;
     @include transition-standard(color, top, transform);
 
     color: $floating-label-color;
     display: block;
+    font-size: $textfield-font-size;
+    line-height: $textfield-line-height;
     margin: 0;
     padding: 0;
     position: absolute;
+    top: ($floating-label-font-size + $textfield-padding-y);
     left: 0;
     transform-origin: 0 0;
   }
 
-  .form-control {
+  %form-control {
     position: relative;
 
-    &[type='file']::-webkit-file-upload-button {
-      background-color: transparent;
-      background-image: none;
-      border: 0;
-      color: $floating-label-color;
-      height: auto;
-      padding: 0;
-    }
-
     &:focus {
       &::placeholder {
         color: $textfield-hint-color;
@@ -63,18 +54,120 @@
   }
 }
 
+// Size
+
 .floating-label-lg {
-  @include floating-label-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-y-lg);
+  &.has-value label,
+  &.is-focused label {
+    transform: scale($floating-label-font-size-lg / $textfield-font-size-lg);
+  }
+
+  label {
+    font-size: $textfield-font-size-lg;
+    line-height: $textfield-line-height-lg;
+    top: ($floating-label-font-size-lg + $textfield-padding-y-lg);
+  }
+
+  %form-control {
+    font-size: $textfield-font-size-lg;
+    line-height: $textfield-line-height-lg;
+    padding: $textfield-padding-y-lg $textfield-padding-x-lg calc(#{$textfield-padding-y-lg} - #{$textfield-border-width});
+  }
+
+  %form-select {
+    padding-right: $textfield-select-bg-size;
+  }
 
-  .form-control {
-    @extend %form-control-lg;
+  %form-textarea {
+    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width});
   }
 }
 
 .floating-label-sm {
-  @include floating-label-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-y-sm);
+  &.has-value label,
+  &.is-focused label {
+    transform: scale($floating-label-font-size-sm / $textfield-font-size-sm);
+  }
+
+  label {
+    font-size: $textfield-font-size-sm;
+    line-height: $textfield-line-height-sm;
+    top: ($floating-label-font-size-sm + $textfield-padding-y-sm);
+  }
+
+  %form-control {
+    font-size: $textfield-font-size-sm;
+    line-height: $textfield-line-height-sm;
+    padding: $textfield-padding-y-sm $textfield-padding-x-sm calc(#{$textfield-padding-y-sm} - #{$textfield-border-width});
+  }
+
+  %form-select {
+    padding-right: $textfield-select-bg-size;
+  }
+
+  %form-textarea {
+    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width});
+  }
+}
+
+// Floating label with textfield box
+
+.floating-label.textfield-box {
+  padding-top: 0;
+
+  &.has-value label,
+  &.is-focused label {
+    line-height: 1;
+    top: $textfield-box-label-spacer-y;
+  }
+
+  label {
+    top: $textfield-box-padding-y;
+    left: $textfield-box-padding-x;
+  }
+
+  %form-control,
+  %form-textarea {
+    padding-top: ($textfield-box-height - $textfield-box-label-spacer-y - $textfield-font-size * $textfield-line-height);
+  }
+
+  %form-control {
+    padding-bottom: calc(#{$textfield-box-label-spacer-y} - #{$textfield-border-width});
+  }
+}
+
+.floating-label-lg.textfield-box {
+  label {
+    top: $textfield-box-padding-y-lg;
+    left: $textfield-box-padding-x-lg;
+  }
+
+  %form-control,
+  %form-textarea {
+    padding-top: ($textfield-box-height-lg - $textfield-box-label-spacer-y - $textfield-font-size-lg * $textfield-line-height-lg);
+    padding-right: $textfield-box-padding-x-lg;
+    padding-left: $textfield-box-padding-x-lg;
+  }
+
+  %form-select {
+    padding-right: $textfield-select-bg-size;
+  }
+}
+
+.floating-label-sm.textfield-box {
+  label {
+    top: $textfield-box-padding-y-sm;
+    left: $textfield-box-padding-x-sm;
+  }
+
+  %form-control,
+  %form-textarea {
+    padding-top: ($textfield-box-height-sm - $textfield-box-label-spacer-y - $textfield-font-size-sm * $textfield-line-height-sm);
+    padding-right: $textfield-box-padding-x-sm;
+    padding-left: $textfield-box-padding-x-sm;
+  }
 
-  .form-control {
-    @extend %form-control-sm;
+  %form-select {
+    padding-right: $textfield-select-bg-size;
   }
 }