materialize-sass 0.95.1 → 0.95.2

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

@@ -0,0 +1,94 @@
+(function ($) {
+  $(document).ready(function() {
+
+    var time = 0;
+
+    // Horizontal staggered list
+    showStaggeredList = function(selector) {
+      $(selector).find('li').velocity(
+          { translateX: "-100px"},
+          { duration: 0 });
+
+      $(selector).find('li').each(function() {
+        $(this).velocity(
+          { opacity: "1", translateX: "0"},
+          { duration: 800, delay: time, easing: [60, 10] });
+        time += 120;
+      });
+    }
+
+    // Hardcoded .staggered-list scrollFire
+    var staggeredListOptions = [];
+    $('ul.staggered-list').each(function (i) {
+
+      console.log(i);
+      var label = 'scrollFire-' + i;
+      $(this).addClass(label);
+      staggeredListOptions.push(
+        {selector: 'ul.staggered-list.' + label,
+         offset: 200,
+         callback: 'showStaggeredList("ul.staggered-list.' + label + '")'});
+    });
+    console.log(staggeredListOptions);
+    scrollFire(staggeredListOptions);
+
+
+
+
+    // time = 0
+    // // Vertical Staggered list
+    // $('ul.staggered-list.vertical li').velocity(
+    //     { translateY: "100px"},
+    //     { duration: 0 });
+
+    // $('ul.staggered-list.vertical li').each(function() {
+    //   $(this).velocity(
+    //     { opacity: "1", translateY: "0"},
+    //     { duration: 800, delay: time, easing: [60, 25] });
+    //   time += 120;
+    // });
+
+    // // Fade in and Scale
+    // $('.fade-in.scale').velocity(
+    //     { scaleX: .4, scaleY: .4, translateX: -600},
+    //     { duration: 0});
+    // $('.fade-in').each(function() {
+    //   $(this).velocity(
+    //     { opacity: "1", scaleX: 1, scaleY: 1, translateX: 0},
+    //     { duration: 800, easing: [60, 10] });
+    // });
+
+
+    // Image transition function
+    fadeInImage =  function(selector){
+      var element = $(selector);
+      element.css({opacity: 0});
+      $(element).velocity({opacity: 1}, {
+          duration: 650,
+          queue: false,
+          easing: 'easeOutSine'
+        });
+      $(element).animate({opacity: 1}, {
+            duration: 1300,
+            queue: false,
+            easing: 'swing',
+            step: function(now, fx) {
+                fx.start = 100;
+                var grayscale_setting = now/100;
+                var brightness_setting = 150 - (100 - now)/1.75;
+
+                if (brightness_setting < 100)
+                  brightness_setting = 100;
+                console.log(grayscale_setting)
+                if (now >= 0) {
+                  $(this).css({
+                      "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
+                      "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
+                  });
+                }
+            }
+        });
+    };
+
+  });
+}( jQuery ));

data/app/assets/stylesheets/materialize.scss

@@ -1,38 +1,38 @@
 @charset "UTF-8";
 
 // Mixins
-@import "components/prefixer";
-@import "components/mixins";
-@import "components/color";
+@import "materialize/components/prefixer";
+@import "materialize/components/mixins";
+@import "materialize/components/color";
 
 // Variables;
-@import "components/variables";
+@import "materialize/components/variables";
 
 // Reset
-@import "components/normalize";
+@import "materialize/components/normalize";
 
-// components
-@import "components/global";
-@import "components/icons-material-design";
-@import "components/grid";
-@import "components/navbar";
-@import "components/roboto";
-@import "components/typography";
-@import "components/cards";
-@import "components/toast";
-@import "components/tabs";
-@import "components/tooltip";
-@import "components/buttons";
-@import "components/dropdown";
-@import "components/waves";
-@import "components/modal";
-@import "components/collapsible";
-@import "components/materialbox";
-@import "components/form";
-@import "components/table_of_contents";
-@import "components/sideNav";
-@import "components/preloader";
-@import "components/slider";
-@import "components/date_picker/default.scss";
-@import "components/date_picker/default.date.scss";
-@import "components/date_picker/default.time.scss";
+// materialize/components
+@import "materialize/components/global";
+@import "materialize/components/icons-material-design";
+@import "materialize/components/grid";
+@import "materialize/components/navbar";
+@import "materialize/components/roboto";
+@import "materialize/components/typography";
+@import "materialize/components/cards";
+@import "materialize/components/toast";
+@import "materialize/components/tabs";
+@import "materialize/components/tooltip";
+@import "materialize/components/buttons";
+@import "materialize/components/dropdown";
+@import "materialize/components/waves";
+@import "materialize/components/modal";
+@import "materialize/components/collapsible";
+@import "materialize/components/materialbox";
+@import "materialize/components/form";
+@import "materialize/components/table_of_contents";
+@import "materialize/components/sideNav";
+@import "materialize/components/preloader";
+@import "materialize/components/slider";
+@import "materialize/components/date_picker/default.scss";
+@import "materialize/components/date_picker/default.date.scss";
+@import "materialize/components/date_picker/default.time.scss";

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

@@ -17,6 +17,7 @@
   background-color: $button-bg-color-disabled;
   box-shadow: none;
   color: $button-color-disabled;
+  cursor: default;
 
   &:hover {
     background-color: $button-bg-color-disabled;
@@ -83,6 +84,33 @@
       line-height: $button-floating-size * 1.5;
     }
   }
+
+}
+
+// Fixed Action Button
+.fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 1000;
+
+  ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+
+    li {
+      margin-bottom: 15px;
+    }
+
+    a.btn-floating {
+      @include opacity(0);
+    }
+  }
 }
 
 // Flat button
@@ -94,6 +122,7 @@
 
   &.disabled {
     color: lighten(#999, 10%);
+    cursor: default;
   }
 }
 

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

@@ -10,7 +10,6 @@
 
 .card {
   position: relative;
-  overflow: hidden;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   background-color: $card-bg-color;
   @include box-sizing(border-box);
@@ -36,18 +35,15 @@
     &:hover { color: lighten(color("orange", "accent-2"), 20%); }
   }
 
-
-  &.small {
-    height: 300px;
+  // Card Sizes
+  &.small, &.medium, &.large {
     position: relative;
 
     .card-image {
       overflow: hidden;
-      height: 150px;
     }
     .card-content {
       overflow: hidden;
-      height: 150px;
     }
     .card-action {
       position: absolute;
@@ -57,10 +53,43 @@
     }
   }
 
+  &.small {
+    height: 300px;
+
+    .card-image {
+      height: 150px;
+    }
+    .card-content {
+      height: 150px;
+    }
+
+  }
+
+  &.medium {
+    height: 400px;
+
+    .card-image {
+      height: 250px;
+    }
+    .card-content {
+      height: 150px;
+    }
+  }
+
+  &.large {
+    height: 500px;
+
+    .card-image {
+      height: 330px;
+    }
+    .card-content {
+      height: 170px;
+    }
+  }
+
 
   .card-image {
     position: relative;
-    overflow: hidden;
 
     // Image background for content
     img {

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

@@ -18,7 +18,7 @@
     color: $off-black;
     line-height: 1.5rem;
 
-    &:hover {
+    &:hover, &.active {
       background-color: rgba(0,0,0, .06);
     }
 
@@ -28,4 +28,4 @@
       color: $dropdown-color;
     }
   }
-}
+}

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

@@ -31,7 +31,7 @@ label {
   }
   label.active {
     font-size: $label-font-size;
-    @include transform(translateY(-130%));
+    @include transform(translateY(-140%));
   }
 
   input[type=text]:focus + label,
@@ -153,6 +153,7 @@ textarea.materialize-textarea {
   overflow-y: hidden; /* prevents scroll bar flash */
   padding: 1.6rem 0; /* prevents text jump on Enter keypress */
   resize: none;
+  min-height: 3rem;
 }
 
 // For textarea autoresize
@@ -391,7 +392,7 @@ form p {
     margin-right: 10px;
     transition: background 0.3s ease;
     vertical-align: middle;
-    margin-left: 5px;
+    margin: 0px 16px;
 }
 .switch label .lever:after {
     content: "";
@@ -406,50 +407,62 @@ form p {
     top: -2px;
     transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
 }
-.switch label input[type=checkbox][disabled]:first-child + .lever:after,
-.switch label input[type=checkbox][disabled]:checked:first-child + .lever:after {
-    background-color: #BDBDBD;
-}
-input[type=checkbox]:first-child:checked ~ .lever:active:after {
+// Switch active style
+input[type=checkbox]:first-child:checked:not(:disabled) ~ .lever:active:after {
        box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
 }
-input[type=checkbox]:first-child ~ .lever:active:after,
-input[type=checkbox][disabled]:first-child ~ .lever:active:after {
+input[type=checkbox]:first-child:not(:disabled) ~ .lever:active:after {
        box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
 }
+
+// Disabled Styles
+.switch label input[type=checkbox][disabled]:first-child + .lever:after,
+.switch label input[type=checkbox][disabled]:checked:first-child + .lever:after {
+    background-color: #BDBDBD;
+}
+
 .switch label input[type=checkbox]:first-child:checked + .lever:after {
     left: 30px;
 }
 
 
+
+
+
 /***************
   Select Field
 ***************/
 
-.select-wrapper span.select-dropdown {
-  position: relative;
-  cursor: pointer;
-  color: #444;
-  background-color: transparent;
-  border: none;
-  border-bottom: 1px solid $input-border-color;
-  outline: none;
-  height: 3rem;
-  line-height: 3rem;
-  width: 100%;
-  font-size: 1rem;
-  margin: 0 0 15px 0;
-  padding: 0;
-  display: block;
+.select-label {
+  position: absolute;
+}
+
+.select-wrapper {
   position: relative;
+  margin-top: 15px;
 
-  &:after {
-    position: absolute;
-    right: 0;
-    font-size: 23px;
-    @extend [class^="mdi-"];
-    @extend .mdi-navigation-arrow-drop-down:before;
+  input.select-dropdown {
+    position: relative;
+    cursor: pointer;
+    color: #444;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid $input-border-color;
+    outline: none;
+    height: 3rem;
+    line-height: 3rem;
+    width: 100%;
+    font-size: 1rem;
+    margin: 0 0 15px 0;
+    padding: 0;
+    display: block;
   }
+  .mdi-navigation-arrow-drop-down {
+      position: absolute;
+      right: 0;
+      top: 0;
+      font-size: 23px;
+    }
 }
 
 select { display: none; }
@@ -460,7 +473,11 @@ select.browser-default { display: block; }
 select:disabled {
   color: rgba(0,0,0,.3);
 }
-.select-wrapper span.select-dropdown.disabled {
+.select-wrapper input.select-dropdown:disabled {
+  color: rgba(0,0,0,.3);
+  border-bottom: 1px solid rgba(0,0,0,.3);
+}
+.select-wrapper i {
   color: rgba(0,0,0,.3);
 }
 .select-dropdown li.disabled {
@@ -470,6 +487,46 @@ select:disabled {
 }
 
 
+/*********************
+      File Input
+**********************/
+.file-field {
+  position: relative;
+  overflow: hidden;
+
+  input.file-path {
+    margin-left: 100px;
+  }
+
+  .btn {
+    position: absolute;
+    top: 0;
+    height: 3rem;
+    line-height: 3rem;
+  }
+
+  span {
+    cursor: pointer;
+  }
+
+  input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+  }
+}
+
+
+
 /***************
       Range
 ***************/