materialize-sass 0.97.6 → 0.97.7

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

@@ -1,7 +1,14 @@
 (function ($) {
   // Image transition function
-  Materialize.fadeInImage =  function(selector){
-    var element = $(selector);
+  Materialize.fadeInImage =  function(selectorOrEl) {
+    var element;
+    if (typeof(selectorOrEl) === 'string') {
+      element = $(selectorOrEl);
+    } else if (typeof(selectorOrEl) === 'object') {
+      element = selectorOrEl;
+    } else {
+      return;
+    }
     element.css({opacity: 0});
     $(element).velocity({opacity: 1}, {
         duration: 650,
@@ -31,13 +38,21 @@
   };
 
   // Horizontal staggered list
-  Materialize.showStaggeredList = function(selector) {
+  Materialize.showStaggeredList = function(selectorOrEl) {
+    var element;
+    if (typeof(selectorOrEl) === 'string') {
+      element = $(selectorOrEl);
+    } else if (typeof(selectorOrEl) === 'object') {
+      element = selectorOrEl;
+    } else {
+      return;
+    }
     var time = 0;
-    $(selector).find('li').velocity(
+    element.find('li').velocity(
         { translateX: "-100px"},
         { duration: 0 });
 
-    $(selector).find('li').each(function() {
+    element.find('li').each(function() {
       $(this).velocity(
         { opacity: "1", translateX: "0"},
         { duration: 800, delay: time, easing: [60, 10] });

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

@@ -20,7 +20,10 @@
 .btn-large.disabled,
 .btn:disabled,
 .btn-large:disabled,
-.btn-floating:disabled {
+.btn-floating:disabled,
+.btn[disabled],
+.btn-large[disabled],
+.btn-floating[disabled] {
   background-color: $button-disabled-background !important;
   box-shadow: none;
   color: $button-disabled-color !important;
@@ -173,6 +176,17 @@ button.btn-floating {
   background-color: transparent;
   color: $button-flat-color;
   cursor: pointer;
+  transition: background-color .2s;
+
+  &:focus,
+  &:active {
+    background-color: transparent;
+  }
+
+  &:hover {
+    background-color: rgba(0,0,0,.1);
+    box-shadow: none;
+  }
 
   &.disabled {
     color: $button-flat-disabled-color;

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

@@ -34,8 +34,11 @@
       max-height: 60%;
       overflow: hidden;
     }
-    .card-content {
+    .card-image + .card-content {
       max-height: 40%;
+    }
+    .card-content {
+      max-height: 100%;
       overflow: hidden;
     }
     .card-action {
@@ -58,6 +61,56 @@
     height: 500px;
   }
 
+  // Horizontal Cards
+  &.horizontal {
+    &.small, &.medium, &.large {
+      .card-image {
+        height: 100%;
+        max-height: none;
+        overflow: visible;
+
+        img {
+          height: 100%;
+        }
+      }
+    }
+
+    display: flex;
+
+    .card-image {
+      max-width: 50%;
+      img {
+        max-width: 100%;
+        width: auto;
+      }
+    }
+
+    .card-stacked {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      position: relative;
+
+      .card-content {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  // Sticky Action Section
+  &.sticky-action {
+    .card-action {
+      z-index: 2;
+    }
+
+    .card-reveal {
+      z-index: 1;
+      padding-bottom: 64px;
+    }
+  }
+
+
+
 
   .card-image {
     position: relative;
@@ -102,7 +155,6 @@
     background-color: inherit;
     border-top: 1px solid rgba(160,160,160,.2);
     padding: $card-padding;
-    z-index: 2;
 
     a:not(.btn):not(.btn-large):not(.btn-floating) {
       color: $card-link-color;
@@ -112,11 +164,6 @@
 
       &:hover { color: $card-link-color-light; }
     }
-
-    & + .card-reveal {
-      z-index: 1;
-      padding-bottom: 64px;
-    }
   }
 
   .card-reveal {

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

@@ -1,4 +1,41 @@
 .carousel {
+  &.carousel-slider {
+    top: 0;
+    left: 0;
+    height: 0;
+
+    .carousel-fixed-item {
+      &.with-indicators {
+        bottom: 68px;
+      }
+
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 20px;
+      z-index: 1;
+    }
+
+    .carousel-item {
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      h2 {
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+      }
+
+      p {
+        font-size: 15px;
+      }
+    }
+  }
+
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -8,7 +45,9 @@
   transform-origin: 0% 50%;
 
   .carousel-item {
+    display: none;
     width: 200px;
+    height: 400px;
     position: absolute;
     top: 0;
     left: 0;
@@ -18,17 +57,29 @@
     }
   }
 
-  &.carousel-slider {
-    top: 0;
+  .indicators {
+    position: absolute;
+    text-align: center;
     left: 0;
-    height: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
 
-    .carousel-item {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
+    .indicator-item {
+      &.active {
+        background-color: #fff;
+      }
+
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 8px;
+      width: 8px;
+      margin: 24px 4px;
+      background-color: rgba(255,255,255,.5);
+
+      transition: background-color .3s;
+      border-radius: 50%;
     }
   }
 }

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

@@ -8,6 +8,8 @@
   padding: 0 12px;
   border-radius: 16px;
   background-color: $chip-bg-color;
+  margin-bottom: $chip-margin;
+  margin-right: $chip-margin;
 
   img {
     float: left;
@@ -17,11 +19,56 @@
     border-radius: 50%;
   }
 
-  i.material-icons {
+  .close {
     cursor: pointer;
     float: right;
     font-size: 16px;
     line-height: 32px;
     padding-left: 8px;
   }
-}
+}
+
+.chips {
+  border: none;
+  border-bottom: 1px solid $chip-border-color;
+  box-shadow: none;
+  margin-bottom: 30px;
+  min-height: 45px;
+  outline: none;
+  padding-bottom: $chip-margin;
+  transition: all .3s;
+
+  &.focus {
+    border-bottom: 1px solid $chip-selected-color;
+    box-shadow: 0 1px 0 0 $chip-selected-color;
+  }
+
+  &:hover {
+    cursor: text;
+  }
+
+  .chip.selected {
+    background-color: $chip-selected-color;
+    color: #fff;
+  }
+
+  .input {
+    background: none;
+    border: 0;
+    color: rgba(0,0,0,.6);
+    display: inline-block;
+    font-size: 13px;
+    font-weight: 500;
+    height: 32px;
+    margin-right: 20px;
+    line-height: 32px;
+    outline: 0;
+    padding: 0 !important;
+    width: 120px !important;
+  }
+
+  .input:focus {
+    border: 0 !important;
+    box-shadow: none !important;
+  }
+}

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

@@ -53,7 +53,7 @@
     border: none;
     line-height: inherit;
     height: inherit;
-    padding: 0 $sidenav-padding-right;
+    padding: 0 $sidenav-padding;
 
     &:hover { background-color: rgba(0,0,0,.05); }
     i { line-height: inherit; }
@@ -64,8 +64,8 @@
     background-color: $collapsible-header-color;
 
     li a {
-      padding: 0 (7.5px + $sidenav-padding-right)
-               0 (15px + $sidenav-padding-right);
+      padding: 0 (7.5px + $sidenav-padding)
+               0 (15px + $sidenav-padding);
     }
   }
 

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

@@ -374,7 +374,7 @@ $colors: (
         color: $color_value !important;
       }
     }
-    @else {
+    @else if $color_name != "shades" {
       .#{$color_name}.#{$color_type} {
         background-color: $color_value !important;
       }

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

@@ -18,11 +18,17 @@ main {
 }
 
 ul {
-  &.browser-default {
+  &.browser-default,
+  &.browser-default li {
     list-style-type: initial;
   }
 
+  padding: 0;
   list-style-type: none;
+
+  li {
+    list-style-type: none;
+  }
 }
 
 a {
@@ -45,13 +51,6 @@ a {
 }
 
 
-ul {
-  padding: 0;
-  li {
-    list-style-type: none;
-  }
-}
-
 // classic clearfix
 .clearfix {
   clear: both;

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

@@ -50,6 +50,7 @@
     float: left;
     box-sizing: border-box;
     padding: 0 $gutter-width / 2;
+    min-height: 1px;
 
     &[class*="push-"],
     &[class*="pull-"] {

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

@@ -76,6 +76,13 @@ nav {
       right: 0.5rem;
       padding: 0;
     }
+
+    i,
+    [class^="mdi-"], [class*="mdi-"],
+    i.material-icons {
+      float: left;
+      margin-right: 15px;
+    }
   }
 
 
@@ -94,9 +101,9 @@ nav {
     }
     a {
       transition: background-color .3s;
-      font-size: 1rem;
+      font-size: $navbar-font-size;
       color: $navbar-font-color;
-      display: inline-block;
+      display: block;
       padding: 0 15px;
       cursor: pointer;
 
@@ -117,8 +124,13 @@ nav {
   }
 
   // Navbar Search Form
+  form {
+    height: 100%;
+  }
+
   .input-field {
     margin: 0;
+    height: 100%;
 
     input {
       height: 100%;
@@ -132,6 +144,7 @@ nav {
         box-shadow: none;
       }
     }
+
     label {
       top: 0;
       left: 0;
@@ -145,9 +158,7 @@ nav {
         transform: translateY(0);
       }
     }
-
   }
-
 }
 
 // Fixed Navbar