materialize-sass 0.99.0 → 0.100.0

data/app/assets/stylesheets/materialize/components/_variables.scss

@@ -8,26 +8,27 @@
 //  2. Badges
 //  3. Buttons
 //  4. Cards
-//  5. Collapsible
-//  6. Chips
-//  7. Date + Time Picker
-//  8. Dropdown
-//  9. Fonts
-//  10. Forms
-//  11. Global
-//  12. Grid
-//  13. Navigation Bar
-//  14. Side Navigation
-//  15. Photo Slider
-//  16. Spinners | Loaders
-//  17. Tabs
-//  18. Tables
-//  19. Toasts
-//  20. Typography
-//  21. Footer
-//  22. Flow Text
-//  23. Collections
-//  24. Progress Bar
+//  5. Carousel
+//  6. Collapsible
+//  7. Chips
+//  8. Date + Time Picker
+//  9. Dropdown
+//  10. Fonts
+//  11. Forms
+//  12. Global
+//  13. Grid
+//  14. Navigation Bar
+//  15. Side Navigation
+//  16. Photo Slider
+//  17. Spinners | Loaders
+//  18. Tabs
+//  19. Tables
+//  20. Toasts
+//  21. Typography
+//  22. Footer
+//  23. Flow Text
+//  24. Collections
+//  25. Progress Bar
 
 
 
@@ -98,7 +99,15 @@ $card-link-color: color("orange", "accent-2") !default;
 $card-link-color-light: lighten($card-link-color, 20%) !default;
 
 
-// 5. Collapsible
+// 5. Carousel
+// ==========================================================================
+
+$carousel-height: 400px !default;
+$carousel-item-height: $carousel-height / 2 !default;
+$carousel-item-width: $carousel-item-height !default;
+
+
+// 6. Collapsible
 // ==========================================================================
 
 $collapsible-height: 3rem !default;
@@ -107,7 +116,7 @@ $collapsible-header-color: #fff !default;
 $collapsible-border-color: #ddd !default;
 
 
-// 6. Chips
+// 7. Chips
 // ==========================================================================
 
 $chip-bg-color: #e4e4e4 !default;
@@ -116,7 +125,7 @@ $chip-selected-color: #26a69a !default;
 $chip-margin: 5px !default;
 
 
-// 7. Date + Time Picker
+// 8. Date + Time Picker
 // ==========================================================================
 
 $datepicker-display-font-size: 2.8rem;
@@ -132,7 +141,7 @@ $timepicker-clock-color: rgba(0, 0, 0, .87) !default;
 $timepicker-clock-plate-bg: #eee;
 
 
-// 8. Dropdown
+// 9. Dropdown
 // ==========================================================================
 
 $dropdown-bg-color: #fff !default;
@@ -141,13 +150,13 @@ $dropdown-color: $secondary-color !default;
 $dropdown-item-height: 50px !default;
 
 
-// 9. Fonts
+// 10. Fonts
 // ==========================================================================
 
 $roboto-font-path: "roboto/" !default;
 
 
-// 10. Forms
+// 11. Forms
 // ==========================================================================
 
 // Text Inputs + Textarea
@@ -164,8 +173,8 @@ $input-margin: 0 0 $input-margin-bottom 0 !default;
 $input-padding: 0 !default;
 $input-transition: all .3s !default;
 $label-font-size: .8rem !default;
-$input-disabled-color: rgba(0,0,0, .26) !default;
-$input-disabled-solid-color: #BDBDBD !default;
+$input-disabled-color: rgba(0,0,0, .42) !default;
+$input-disabled-solid-color: #949494 !default;
 $input-disabled-border: 1px dotted $input-disabled-color !default;
 $input-invalid-border: 1px solid $input-error-color !default;
 $placeholder-text-color: lighten($input-border-color, 20%) !default;
@@ -184,19 +193,21 @@ $track-height: 3px !default;
 $select-border: 1px solid #f2f2f2 !default;
 $select-background: rgba(255, 255, 255, 0.90) !default;
 $select-focus: 1px solid lighten($secondary-color, 47%) !default;
+$select-option-hover: rgba(0,0,0,.06) !default;
+$select-option-focus: rgba(0,0,0,.03) !default;
 $select-padding: 5px !default;
 $select-radius: 2px !default;
 $select-disabled-color: rgba(0,0,0,.3) !default;
 
 // Switches
 $switch-bg-color: $secondary-color !default;
-$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
+$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;
 $switch-unchecked-bg: #F1F1F1 !default;
 $switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
 $switch-radius: 15px !default;
 
 
-// 11. Global
+// 12. Global
 // ==========================================================================
 
 // Media Query Ranges
@@ -215,7 +226,7 @@ $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
 $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
 
 
-// 12. Grid
+// 13. Grid
 // ==========================================================================
 
 $num-cols: 12 !default;
@@ -224,7 +235,7 @@ $element-top-margin: $gutter-width/3 !default;
 $element-bottom-margin: ($gutter-width*2)/3 !default;
 
 
-// 13. Navigation Bar
+// 14. Navigation Bar
 // ==========================================================================
 
 $navbar-height: 64px !default;
@@ -235,7 +246,7 @@ $navbar-font-size: 1rem !default;
 $navbar-font-color: #fff !default;
 $navbar-brand-font-size: 2.1rem !default;
 
-// 14. Side Navigation
+// 15. Side Navigation
 // ==========================================================================
 
 $sidenav-font-size: 14px !default;
@@ -246,7 +257,7 @@ $sidenav-item-height: 48px !default;
 $sidenav-line-height: $sidenav-item-height !default;
 
 
-// 15. Photo Slider
+// 16. Photo Slider
 // ==========================================================================
 
 $slider-bg-color: color('grey', 'base') !default;
@@ -254,13 +265,13 @@ $slider-bg-color-light: color('grey', 'lighten-2') !default;
 $slider-indicator-color: color('green', 'base') !default;
 
 
-// 16. Spinners | Loaders
+// 17. Spinners | Loaders
 // ==========================================================================
 
 $spinner-default-color: $secondary-color !default;
 
 
-// 17. Tabs
+// 18. Tabs
 // ==========================================================================
 
 $tabs-underline-color: $primary-color-light !default;
@@ -268,22 +279,23 @@ $tabs-text-color: $primary-color !default;
 $tabs-bg-color: #fff !default;
 
 
-// 18. Tables
+// 19. Tables
 // ==========================================================================
 
 $table-border-color: #d0d0d0 !default;
 $table-striped-color: #f2f2f2 !default;
 
 
-// 19. Toasts
+// 20. Toasts
 // ==========================================================================
 
 $toast-height: 48px !default;
 $toast-color: #323232 !default;
 $toast-text-color: #fff !default;
+$toast-action-color: #eeff41;
 
 
-// 20. Typography
+// 21. Typography
 // ==========================================================================
 
 $off-black: rgba(0, 0, 0, 0.87) !default;
@@ -296,7 +308,7 @@ $h5-fontsize: 1.64rem !default;
 $h6-fontsize: 1rem !default;
 
 
-// 21. Footer
+// 22. Footer
 // ==========================================================================
 
 $footer-font-color: #fff !default;
@@ -305,7 +317,7 @@ $footer-copyright-font-color: rgba(255,255,255,.8) !default;
 $footer-copyright-bg-color: rgba(51,51,51,.08) !default;
 
 
-// 22. Flow Text
+// 23. Flow Text
 // ==========================================================================
 
 $range : $large-screen - $small-screen !default;
@@ -313,7 +325,7 @@ $intervals: 20 !default;
 $interval-size: $range / $intervals !default;
 
 
-// 23. Collections
+// 24. Collections
 // ==========================================================================
 
 $collection-border-color: #e0e0e0 !default;
@@ -325,7 +337,7 @@ $collection-link-color: $secondary-color !default;
 $collection-line-height: 1.5rem !default;
 
 
-// 24. Progress Bar
+// 25. Progress Bar
 // ==========================================================================
 
 $progress-bar-color: $secondary-color !default;

data/app/assets/stylesheets/materialize/components/date_picker/_default.scss

@@ -15,6 +15,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  outline: none;
 }
 /**
  * The picker input element.

data/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss

@@ -15,8 +15,8 @@ form p:last-child {
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
   position: absolute;
-  left: -9999px;
   opacity: 0;
+  pointer-events: none;
 }
 
 // Checkbox Styles
@@ -30,11 +30,7 @@ form p:last-child {
     height: 25px;
     line-height: 25px;
     font-size: 1rem;
-
-    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
-    -moz-user-select: none; /* mozilla browsers */
-    -khtml-user-select: none; /* webkit (konqueror) browsers */
-    -ms-user-select: none; /* IE10+ */
+    user-select: none;
   }
 
   /* checkbox aspect */
@@ -141,10 +137,7 @@ form p:last-child {
     border: 3px solid transparent;
     left: 6px;
     top: 10px;
-
-    -webkit-transform: rotateZ(37deg);
     transform: rotateZ(37deg);
-    -webkit-transform-origin: 20% 40%;
     transform-origin: 100% 100%;
   }
 
@@ -168,10 +161,7 @@ form p:last-child {
       border-left: 2px solid transparent;
       border-right: 2px solid $input-background;
       border-bottom: 2px solid $input-background;
-      -webkit-transform: rotateZ(37deg);
       transform: rotateZ(37deg);
-
-      -webkit-transform-origin: 100% 100%;
       transform-origin: 100% 100%;
     }
 

data/app/assets/stylesheets/materialize/components/forms/_file-input.scss

@@ -22,6 +22,12 @@
   }
 
   input[type=file] {
+
+    // Needed to override webkit button
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+
     position: absolute;
     top: 0;
     right: 0;

data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss

@@ -3,19 +3,7 @@
 
 /* Style Placeholders */
 
-::-webkit-input-placeholder {
-  color: $placeholder-text-color;
-}
-
-:-moz-placeholder { /* Firefox 18- */
-  color: $placeholder-text-color;
-}
-
-::-moz-placeholder {  /* Firefox 19+ */
-  color: $placeholder-text-color;
-}
-
-:-ms-input-placeholder {
+::placeholder {
   color: $placeholder-text-color;
 }
 
@@ -77,51 +65,71 @@ textarea.materialize-textarea {
   // Valid Input Style
   &.valid,
   &:focus.valid {
-    border-bottom: 1px solid $input-success-color;
-    box-shadow: 0 1px 0 0 $input-success-color;
+    @extend %valid-input-style;
   }
 
   // Custom Success Message
   &.valid + label:after,
   &:focus.valid + label:after {
-    content: attr(data-success);
-    color: $input-success-color;
-    opacity: 1;
+    @extend %custom-success-message;
   }
 
   // Invalid Input Style
   &.invalid,
   &:focus.invalid {
-    border-bottom: $input-invalid-border;
-    box-shadow: 0 1px 0 0 $input-error-color;
+    @extend %invalid-input-style;
   }
 
   // Custom Error message
   &.invalid + label:after,
   &:focus.invalid + label:after {
-    content: attr(data-error);
-    color: $input-error-color;
-    opacity: 1;
+    @extend %custom-error-message;
   }
 
   // Full width label when using validate for error messages
   &.validate + label {
     width: 100%;
-    pointer-events: none;
   }
 
   // Form Message Shared Styles
   & + label:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 60px;
-    left: 0;
-    opacity: 0;
-    transition: .2s opacity ease-out, .2s color ease-out;
+    @extend %input-after-style;
   }
 }
 
+
+/* Validation Sass Placeholders */
+%valid-input-style {
+  border-bottom: 1px solid $input-success-color;
+  box-shadow: 0 1px 0 0 $input-success-color;
+}
+%invalid-input-style {
+  border-bottom: $input-invalid-border;
+  box-shadow: 0 1px 0 0 $input-error-color;
+}
+%custom-success-message {
+  content: attr(data-success);
+  color: $input-success-color;
+  opacity: 1;
+  transform: translateY(9px);
+}
+%custom-error-message {
+  content: attr(data-error);
+  color: $input-error-color;
+  opacity: 1;
+  transform: translateY(9px);
+}
+%input-after-style {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  opacity: 0;
+  transition: .2s opacity ease-out, .2s color ease-out;
+}
+
+
 // Styling for input field wrapper
 .input-field {
   // Inline styles
@@ -154,16 +162,20 @@ textarea.materialize-textarea {
   label {
     color: $input-border-color;
     position: absolute;
-    top: 0.8rem;
+    top: 0;
     left: 0;
+    height: 100%;
     font-size: 1rem;
     cursor: text;
-    transition: .2s ease-out;
+    transition: transform .2s ease-out;
+    transform-origin: 0% 100%;
     text-align: initial;
+    transform: translateY(12px);
+    pointer-events: none;
 
     &:not(.label-icon).active {
-      font-size: $label-font-size;
-      transform: translateY(-140%);
+      transform: translateY(-14px) scale(.8);
+      transform-origin: 0 0;
     }
   }
 
@@ -210,8 +222,14 @@ textarea.materialize-textarea {
 .input-field input[type=search] {
   display: block;
   line-height: inherit;
-  padding-left: 4rem;
-  width: calc(100% - 4rem);
+
+  .nav-wrapper & {
+    height: inherit;
+    padding-left: 4rem;
+    width: calc(100% - 4rem);
+    border: 0;
+    box-shadow: none;
+  }
 
   &:focus {
     background-color: $input-background;
@@ -252,6 +270,17 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    // Fixes validation messages for dynamic textareas
+    &.validate + label {
+      &::after {
+        top: calc(100% - 12px);
+      }
+      &:not(.label-icon).active {
+        transform: translateY(-25px);
+      }
+      height: 100%;
+    }
+
     overflow-y: hidden; /* prevents scroll bar flash */
     padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
     resize: none;
@@ -276,6 +305,7 @@ textarea {
 /* Autocomplete */
 .autocomplete-content {
   margin-top: -1 * $input-margin-bottom;
+  margin-bottom: $input-margin-bottom;
   display: block;
   opacity: 1;
   position: static;