materialize-sass 0.97.8 → 1.0.0.1

data/{app/assets → assets}/stylesheets/materialize/components/_variables.scss

@@ -8,10 +8,11 @@
 //  2. Badges
 //  3. Buttons
 //  4. Cards
-//  5. Collapsible
-//  6. Chips
-//  7. Date Picker
-//  8. Dropdown
+//  5. Carousel
+//  6. Collapsible
+//  7. Chips
+//  8. Date + Time Picker
+//  9. Dropdown
 //  10. Forms
 //  11. Global
 //  12. Grid
@@ -47,6 +48,7 @@ $link-color: color("light-blue", "darken-1") !default;
 // ==========================================================================
 
 $badge-bg-color: $secondary-color !default;
+$badge-height: 22px !default;
 
 
 // 3. Buttons
@@ -55,9 +57,10 @@ $badge-bg-color: $secondary-color !default;
 // Shared styles
 $button-border: none !default;
 $button-background-focus: lighten($secondary-color, 4%) !default;
-$button-font-size: 1.3rem !default;
+$button-font-size: 14px !default;
+$button-icon-font-size: 1.3rem !default;
 $button-height: 36px !default;
-$button-padding: 0 2rem !default;
+$button-padding: 0 16px !default;
 $button-radius: 2px !default;
 
 // Disabled styles
@@ -70,8 +73,16 @@ $button-raised-background-hover: lighten($button-raised-background, 5%) !default
 $button-raised-color: #fff !default;
 
 // Large buttons
+$button-large-font-size: 15px !default;
 $button-large-icon-font-size: 1.6rem !default;
 $button-large-height: $button-height * 1.5 !default;
+$button-floating-large-size: 56px !default;
+
+// Small buttons
+$button-small-font-size: 13px !default;
+$button-small-icon-font-size: 1.2rem !default;
+$button-small-height: $button-height * .9 !default;
+$button-floating-small-size: $button-height * .9 !default;
 
 // Flat buttons
 $button-flat-color: #343434 !default;
@@ -82,28 +93,36 @@ $button-floating-background: $secondary-color !default;
 $button-floating-background-hover: $button-floating-background !default;
 $button-floating-color: #fff !default;
 $button-floating-size: 40px !default;
-$button-floating-large-size: 56px !default;
 $button-floating-radius: 50% !default;
 
 
 // 4. Cards
 // ==========================================================================
 
-$card-padding: 20px !default;
+$card-padding: 24px !default;
 $card-bg-color: #fff !default;
 $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;
+$collapsible-line-height: $collapsible-height !default;
 $collapsible-header-color: #fff !default;
 $collapsible-border-color: #ddd !default;
 
 
-// 6. Chips
+// 7. Chips
 // ==========================================================================
 
 $chip-bg-color: #e4e4e4 !default;
@@ -112,18 +131,26 @@ $chip-selected-color: #26a69a !default;
 $chip-margin: 5px !default;
 
 
-// 7. Date Picker
+// 8. Date + Time Picker
 // ==========================================================================
 
+$datepicker-display-font-size: 2.8rem;
+$datepicker-calendar-header-color: #999;
+$datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
 $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
 $datepicker-date-bg: $secondary-color !default;
-$datepicker-year: rgba(255, 255, 255, .4) !default;
+$datepicker-year: rgba(255, 255, 255, .7) !default;
 $datepicker-focus: rgba(0,0,0, .05) !default;
 $datepicker-selected: $secondary-color !default;
 $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
+$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75) !default;
+$datepicker-disabled-day-color: rgba(0, 0, 0, .3) !default;
+
+$timepicker-clock-color: rgba(0, 0, 0, .87) !default;
+$timepicker-clock-plate-bg: #eee !default;
 
 
-// 8. Dropdown
+// 9. Dropdown
 // ==========================================================================
 
 $dropdown-bg-color: #fff !default;
@@ -132,12 +159,6 @@ $dropdown-color: $secondary-color !default;
 $dropdown-item-height: 50px !default;
 
 
-// 9. Fonts
-// ==========================================================================
-
-$roboto-font-path: "roboto/" !default;
-
-
 // 10. Forms
 // ==========================================================================
 
@@ -149,15 +170,16 @@ $input-background: #fff !default;
 $input-error-color: $error-color !default;
 $input-success-color: $success-color !default;
 $input-focus-color: $secondary-color !default;
-$input-font-size: 1rem !default;
-$input-margin: 0 0 20px 0 !default;
+$input-font-size: 16px !default;
+$input-margin-bottom: 8px;
+$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;
+$input-icon-size: 2rem;
 $placeholder-text-color: lighten($input-border-color, 20%) !default;
 
 // Radio Buttons
@@ -174,15 +196,18 @@ $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,.08) !default;
+$select-option-focus: rgba(0,0,0,.08) !default;
+$select-option-selected: 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: #818181 !default;
+$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
 $switch-radius: 15px !default;
 
 
@@ -199,6 +224,7 @@ $large-screen: 1200px !default;
 
 $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
 $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
 $small-and-down: "only screen and (max-width : #{$small-screen})" !default;
 $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;
@@ -217,7 +243,9 @@ $element-bottom-margin: ($gutter-width*2)/3 !default;
 // ==========================================================================
 
 $navbar-height: 64px !default;
+$navbar-line-height: $navbar-height !default;
 $navbar-height-mobile: 56px !default;
+$navbar-line-height-mobile: $navbar-height-mobile !default;
 $navbar-font-size: 1rem !default;
 $navbar-font-color: #fff !default;
 $navbar-brand-font-size: 2.1rem !default;
@@ -225,11 +253,13 @@ $navbar-brand-font-size: 2.1rem !default;
 // 14. Side Navigation
 // ==========================================================================
 
+$sidenav-width: 300px !default;
 $sidenav-font-size: 14px !default;
 $sidenav-font-color: rgba(0,0,0,.87) !default;
 $sidenav-bg-color: #fff !default;
 $sidenav-padding: 16px !default;
 $sidenav-item-height: 48px !default;
+$sidenav-line-height: $sidenav-item-height !default;
 
 
 // 15. Photo Slider
@@ -257,8 +287,8 @@ $tabs-bg-color: #fff !default;
 // 18. Tables
 // ==========================================================================
 
-$table-border-color: #d0d0d0 !default;
-$table-striped-color: #f2f2f2 !default;
+$table-border-color: rgba(0,0,0,.12) !default;
+$table-striped-color: rgba(242, 242, 242, 0.5) !default;
 
 
 // 19. Toasts
@@ -267,11 +297,13 @@ $table-striped-color: #f2f2f2 !default;
 $toast-height: 48px !default;
 $toast-color: #323232 !default;
 $toast-text-color: #fff !default;
+$toast-action-color: #eeff41;
 
 
 // 20. Typography
 // ==========================================================================
 
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
 $off-black: rgba(0, 0, 0, 0.87) !default;
 // Header Styles
 $h1-fontsize: 4.2rem !default;
@@ -279,13 +311,16 @@ $h2-fontsize: 3.56rem !default;
 $h3-fontsize: 2.92rem !default;
 $h4-fontsize: 2.28rem !default;
 $h5-fontsize: 1.64rem !default;
-$h6-fontsize: 1rem !default;
+$h6-fontsize: 1.15rem !default;
 
 
 // 21. Footer
 // ==========================================================================
 
+$footer-font-color: #fff !default;
 $footer-bg-color: $primary-color !default;
+$footer-copyright-font-color: rgba(255,255,255,.8) !default;
+$footer-copyright-bg-color: rgba(51,51,51,.08) !default;
 
 
 // 22. Flow Text
@@ -305,6 +340,7 @@ $collection-active-bg-color: $secondary-color !default;
 $collection-active-color: lighten($secondary-color, 55%) !default;
 $collection-hover-bg-color: #ddd !default;
 $collection-link-color: $secondary-color !default;
+$collection-line-height: 1.5rem !default;
 
 
 // 24. Progress Bar

data/assets/stylesheets/materialize/components/_waves.scss

@@ -0,0 +1,114 @@
+
+/*!
+ * Waves v0.6.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
+ */
+
+
+.waves-effect {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  vertical-align: middle;
+  z-index: 1;
+  transition: .3s ease-out;
+
+  .waves-ripple {
+    position: absolute;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin-top:-10px;
+    margin-left:-10px;
+    opacity: 0;
+
+    background: rgba(0,0,0,0.2);
+    transition: all 0.7s ease-out;
+    transition-property: transform, opacity;
+    transform: scale(0);
+    pointer-events: none;
+  }
+
+  // Waves Colors
+  &.waves-light .waves-ripple {
+    background-color: rgba(255, 255, 255, 0.45);
+  }
+  &.waves-red .waves-ripple {
+    background-color: rgba(244, 67, 54, .70);
+  }
+  &.waves-yellow .waves-ripple {
+    background-color: rgba(255, 235, 59, .70);
+  }
+  &.waves-orange .waves-ripple {
+    background-color: rgba(255, 152, 0, .70);
+  }
+  &.waves-purple .waves-ripple {
+    background-color: rgba(156, 39, 176, 0.70);
+  }
+  &.waves-green .waves-ripple {
+    background-color: rgba(76, 175, 80, 0.70);
+  }
+  &.waves-teal .waves-ripple {
+    background-color: rgba(0, 150, 136, 0.70);
+  }
+
+  // Style input button bug.
+  input[type="button"], input[type="reset"], input[type="submit"] {
+    border: 0;
+    font-style: normal;
+    font-size: inherit;
+    text-transform: inherit;
+    background: none;
+  }
+
+  img {
+    position: relative;
+    z-index: -1;
+  }
+}
+
+.waves-notransition {
+  transition: none #{"!important"};
+}
+
+.waves-circle {
+  transform: translateZ(0);
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-input-wrapper {
+  border-radius: 0.2em;
+  vertical-align: bottom;
+
+  .waves-button-input {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
+.waves-circle {
+  text-align: center;
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-radius: 50%;
+  -webkit-mask-image: none;
+}
+
+.waves-block {
+  display: block;
+}
+
+/* Firefox Bug: link not triggered */
+.waves-effect .waves-ripple {
+  z-index: -1;
+}

data/{app/assets → assets}/stylesheets/materialize/components/forms/_checkboxes.scss

@@ -1,28 +1,18 @@
 /* Checkboxes
    ========================================================================== */
 
-/* CUSTOM CSS CHECKBOXES */
-form p {
-  margin-bottom: 10px;
-  text-align: left;
-}
-
-form p:last-child {
-  margin-bottom: 0;
-}
-
 /* Remove default checkbox */
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
   position: absolute;
-  left: -9999px;
   opacity: 0;
+  pointer-events: none;
 }
 
 // Checkbox Styles
 [type="checkbox"] {
   // Text Label Style
-  + label {
+  + span:not(.lever) {
     position: relative;
     padding-left: 35px;
     cursor: pointer;
@@ -30,16 +20,12 @@ 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 */
-  + label:before,
-  &:not(.filled-in) + label:after {
+  + span:not(.lever):before,
+  &:not(.filled-in) + span:not(.lever):after {
     content: '';
     position: absolute;
     top: 0;
@@ -49,22 +35,22 @@ form p:last-child {
     z-index: 0;
     border: 2px solid $radio-empty-color;
     border-radius: 1px;
-    margin-top: 2px;
+    margin-top: 3px;
     transition: .2s;
   }
 
-  &:not(.filled-in) + label:after {
+  &:not(.filled-in) + span:not(.lever):after {
     border: 0;
     transform: scale(0);
   }
 
-  &:not(:checked):disabled + label:before {
+  &:not(:checked):disabled + span:not(.lever):before {
     border: none;
     background-color: $input-disabled-color;
   }
 
   // Focused styles
-  &.tabbed:focus + label:after {
+  &.tabbed:focus + span:not(.lever):after {
     transform: scale(1);
     border: 0;
     border-radius: 50%;
@@ -74,7 +60,7 @@ form p:last-child {
 }
 
 [type="checkbox"]:checked {
-  + label:before {
+  + span:not(.lever):before {
     top: -4px;
     left: -5px;
     width: 12px;
@@ -88,7 +74,7 @@ form p:last-child {
     transform-origin: 100% 100%;
   }
 
-  &:disabled + label:before {
+  &:disabled + span:before {
     border-right: 2px solid $input-disabled-color;
     border-bottom: 2px solid $input-disabled-color;
   }
@@ -96,7 +82,7 @@ form p:last-child {
 
 /* Indeterminate checkbox */
 [type="checkbox"]:indeterminate {
-  +label:before {
+  + span:not(.lever):before {
     top: -11px;
     left: -12px;
     width: 10px;
@@ -111,7 +97,7 @@ form p:last-child {
   }
 
   // Disabled indeterminate
-  &:disabled + label:before {
+  &:disabled + span:not(.lever):before {
     border-right: 2px solid $input-disabled-color;
     background-color: transparent;
   }
@@ -120,12 +106,12 @@ form p:last-child {
 // Filled in Style
 [type="checkbox"].filled-in {
   // General
-  + label:after {
+  + span:not(.lever):after {
     border-radius: 2px;
   }
 
-  + label:before,
-  + label:after {
+  + span:not(.lever):before,
+  + span:not(.lever):after {
     content: '';
     left: 0;
     position: absolute;
@@ -135,20 +121,17 @@ form p:last-child {
   }
 
   // Unchecked style
-  &:not(:checked) + label:before {
+  &:not(:checked) + span:not(.lever):before {
     width: 0;
     height: 0;
     border: 3px solid transparent;
     left: 6px;
     top: 10px;
-
-    -webkit-transform: rotateZ(37deg);
     transform: rotateZ(37deg);
-    -webkit-transform-origin: 20% 40%;
     transform-origin: 100% 100%;
   }
 
-  &:not(:checked) + label:after {
+  &:not(:checked) + span:not(.lever):after {
     height: 20px;
     width: 20px;
     background-color: transparent;
@@ -159,7 +142,7 @@ form p:last-child {
 
   // Checked style
   &:checked {
-    + label:before {
+    + span:not(.lever):before {
       top: 0;
       left: 1px;
       width: 8px;
@@ -168,14 +151,11 @@ 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%;
     }
 
-    + label:after {
+    + span:not(.lever):after {
       top: 0;
       width: 20px;
       height: 20px;
@@ -186,34 +166,34 @@ form p:last-child {
   }
 
   // Focused styles
-  &.tabbed:focus + label:after {
+  &.tabbed:focus + span:not(.lever):after {
     border-radius: 2px;
     border-color: $radio-empty-color;
     background-color: rgba(0,0,0,.1);
   }
 
-  &.tabbed:checked:focus + label:after {
+  &.tabbed:checked:focus + span:not(.lever):after {
     border-radius: 2px;
     background-color: $secondary-color;
     border-color: $secondary-color;
   }
 
   // Disabled style
-  &:disabled:not(:checked) + label:before {
+  &:disabled:not(:checked) + span:not(.lever):before {
     background-color: transparent;
     border: 2px solid transparent;
   }
 
-  &:disabled:not(:checked) + label:after {
+  &:disabled:not(:checked) + span:not(.lever):after {
     border-color: transparent;
     background-color: $input-disabled-solid-color;
   }
 
-  &:disabled:checked + label:before {
+  &:disabled:checked + span:not(.lever):before {
     background-color: transparent;
   }
 
-  &:disabled:checked + label:after {
+  &:disabled:checked + span:not(.lever):after {
     background-color: $input-disabled-solid-color;
     border-color: $input-disabled-solid-color;
   }

data/{app/assets → 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;