materialize-sass 0.96.2 → 0.97.0

data/app/assets/javascripts/materialize/slider.js

@@ -10,7 +10,6 @@
         interval: 6000
       };
       options = $.extend(defaults, options);
-      console.log(options);
 
       return this.each(function() {
 
@@ -73,16 +72,18 @@
           }
         }
 
-        console.log(options.height);
         // Set height of slider
-        if (options.indicators) {
-          // Add height if indicators are present
-          $this.height(options.height + 40);
-        }
-        else {
-          $this.height(options.height);
+        // If fullscreen, do nothing
+        if (!$this.hasClass('fullscreen')) {
+          if (options.indicators) {
+            // Add height if indicators are present
+            $this.height(options.height + 40);
+          }
+          else {
+            $this.height(options.height);
+          }
+          $slider.height(options.height);
         }
-        $slider.height(options.height);
 
 
         // Set initial positions of captions
@@ -90,15 +91,6 @@
           captionTransition($(this), 0);
         });
 
-        // Set initial dimensions of images
-        // $slides.find('img').each(function () {
-        //   $(this).load(function () {
-        //     if ($(this).width() < $(this).parent().width()) {
-        //       $(this).css({width: '100%', height: 'auto'});
-        //     }
-        //   });
-        // });
-
         // Move img src into background-image
         $slides.find('img').each(function () {
           $(this).css('background-image', 'url(' + $(this).attr('src') + ')' );

data/app/assets/javascripts/materialize/transitions.js

@@ -66,6 +66,8 @@
     var swipeLeft = false;
     var swipeRight = false;
 
+
+    // Dismissible Collections
     $('.dismissable').each(function() {
       $(this).hammer({
         prevent_default: false
@@ -83,12 +85,19 @@
           if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.75)) {
             swipeLeft = true;
           }
+
           // Swipe Right
-          else if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
+          if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
             swipeRight = true;
           }
         }
       }).bind('panend', function(e) {
+        // Reset if collection is moved back into original position
+        if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
+          swipeRight = false;
+          swipeLeft = false;
+        }
+
         if (e.gesture.pointerType === "touch") {
           var $this = $(this);
           if (swipeLeft || swipeRight) {

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

@@ -15,9 +15,9 @@
 }
 // Disabled shared style
 .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-floating:disabled {
-  background-color: $button-bg-color-disabled;
+  background-color: $button-bg-color-disabled !important;
   box-shadow: none;
-  color: $button-color-disabled;
+  color: $button-color-disabled !important;
   cursor: default;
   * {
     pointer-events: none;
@@ -76,7 +76,7 @@
     display: inline-block;
     text-align: center;
     color: $button-color-raised;
-    font-size: 1.6rem;
+    font-size: $button-large-icon-font-size;
     line-height: $button-floating-size;
   }
 
@@ -147,7 +147,7 @@ button.btn-floating {
   line-height: 56px;
 
   i {
-    font-size: 1.6rem;
+    font-size: $button-large-icon-font-size;
   }
 }
 

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

@@ -1,6 +1,7 @@
 
 
 .card-panel {
+  transition: box-shadow .25s;
   padding: $card-padding;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border-radius: 2px;
@@ -13,12 +14,13 @@
   overflow: hidden;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   background-color: $card-bg-color;
+  transition: box-shadow .25s;
   border-radius: 2px;
   @extend .z-depth-1;
 
 
   .card-title {
-    color: #fff;
+    color: $card-bg-color;
     font-size: 24px;
     font-weight: 300;
     &.activator {
@@ -121,19 +123,19 @@
     padding: $card-padding;
 
     a {
-      color: color("orange", "accent-2");
+      color: $card-link-color;
       margin-right: $card-padding;
       @include transition(color .3s ease);
       text-transform: uppercase;
 
-      &:hover { color: lighten(color("orange", "accent-2"), 20%); }
+      &:hover { color: $card-link-color-light; }
     }
   }
 
   .card-reveal {
     padding: $card-padding;
     position: absolute;
-    background-color: #FFF;
+    background-color: $card-bg-color;
     width: 100%;
     overflow-y: auto;
     top: 100%;

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

@@ -59,7 +59,7 @@
 
   .collapsible-body {
     border: 0;
-    background-color: #FFF;
+    background-color: $collapsible-header-color;
 
     li a { margin: 0 1rem 0 2rem; }
   }

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

@@ -406,7 +406,7 @@ $colors: (
       @return map-get($curr_color, $type);
     }
   }
-  @warn "Unknown `#{name}` in $colors.";
+  @warn "Unknown `#{$color} #{$type}` in $colors.";
   @return null;
 }
 

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

@@ -1,6 +1,6 @@
 .dropdown-content {
   @extend .z-depth-1;
-  background-color: #FFFFFF;
+  background-color: $dropdown-bg-color;
   margin: 0;
   display: none;
   min-width: 100px;
@@ -21,7 +21,7 @@
     text-transform: none;
 
     &:hover, &.active {
-      background-color: #eee;
+      background-color: $dropdown-hover-bg-color;
     }
 
     & > a, & > span {

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

@@ -181,7 +181,7 @@ textarea.materialize-textarea {
   width: calc(100% - 4rem);
 
   &:focus {
-    background-color: #FFF;
+    background-color: $input-bg-color;
     border: 0;
     box-shadow: none;
     color: #444;
@@ -494,8 +494,8 @@ form p:last-child {
       height: 13px;
       border-top: 2px solid transparent;
       border-left: 2px solid transparent;
-      border-right: 2px solid #fff;
-      border-bottom: 2px solid #fff;
+      border-right: 2px solid $input-bg-color;
+      border-bottom: 2px solid $input-bg-color;
       -webkit-transform: rotateZ(37deg);
       transform: rotateZ(37deg);
 
@@ -633,12 +633,12 @@ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
     padding: 0;
     display: block;
   }
-  .mdi-navigation-arrow-drop-down {
+  span.caret {
     color: initial;
     position: absolute;
     right: 0;
-    top: 0;
-    font-size: 23px;
+    top: 16px;
+    font-size: 10px;
     &.disabled {
       color: $input-disabled-color;
     }
@@ -681,15 +681,14 @@ select:disabled {
 .file-field {
   position: relative;
 
-  input.file-path {
-    margin-left: 100px;
-    width: calc(100% - 100px);
+  .file-path-wrapper {
+    overflow: hidden;
+    padding-left: 10px;
   }
+  input.file-path { width: 100%; }
 
   .btn {
-    position: absolute;
-    top: 0;
-    left: 0;
+    float: left;
     height: 3rem;
     line-height: 3rem;
   }
@@ -764,7 +763,7 @@ input[type=range] + .thumb {
     border-radius: 50% 50% 50% 0;
 
     .value {
-      color: #fff;
+      color: $input-bg-color;
       margin-left: -1px;
       margin-top: 8px;
       font-size: 10px;

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

@@ -80,6 +80,11 @@ ul {
   box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }
 
+.hoverable:hover {
+  transition: box-shadow .25s;
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
 // Dividers
 
 .divider {
@@ -137,11 +142,10 @@ video.responsive-video {
 .pagination {
 
   li {
-    font-size: 1.2rem;
     float: left;
-    padding: 0 5px;
+    font-size: 1.2rem;
+    padding: 0 10px;
     line-height: 30px;
-    margin: 0 5px;
     border-radius: 2px;
     text-align: center;
 
@@ -160,6 +164,28 @@ video.responsive-video {
       font-size: 2rem;
     }
   }
+
+
+  li.pages ul li {
+    display: inline-block;
+    float: none;
+  }
+}
+@media #{$medium-and-down} {
+  .pagination {
+    width: 100%;
+
+    li.prev,
+    li.next {
+      width: 10%;
+    }
+
+    li.pages {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
 }
 
 
@@ -497,7 +523,10 @@ td, th{
       padding: 10px 20px;
     }
     .collection-item {
-     padding-left: 30px;
+      padding-left: 30px;
+    }
+    .collection-item.avatar {
+      padding-left: 72px;
     }
   }
 

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

@@ -1,5 +1,4 @@
 .container {
-  padding: 0 $gutter-width;
   margin: 0 auto;
   max-width: 1280px;
   width: 90%;

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

@@ -13,7 +13,6 @@
   overflow-y: auto;
 
   border-radius: 2px;
-  @include transform(translate(0));
   will-change: top, opacity;
 
   @media #{$medium-and-down} {
@@ -65,16 +64,16 @@
   height: 70%;
 
   .modal-content {
-    position: fixed;
+    position: absolute;
+    height: calc(100% - 56px);
     max-height: 100%;
-    padding-bottom: 64px;
     width: 100%;
     overflow-y: auto;
   }
 
   .modal-footer {
     border-top: 1px solid rgba(0,0,0,.1);
-    position: fixed;
+    position: absolute;
     bottom: 0;
   }
 }

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

@@ -113,7 +113,7 @@ nav {
         color: rgba(255,255,255,.7);
         @include transition(color .3s);
       }
-      &.active i { color: #fff; }
+      &.active i { color: $navbar-font-color; }
       &.active {
         @include transform(translateY(0));
       }

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

@@ -8,7 +8,7 @@
   height: calc(100% + 60px);
   height: -moz-calc(100%); //Temporary Firefox Fix
   padding-bottom: 60px;
-  background-color: #FFF;
+  background-color: $sidenav-bg-color;
   z-index: 999;
   overflow-y: auto;
 
@@ -29,7 +29,7 @@
 
   li {
     float: none;
-    padding: 0 15px;
+    padding: 0 $sidenav-padding-right;
     &:hover, &.active { background-color: #ddd; }
   }
   a {
@@ -38,7 +38,7 @@
     font-size: 1rem;
     height: 64px;
     line-height: 64px;
-    padding: 0 15px;
+    padding: 0 $sidenav-padding-right;
   }
 }
 
@@ -57,7 +57,7 @@
 .side-nav.fixed {
   a {
     display: block;
-    padding: 0 15px;
+    padding: 0 $sidenav-padding-right;
     color: #444;
   }
 }
@@ -92,7 +92,7 @@
 .side-nav.fixed .collapsible-body li.active {
   background-color: $primary-color;
   a {
-    color: #fff;
+    color: $sidenav-bg-color;
   }
 }
 

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

@@ -24,7 +24,7 @@
   }
 
   .slides {
-    background-color: color('grey', 'base');
+    background-color: $slider-bg-color;
     margin: 0;
     height: 400px;
 
@@ -53,7 +53,7 @@
         width: 70%;
         opacity: 0;
 
-        p { color: color('grey', 'lighten-2'); }
+        p { color: $slider-bg-color-light; }
       }
 
       &.active {
@@ -78,13 +78,13 @@
       height: 16px;
       width: 16px;
       margin: 0 12px;
-      background-color: color('grey', 'lighten-2');
+      background-color: $slider-bg-color-light;
 
       @include transition(background-color .3s);
       border-radius: 50%;
 
       &.active {
-        background-color: color('green', 'base');
+        background-color: $slider-indicator-color;
       }
     }
   }

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

@@ -4,19 +4,19 @@ a {
 
 html{
   line-height: 1.5;
-  
+
   @media only screen and (min-width: 0) {
     font-size: 14px;
   }
-  
+
   @media only screen and (min-width: $medium-screen) {
     font-size: 14.5px;
   }
-  
+
   @media only screen and (min-width: $large-screen) {
     font-size: 15px;
   }
-  
+
   font-family: "Roboto", sans-serif;
   font-weight: normal;
   color: $off-black;
@@ -28,12 +28,12 @@ h1, h2, h3, h4, h5, h6 {
 
 // Header Styles
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
-h1 { font-size: $h1-fontsize; line-height: 1.1*$h1-fontsize; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
-h2 { font-size: $h2-fontsize; line-height: 1.1*$h2-fontsize; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
-h3 { font-size: $h3-fontsize; line-height: 1.1*$h3-fontsize; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
-h4 { font-size: $h4-fontsize; line-height: 1.1*$h4-fontsize; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
-h5 { font-size: $h5-fontsize; line-height: 1.1*$h5-fontsize; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
-h6 { font-size: $h6-fontsize; line-height: 1.1*$h6-fontsize; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
+h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
+h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
+h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
+h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
+h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
+h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
 
 // Text Styles
 em { font-style: italic; }
@@ -51,4 +51,8 @@ small { font-size: 75%; }
     }
     $i: $i + 1;
   }
+  // Handle below 360px screen
+  @media only screen and (max-width: 360px) {
+    font-size: 1.2rem;
+  }
 }