checkboxes now don't use js and are more similar to the original ones

css-compiled/material.css

@@ -442,38 +442,23 @@ h6,
 }
 .checkbox label .ripple {
   background-color: rgba(0, 0, 0, 0.84);
-  left: 0;
+  left: -5px;
-  top: -10px;
+  top: -15px;
-  height: 40px;
+  height: 50px;
-  width: 40px;
+  width: 50px;
   border-radius: 100%;
-  transform: scale(0);
-  transition: transform .1s, opacity 0.2s 0.4s;
   z-index: 1;
-  opacity: 0.2;
-  margin: 0;
-}
-.checkbox label .ripple.animate {
-  transform: scale(1);
   opacity: 0;
+  margin: 0;
 }
 .checkbox label .box {
   border: 2px solid rgba(0, 0, 0, 0.84);
   height: 20px;
   width: 20px;
-  transition-delay: 0.2s;
+  -webkit-transition-delay: 0.2s;
-}
+  -moz-transition-delay: 0.2s;
-.checkbox label .check {
+  -o-transition-delay: 0.2s;
-  top: -4px;
+  -ms-transition-delay: 0.2s;
-  left: 16px;
-  width: 12px;
-  height: 24px;
-  border: 2px solid;
-  border-top: none;
-  border-left: none;
-  opacity: 0;
-  z-index: 888;
-  transform: rotate(45deg);
   transition-delay: 0.2s;
 }
 .checkbox .check,
@@ -546,19 +531,49 @@ h6,
 .checkbox-material-lightgrey .check {
   color: #ececec;
 }
-.checkbox input[type=checkbox][disabled]:checked ~ .check,
+.checkbox input[type=checkbox] {
+  display: none;
+}
+.checkbox input[type=checkbox] ~ .box {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 18px;
+  height: 18px;
+  border: solid 2px;
+  border-color: #5a5a5a;
+  -webkit-animation: uncheck 300ms ease-out forwards;
+  -moz-animation: uncheck 300ms ease-out forwards;
+  -ms-animation: uncheck 300ms ease-out forwards;
+  -o-animation: uncheck 300ms ease-out forwards;
+  animation: uncheck 300ms ease-out forwards;
+}
+.checkbox input[type=checkbox]:checked ~ .box {
+  -webkit-animation: check 300ms ease-out forwards;
+  -moz-animation: check 300ms ease-out forwards;
+  -ms-animation: check 300ms ease-out forwards;
+  -o-animation: check 300ms ease-out forwards;
+  animation: check 300ms ease-out forwards;
+}
+.checkbox input[type=checkbox]:not(:checked) ~ .ripple {
+  -webkit-animation: rippleOff 500ms;
+  -moz-animation: rippleOff 500ms;
+  -ms-animation: rippleOff 500ms;
+  -o-animation: rippleOff 500ms;
+  animation: rippleOff 500ms;
+}
+.checkbox input[type=checkbox]:checked ~ .ripple {
+  -webkit-animation: rippleOn 500ms;
+  -moz-animation: rippleOn 500ms;
+  -ms-animation: rippleOn 500ms;
+  -o-animation: rippleOn 500ms;
+  animation: rippleOn 500ms;
+}
 .checkbox input[type=checkbox][disabled]:not(:checked) ~ .box {
   opacity: 0.5;
 }
 .checkbox input[type=checkbox][disabled] ~ .ripple {
-  opacity: 0.1;
+  background-color: rgba(0, 0, 0, 0.84);
-}
-.checkbox input[type=checkbox] {
-  display: none;
-}
-.checkbox input[type=checkbox]:checked ~ .box {
-  opacity: 0;
-  transform: scale(0) rotate(-180deg);
 }
 .checkbox input[type=checkbox]:checked ~ .ripple,
 .checkbox-default input[type=checkbox]:checked ~ .ripple {
@@ -630,12 +645,375 @@ h6,
 .checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple {
   background-color: #ececec;
 }
-.checkbox input[type=checkbox]:checked ~ .check {
+@-webkit-keyframes uncheck {
-  opacity: 1;
+  0% {
-  transform: scale(1) rotate(45deg);
+    top: -3px;
+    left: 17px;
+    width: 10px;
+    height: 21px;
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+    transform: rotate(45deg);
+  }
+  50% {
+    top: 14px;
+    left: 17px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+  51% {
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+  100% {
+    top: 1px;
+    left: 12px;
+    width: 18px;
+    height: 18px;
+    transform: rotate(0deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
 }
-.checkbox input[type=checkbox][disabled] ~ .ripple {
+.keyframe-check 100% {
-  background-color: rgba(0, 0, 0, 0.84);
+  top: -3px;
+  left: 17px;
+  width: 10px;
+  height: 21px;
+  transform: rotate(45deg);
+  border-color: #0f9d58;
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+.keyframe-check 51% {
+  border-left: transparent;
+  border-top-color: transparent;
+}
+.keyframe-check 50% {
+  top: 14px;
+  left: 17px;
+  width: 4px;
+  height: 4px;
+  transform: rotate(45deg);
+  border-color: #5a5a5a;
+  border-left-color: #5a5a5a;
+  border-top-color: #5a5a5a;
+}
+.keyframe-check 0% {
+  top: 1px;
+  left: 12px;
+  width: 18px;
+  height: 18px;
+  transform: rotate(0deg);
+  border-color: #5a5a5a;
+  border-left-color: #5a5a5a;
+  border-top-color: #5a5a5a;
+}
+@-webkit-keyframes check {
+  100% {
+    top: -3px;
+    left: 17px;
+    width: 10px;
+    height: 21px;
+    transform: rotate(45deg);
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+  51% {
+    border-left: transparent;
+    border-top-color: transparent;
+  }
+  50% {
+    top: 14px;
+    left: 17px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+  0% {
+    top: 1px;
+    left: 12px;
+    width: 18px;
+    height: 18px;
+    transform: rotate(0deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+}
+@-moz-keyframes check {
+  100% {
+    top: -3px;
+    left: 17px;
+    width: 10px;
+    height: 21px;
+    transform: rotate(45deg);
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+  51% {
+    border-left: transparent;
+    border-top-color: transparent;
+  }
+  50% {
+    top: 14px;
+    left: 17px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+  0% {
+    top: 1px;
+    left: 12px;
+    width: 18px;
+    height: 18px;
+    transform: rotate(0deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+}
+@-ms-keyframes check {
+  100% {
+    top: -3px;
+    left: 17px;
+    width: 10px;
+    height: 21px;
+    transform: rotate(45deg);
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+  51% {
+    border-left: transparent;
+    border-top-color: transparent;
+  }
+  50% {
+    top: 14px;
+    left: 17px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+  0% {
+    top: 1px;
+    left: 12px;
+    width: 18px;
+    height: 18px;
+    transform: rotate(0deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+}
+@-o-keyframes check {
+  100% {
+    top: -3px;
+    left: 17px;
+    width: 10px;
+    height: 21px;
+    transform: rotate(45deg);
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+  51% {
+    border-left: transparent;
+    border-top-color: transparent;
+  }
+  50% {
+    top: 14px;
+    left: 17px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+  0% {
+    top: 1px;
+    left: 12px;
+    width: 18px;
+    height: 18px;
+    transform: rotate(0deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+}
+@keyframes check {
+  100% {
+    top: -3px;
+    left: 17px;
+    width: 10px;
+    height: 21px;
+    transform: rotate(45deg);
+    border-color: #0f9d58;
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+  51% {
+    border-left: transparent;
+    border-top-color: transparent;
+  }
+  50% {
+    top: 14px;
+    left: 17px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+  0% {
+    top: 1px;
+    left: 12px;
+    width: 18px;
+    height: 18px;
+    transform: rotate(0deg);
+    border-color: #5a5a5a;
+    border-left-color: #5a5a5a;
+    border-top-color: #5a5a5a;
+  }
+}
+.ripple 0% {
+  opacity: 0;
+}
+.ripple 50% {
+  opacity: 0.2;
+}
+.ripple 100% {
+  opacity: 0;
+}
+@-webkit-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-ms-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-o-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-ms-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-o-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 .form-horizontal .radio {
   margin-bottom: 10px;
@@ -849,6 +1227,12 @@ h6,
   background: transparent;
   border-bottom: 1px solid #757575;
 }
+.form-control-wrapper .form-control:disabled,
+.form-control:disabled,
+.form-control-wrapper .form-control:focus:disabled,
+.form-control:focus:disabled {
+  border-style: dashed;
+}
 .form-control-wrapper {
   position: relative;
   /* active state */

less/checkboxes.less

@@ -16,62 +16,165 @@
         }
         .ripple {
             background-color: @lightbg-text;
-            left: 0;
+            left: -5px;
-            top: -10px;
+            top: -15px;
-            height: 40px;
+            height: 50px;
-            width: 40px;
+            width: 50px;
             border-radius: 100%;
-            transform: scale(0);
-            transition: transform .1s, opacity 0.2s 0.4s;
             z-index: 1;
-            opacity: 0.2;
+            opacity: 0;
             margin: 0;
-            &.animate {
-                transform: scale(1);
-                opacity: 0;
-            }
         }
         .box {
             border: 2px solid @lightbg-text;
             height: 20px;
             width: 20px;
-            transition-delay: 0.2s;
+            .transition-delay(0.2s);
-        }
-        .check         {
-            top: -4px;
-            left: 16px;
-            width: 12px;
-            height: 24px;
-            border: 2px solid;
-            border-top: none;
-            border-left: none;
-            opacity: 0;
-            z-index: 888;
-            transform: rotate(45deg);
-            transition-delay: 0.2s;
         }
     }
+
+    // Variations
     .variations(~" .check", color, @success);
 
-    input[type=checkbox][disabled]:checked ~ .check,
+    // Hide native checkbox
+    input[type=checkbox] { display: none; }
+
+    input[type=checkbox] ~ .box {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 18px;
+        height: 18px;
+        border: solid 2px;
+        border-color: #5a5a5a;
+        .animation(uncheck 300ms ease-out forwards);
+    }
+
+    input[type=checkbox]:checked ~ .box {
+        .animation(check 300ms ease-out forwards);
+    }
+
+    // Ripple effect on click
+    input[type=checkbox]:not(:checked) ~ .ripple {
+        .animation(rippleOff 500ms);
+    }
+    input[type=checkbox]:checked ~ .ripple {
+        .animation(rippleOn 500ms);
+    }
+
+    // Style for disabled inputs
     input[type=checkbox][disabled]:not(:checked) ~ .box {
         opacity: 0.5;
     }
-    input[type=checkbox][disabled] ~ .ripple {
-        opacity: 0.1;
-    }
-    input[type=checkbox] { display: none; }
-    input[type=checkbox]:checked ~ .box {
-        opacity: 0;
-        transform: scale(0) rotate(-180deg);
-    }
-    .variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
-    input[type=checkbox]:checked ~ .check {
-        opacity: 1;
-        transform: scale(1) rotate(45deg);
-    }
-
     input[type=checkbox][disabled] ~ .ripple {
         background-color: @lightbg-text;
     }
+
+
+    .variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
 }
+
+
+@-webkit-keyframes uncheck {
+    0% {
+        top: -3px;
+        left: 17px;
+        width: 10px;
+        height: 21px;
+        border-color: #0f9d58;
+        border-left-color: transparent;
+        border-top-color: transparent;
+        transform: rotate(45deg);
+    }
+    50% {
+        top: 14px;
+        left: 17px;
+        width: 4px;
+        height: 4px;
+        transform: rotate(45deg);
+        border-color: #0f9d58;
+        border-left-color: transparent;
+        border-top-color: transparent;
+    }
+    51% {
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+    100% {
+        top: 1px;
+        left: 12px;
+        width: 18px;
+        height: 18px;
+        transform: rotate(0deg);
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+}
+
+.keyframe-check {
+    100% {
+        top: -3px;
+        left: 17px;
+        width: 10px;
+        height: 21px;
+        transform: rotate(45deg);
+        border-color: #0f9d58;
+        border-left-color: transparent;
+        border-top-color: transparent;
+    }
+    51% {
+        border-left: transparent;
+        border-top-color: transparent;
+    }
+    50% {
+        top: 14px;
+        left: 17px;
+        width: 4px;
+        height: 4px;
+        transform: rotate(45deg);
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+    0% {
+        top: 1px;
+        left: 12px;
+        width: 18px;
+        height: 18px;
+        transform: rotate(0deg);
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+}
+@-webkit-keyframes check {.keyframe-check()}
+@-moz-keyframes check {.keyframe-check()}
+@-ms-keyframes check {.keyframe-check()}
+@-o-keyframes check {.keyframe-check()}
+@keyframes check {.keyframe-check()}
+
+.ripple{
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.2;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes rippleOn {.ripple()}
+@-moz-keyframes rippleOn {.ripple()}
+@-ms-keyframes rippleOn {.ripple()}
+@-o-keyframes rippleOn {.ripple()}
+@keyframes rippleOn {.ripple()}
+
+@-webkit-keyframes rippleOff {.ripple()}
+@-moz-keyframes rippleOff {.ripple()}
+@-ms-keyframes rippleOn {.ripple()}
+@-o-keyframes rippleOff {.ripple()}
+@keyframes rippleOff {.ripple()}

less/inputs.less

@@ -8,6 +8,9 @@
         border-radius: 0;
         background: transparent;
         border-bottom: 1px solid #757575;
+        &:disabled {
+            border-style: dashed;
+        }
     }
 }
 
@@ -18,10 +21,6 @@
         outline: none;
     }
 
-    .material-input:after {
-
-    }
-
     .floating-label {
         color: #7E7E7E;
         font-size: 14px;

less/material.less

@@ -6,6 +6,7 @@
 
 @import "variables.less";
 @import "mixins.less";
+@import "prefixer.less";
 @import "animations.less";
 @import "shadows.less";
 

less/prefixer.less

@@ -0,0 +1,371 @@
+// main: material
+
+//---------------------------------------------------
+//  LESS Prefixer
+//---------------------------------------------------
+//
+//  All of the CSS3 fun, none of the prefixes!
+//
+//  As a rule, you can use the CSS properties you
+//  would expect just by adding a '.':
+//
+//  box-shadow => .box-shadow(@args)
+//
+//  Also, when shorthand is available, arguments are
+//  not parameterized. Learn CSS, not LESS Prefixer.
+//
+//  -------------------------------------------------
+//  TABLE OF CONTENTS
+//  (*) denotes a syntax-sugar helper
+//  -------------------------------------------------
+//
+//      .animation(@args)
+//          .animation-delay(@delay)
+//          .animation-direction(@direction)
+//          .animation-duration(@duration)
+//          .animation-fill-mode(@mode)
+//          .animation-iteration-count(@count)
+//          .animation-name(@name)
+//          .animation-play-state(@state)
+//          .animation-timing-function(@function)
+//      .background-size(@args)
+//      .border-radius(@args)
+//      .box-shadow(@args)
+//          .inner-shadow(@args) *
+//      .box-sizing(@args)
+//          .border-box() *
+//          .content-box() *
+//      .columns(@args)
+//          .column-count(@count)
+//          .column-gap(@gap)
+//          .column-rule(@args)
+//          .column-width(@width)
+//      .gradient(@default,@start,@stop) *
+//          .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+//          .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+//      .opacity(@factor)
+//      .transform(@args)
+//          .transform-origin(@args)
+//          .transform-style(@style)
+//          .rotate(@deg)
+//          .scale(@factor)
+//          .translate(@x,@y)
+//          .translate3d(@x,@y,@z)
+//          .translateHardware(@x,@y) *
+//      .text-shadow(@args)
+//      .transition(@args)
+//          .transition-delay(@delay)
+//          .transition-duration(@duration)
+//          .transition-property(@property)
+//          .transition-timing-function(@function)
+//
+//
+//
+//  Credit to LESS Elements for the motivation and
+//  to CSS3Please.com for implementation.
+//
+//  Copyright (c) 2012 Joel Sutherland
+//  MIT Licensed:
+//  http://www.opensource.org/licenses/mit-license.php
+//
+//---------------------------------------------------
+
+
+// Animation
+
+.animation(@args) {
+    -webkit-animation: @args;
+    -moz-animation: @args;
+    -ms-animation: @args;
+    -o-animation: @args;
+    animation: @args;
+}
+.animation-delay(@delay) {
+    -webkit-animation-delay: @delay;
+    -moz-animation-delay: @delay;
+    -ms-animation-delay: @delay;
+    -o-animation-delay: @delay;
+    animation-delay: @delay;
+}
+.animation-direction(@direction) {
+    -webkit-animation-direction: @direction;
+    -moz-animation-direction: @direction;
+    -ms-animation-direction: @direction;
+    -o-animation-direction: @direction;
+}
+.animation-duration(@duration) {
+    -webkit-animation-duration: @duration;
+    -moz-animation-duration: @duration;
+    -ms-animation-duration: @duration;
+    -o-animation-duration: @duration;
+}
+.animation-fill-mode(@mode) {
+    -webkit-animation-fill-mode: @mode;
+    -moz-animation-fill-mode: @mode;
+    -ms-animation-fill-mode: @mode;
+    -o-animation-fill-mode: @mode;
+    animation-fill-mode: @mode;
+}
+.animation-iteration-count(@count) {
+    -webkit-animation-iteration-count: @count;
+    -moz-animation-iteration-count: @count;
+    -ms-animation-iteration-count: @count;
+    -o-animation-iteration-count: @count;
+    animation-iteration-count: @count;
+}
+.animation-name(@name) {
+    -webkit-animation-name: @name;
+    -moz-animation-name: @name;
+    -ms-animation-name: @name;
+    -o-animation-name: @name;
+    animation-name: @name;
+}
+.animation-play-state(@state) {
+    -webkit-animation-play-state: @state;
+    -moz-animation-play-state: @state;
+    -ms-animation-play-state: @state;
+    -o-animation-play-state: @state;
+    animation-play-state: @state;
+}
+.animation-timing-function(@function) {
+    -webkit-animation-timing-function: @function;
+    -moz-animation-timing-function: @function;
+    -ms-animation-timing-function: @function;
+    -o-animation-timing-function: @function;
+    animation-timing-function: @function;
+}
+
+
+// Background Size
+
+.background-size(@args) {
+    -webkit-background-size: @args;
+    background-size: @args;
+}
+
+
+// Border Radius
+
+.border-radius(@args) {
+    -webkit-border-radius: @args;
+    border-radius: @args;
+
+    background-clip: padding-box;
+}
+
+
+// Box Shadows
+
+.box-shadow(@args) {
+    -webkit-box-shadow: @args;
+    box-shadow: @args;
+}
+.inner-shadow(@args) {
+    .box-shadow(inset @args);
+}
+
+
+// Box Sizing
+
+.box-sizing(@args) {
+    -webkit-box-sizing: @args;
+    -moz-box-sizing: @args;
+    box-sizing: @args;
+}
+.border-box(){
+    .box-sizing(border-box);
+}
+.content-box(){
+    .box-sizing(content-box);
+}
+
+
+// Columns
+
+.columns(@args) {
+    -webkit-columns: @args;
+    -moz-columns: @args;
+    columns: @args;
+}
+.column-count(@count) {
+    -webkit-column-count: @count;
+    -moz-column-count: @count;
+    column-count: @count;
+}
+.column-gap(@gap) {
+    -webkit-column-gap: @gap;
+    -moz-column-gap: @gap;
+    column-gap: @gap;
+}
+.column-width(@width) {
+    -webkit-column-width: @width;
+    -moz-column-width: @width;
+    column-width: @width;
+}
+.column-rule(@args) {
+    -webkit-column-rule: @args;
+    -moz-column-rule: @args;
+    column-rule: @args;
+}
+
+
+// Gradients
+
+.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    .linear-gradient-top(@default,@start,0%,@stop,100%);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+}
+
+
+// Opacity
+
+.opacity(@factor) {
+    @iefactor: @factor*100;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
+    filter: ~"alpha(opacity=(@{iefactor}))";
+    opacity: @factor;
+}
+
+
+// Text Shadow
+
+.text-shadow(@args) {
+    text-shadow: @args;
+}
+
+
+// Transforms
+
+.transform(@args) {
+    -webkit-transform: @args;
+    -moz-transform: @args;
+    -ms-transform: @args;
+    -o-transform: @args;
+    transform: @args;
+}
+.transform-origin(@args) {
+    -webkit-transform-origin: @args;
+    -moz-transform-origin: @args;
+    -ms-transform-origin: @args;
+    -o-transform-origin: @args;
+    transform-origin: @args;
+}
+.transform-style(@style) {
+    -webkit-transform-style: @style;
+    -moz-transform-style: @style;
+    -ms-transform-style: @style;
+    -o-transform-style: @style;
+    transform-style: @style;
+}
+.rotate(@deg:45deg){
+    .transform(rotate(@deg));
+}
+.scale(@factor:.5){
+    .transform(scale(@factor));
+}
+.translate(@x,@y){
+    .transform(translate(@x,@y));
+}
+.translate3d(@x,@y,@z) {
+    .transform(translate3d(@x,@y,@z));
+}
+.translateHardware(@x,@y) {
+    .translate(@x,@y);
+    -webkit-transform: translate3d(@x,@y,0);
+    -moz-transform: translate3d(@x,@y,0);
+    -o-transform: translate3d(@x,@y,0);
+    -ms-transform: translate3d(@x,@y,0);
+    transform: translate3d(@x,@y,0);
+}
+
+
+// Transitions
+
+.transition(@args:200ms) {
+    -webkit-transition: @args;
+    -moz-transition: @args;
+    -o-transition: @args;
+    -ms-transition: @args;
+    transition: @args;
+}
+.transition-delay(@delay:0) {
+    -webkit-transition-delay: @delay;
+    -moz-transition-delay: @delay;
+    -o-transition-delay: @delay;
+    -ms-transition-delay: @delay;
+    transition-delay: @delay;
+}
+.transition-duration(@duration:200ms) {
+    -webkit-transition-duration: @duration;
+    -moz-transition-duration: @duration;
+    -o-transition-duration: @duration;
+    -ms-transition-duration: @duration;
+    transition-duration: @duration;
+}
+.transition-property(@property:all) {
+    -webkit-transition-property: @property;
+    -moz-transition-property: @property;
+    -o-transition-property: @property;
+    -ms-transition-property: @property;
+    transition-property: @property;
+}
+.transition-timing-function(@function:ease) {
+    -webkit-transition-timing-function: @function;
+    -moz-transition-timing-function: @function;
+    -o-transition-timing-function: @function;
+    -ms-transition-timing-function: @function;
+    transition-timing-function: @function;
+}

scripts/material.js

@@ -25,17 +25,17 @@ $(function (){
     });
 
     // Material inputs engine (ripple effect)
-    $(document).on("click", ".checkbox label, .radio label", function() {
+    /*$(document).on("mouseup", ".checkbox label, .radio label", function() {
-        var $ripple     = $(this).find(".ripple"),
+        console.log("click");
-            timestamp   = "t" + new Date().getTime();
+        var $ripple = $(this).find(".ripple");
-        $ripple.attr("class", "ripple");
+
-        $ripple.addClass("animate").addClass(timestamp);
+        $ripple.addClass("animate");
-        setTimeout(function() {
+        var timer = setTimeout(function() {
-            if ($ripple.hasClass(timestamp)) {
+            console.log("out");
-                $ripple.removeClass("animate").removeClass(timestamp);
+            clearTimeout(timer);
-            }
+            $ripple.removeClass("animate");
         }, 800);
-    });
+    });*/
 
     $(document).on("change", ".form-control", function() {
         if ($(this).val() !== "") {