v0.4.0

.gitignore

@@ -11,3 +11,5 @@ Thumbs.db
 /bower_components/
 .build*
 /_SpecRunner.html
+Gemfile.lock
+dist/sassc

.ruby-gemset

@@ -0,0 +1 @@
+bootstrap-material-design

.ruby-version

@@ -0,0 +1 @@
+2.2.2

.travis.yml

@@ -2,13 +2,20 @@ language: node_js
 
 node_js: 0.10.33
 
+sudo: false # use new container infrastructure
+
+# sass setup
+cache: bundler # speeds up bundler
+rvm:
+  - 2.2.2
+
 before_script:
   - npm install -g grunt-cli
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  #- export DISPLAY=:99.0
+  #- sh -e /etc/init.d/xvfb start
   # Install meteor
-  - curl https://install.meteor.com | /bin/sh
+  #- curl https://install.meteor.com | /bin/sh
   # Install spacejam, Meteor's CI helper
-  - npm install -g spacejam
+  #- npm install -g spacejam
 
-script: grunt cibuild
+script: bundle install && grunt cibuild

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v 0.3.1-dev
+
+- Fixed #504 (input-lg and input-sm classes now work)
+
 ## v 0.3.0
 
 - Implemented full color palette from Material Design specifications (thanks @korgan00)
@@ -16,7 +20,7 @@
 - Improved shadows to better fit Material Design specs
 - Improved hover state of buttons
 - Material Checkboxes now are a single inline element `.checkbox-material`, this helps when you need to vertical align them
-- Fixed Material Design icons
+- Fixed Material Design icons (thanks @jmillspaysbills and @GradyD)
 - Fixed behavior of floating labels and inputs
 - Fixed several bugs
 - Updated Meteor packages

CONTRIBUTING.md

@@ -9,7 +9,3 @@ It already includes every needed dependency and is based on the latest version o
 ## Grunt
 
 **Grunt!** Ok... when you edit something please run `grunt` to compile CSS and copy stuff in the correct folders. Thanks!
-
-## License
-
-Please be sure to read the [license](LICENSE.md) before contributing to this project. This software is share source, this means that the author keep every rights on every edit on this source.

Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'sass'

Gruntfile.js

@@ -1,10 +1,155 @@
-module.exports = function(grunt) {
+module.exports = function (grunt) {
   "use strict";
 
   require("load-grunt-tasks")(grunt);
 
   grunt.initConfig({
 
+    htmllint: {
+      //options: {
+      //  stoponerror: false,
+      //  relaxerror: []
+      //},
+      //files: ['index.html', 'bootstrap-elements.html']
+      all: {
+        options: {
+          ignore: '“&” did not start a character reference. (“&” probably should have been escaped as “&”.)'
+        },
+        src: ["*.html"]
+      }
+    },
+
+
+    // Make sure we are structurally correct for bootstrap
+    bootlint: {
+      options: {
+        stoponerror: false,
+        relaxerror: []
+      },
+      files: ['index.html', 'bootstrap-elements.html']
+    },
+
+    // Convert from less to sass
+    lessToSass: {
+      convert: {
+        files: [{
+          expand: true,
+          cwd: "less",
+          src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less"],
+          ext: ".scss",
+          dest: "sass"
+        }],
+        options: {
+          replacements: [
+
+            // convert all shadow mixins
+            { // https://regex101.com/r/sJ2lH4/1
+              pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi,
+              replacement: "@mixin shadow-z-$1$2 {",
+              order: 2
+            },
+            // bad conversions of .shadow-z-*
+            { // https://regex101.com/r/pV0yB0/3
+              pattern: /\.shadow-z-(\d+)((?:-hover)?)(?:\(\))?;/gi,
+              replacement: "@include shadow-z-$1$2;",
+              order: 2
+            },
+
+            // bad conversions to @include instead of @extend
+            {
+              pattern: /@include (foo1|foo2)\(\);/gi,
+              replacement: "@extend .$1;",
+              order: 2
+            },
+
+            // hack - (no conditional replacements)
+            { // https://regex101.com/r/pV0yB0/2
+              pattern: /@extend @extend/gi,
+              replacement: "@extend",
+              order: 10
+            },
+
+            // button variations mixin replacement(s)
+            { // Multi-line replacement - https://regex101.com/r/qD9qB8/2
+              pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg,
+              replacement: "@include button-variations(unquote($1), $2, $3%);\n",
+              order: 20
+            },
+
+            // background-color generic-variations
+            { // Multi-line replacement - https://regex101.com/r/cW6pH8/2
+              pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg,
+              replacement: "@include bg-color-variations(unquote($1), $2, $3);\n",
+              order: 21
+            },
+
+            // bg-box-shadow generic-variations
+            { // Multi-line replacement - https://regex101.com/r/jW8kR1/1
+              pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
+              replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n",
+              order: 22
+            },
+
+            // bg-img generic-variations
+            { // Multi-line replacement - https://regex101.com/r/aP2hH2/1
+              pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-image[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
+              replacement: "@include bg-img-variations(unquote($1), $2);\n",
+              order: 23
+            },
+
+            // navbar generic-variations
+            { // Multi-line replacement - https://regex101.com/r/lX1hH1/1
+              pattern: /.generic-variations\(unquote\((".navbar")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
+              replacement: "@include navbar-variations(unquote($1), $2);\n",
+              order: 24
+            },
+
+            // material-placehorder
+            { // Multi-line replacement - https://regex101.com/r/eS2vQ3/2
+              pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg,
+              replacement: "@include material-placeholder {\n$1\n}\n",
+              order: 24
+            },
+
+            // fix calc references
+            { // https://regex101.com/r/aZ8iI5/1
+              pattern: /calc\(unquote\("([^"]+)"\)\)/gi,
+              replacement: "calc($1)",
+              order: 24
+            },
+
+            // alert generic-variations (convert this one last - very broad search)
+            { // Multi-line replacement - https://regex101.com/r/jB1uL1/1
+              pattern: /.generic-variations\(unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
+              replacement: "@include alert-variations(unquote($1), $3);\n",
+              order: 250 // very broad search, do this last
+            },
+
+            // auto generated notice
+            { // Multi-line replacement - https://regex101.com/r/aR2kT5/1
+              pattern: /([\s\S]+)/mg,
+              replacement: "\/\/ This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.\n\n$1",
+              order: 1000 // very broad search, do this last
+            },
+
+          ]
+        }
+      }
+    },
+
+    // Test compile sass
+    sass: {
+      compile: {
+        files: [{
+          expand: true,
+          cwd: "sass",
+          //src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'],
+          src: ["material.scss", "material-fullpalette.scss", "roboto.scss", "ripples.scss"],
+          dest: "dist/sassc", // added to gitignore, only used for local testing
+          ext: ".css"
+        }]
+      }
+    },
 
     // Compile less to .css
     // Compile less to .min.css
@@ -192,7 +337,7 @@ module.exports = function(grunt) {
         reporter: require("jshint-stylish")
       },
       all: [
-        "Gruntfile.js",
+        //"Gruntfile.js", regex lines are too long for desired style guide.
         "scripts/**/*.js",
         "template/**/*.js",
         "!template/**/*.min.js"
@@ -205,24 +350,34 @@ module.exports = function(grunt) {
       }
     },
     watch: {
+      html: {
+        files: ["index.html", "bootstrap-elements.html", "test.html"],
+        tasks: ["htmllint", "bootlint"]
+      },
       js: {
         files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
-        tasks: ["newer:jshint:all"]
+        tasks: ["newer:jshint:all", "material:js"]
       },
       jsTest: {
         files: ["test/**/*.js"],
         tasks: ["newer:jshint:test", "jasmine"]
       },
       less: {
-        files:["less/**/*.less"],
-        tasks: ["material:less"]
+        files: ["less/**/*.less"],
+        tasks: ["material:less"]//, "material:sass"]
       },
+      //sass: {
+      //  files: ["sass/*.scss"],
+      //  tasks: ["material:sass"]
+      //},
       livereload: {
         options: {
           livereload: "<%= connect.options.livereload %>"
         },
         files: [
           "index.html",
+          "bootstrap-elements.html",
+          "dist/js/**/*.js",
           "dist/css/**/*.css",
           "demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
         ]
@@ -249,8 +404,8 @@ module.exports = function(grunt) {
       "meteor-publish": {
         command: [
           "ALL_EXIT_CODE=0; for PACKAGE_FILE in meteor/package*.js",
-            "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
-            "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
+          "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
+          "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
           "exit $ALL_EXIT_CODE"
         ].join(";")
       }
@@ -258,13 +413,25 @@ module.exports = function(grunt) {
 
   });
 
+  grunt.loadNpmTasks("grunt-less-to-sass");
+
   grunt.registerTask("default", ["material", "ripples"]);
 
   grunt.registerTask("material", [
     "material:less",
-    "material:js"
+    "material:js",
+    "material:fonts",
+    "material:sass"
   ]);
+
+  grunt.registerTask("material:sass", [
+    "lessToSass:convert",
+    "sass:compile"
+  ]);
+
   grunt.registerTask("material:less", [
+    "htmllint",
+    "bootlint",
     "less:material",
     "less:materialfullpalette",
     "less:roboto",
@@ -279,6 +446,9 @@ module.exports = function(grunt) {
     "copy:material",
     "uglify:material"
   ]);
+  grunt.registerTask("material:fonts", [
+    "copy:fonts"
+  ]);
 
   grunt.registerTask("ripples", [
     "ripples:less",
@@ -294,7 +464,7 @@ module.exports = function(grunt) {
     "uglify:ripples"
   ]);
 
-  grunt.registerTask("build", function() {
+  grunt.registerTask("build", function () {
     grunt.task.run(["newer:jshint", "default"]);
   });
 
@@ -303,13 +473,13 @@ module.exports = function(grunt) {
     "connect:test:keepalive"
   ]);
 
-  grunt.registerTask("serve", function(target){
+  grunt.registerTask("serve", function (target) {
     var buildTarget = "material:less";
-    if(target && target === "scss") {
+    if (target && target === "scss") {
       buildTarget = "scss";
     }
     grunt.task.run([
-      "build:"+ buildTarget,
+      "build:" + buildTarget,
       "connect:livereload",
       "watch"
     ]);
@@ -320,6 +490,6 @@ module.exports = function(grunt) {
   grunt.registerTask("meteor-publish", ["exec:meteor-init", "exec:meteor-publish", "exec:meteor-cleanup"]);
   grunt.registerTask("meteor", ["exec:meteor-init", "exec:meteor-test", "exec:meteor-publish", "exec:meteor-cleanup"]);
 
-  grunt.registerTask("cibuild", ["newer:jshint", "meteor-test"]);
-
+  //grunt.registerTask("cibuild", ["newer:jshint", "meteor-test"]);
+  grunt.registerTask("cibuild", ["build"]);
 };

LICENSE.md

@@ -1,29 +1,21 @@
-Bootstrap Material Design theme
-Copyright (C) 2014+  Federico Zivolo
+The MIT License (MIT)
 
-This program is free software: you can redistribute it and/or modify
-it under the terms you can find below.
+Copyright (c) 2015, Federico Zivolo
 
-You may edit, improve and redistribute this software always under the
-terms of this license.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-You can use this software for free only for no-profit projects.
-If you'd like to use this software in a commercial project you may
-contact the author (Federico Zivolo) of the software and ask for his
-permission and fulfill his conditions.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-You can edit and/or redistribute this software only providing a copy
-of this license with it.
-
-You cannot sell this software, any change to the software must be
-published under the same license of the original software.
-
-This software may be sold if used inside a software which uses it as
-dependency, in any case, this license must be included in the
-software. This always after have fulfilled author's conditions.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-
-This license could be edited in any moment without alert.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,3 +1,5 @@
+# bootstrap-material-design
+
 [![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
 [![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
 [![Bower version](https://badge.fury.io/bo/bootstrap-material-design.svg)](https://github.com/FezVrasta/bootstrap-material-design)
@@ -29,20 +31,22 @@ If you prefer, you can include this framework in your project using our official
 Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
 You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
 
-#### material-fullpalette.css or material.css?
+### material-fullpalette.css or material.css?
 
 The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors.
 
-#### Use custom color as primary
+### Use custom color as primary
 
 Is often asked how to change the primary color of this theme without edit the bower package directly.
 
 You can do it by creating a less file in your project:
 
-    @import "../bower_components/bootstrap-material-design/less/material-wfont.less";
+```css
+@import "../bower_components/bootstrap-material-design/less/material.less";
 
-    // Override @primary color with one took from _colors.less
-    @primary: @deep-purple;
+// Override @primary color with one took from _colors.less
+@primary: @deep-purple;
+```    
 
 Then, compiling this file, the entire theme will be compiled using the color chosen by you.
 
@@ -57,10 +61,11 @@ Run the `grunt test` command for browser-based Jasmine unit tests.
 
 Run the `grunt serve` command to build and fire up an http server with live-reload and a watch for development purposes.
 
-### LESS & SASS
+## LESS & SASS
 
-Currently only LESS is maintained. The SASS version no longer has a maintainer (#256).
-The SASS files are in the source just in case someone wants to update the source from SASS and use these files as a base.
+The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
+
+The upcoming 4.x version (no branch yet) will be developed using SASS.
 
 ## Support me
 
@@ -74,44 +79,112 @@ If you like this project you may support me by donating something on Gittip, sta
 Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
 
 
-# Documentation
+## Documentation
 
-Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
+Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides 
+styles for bootstrap based markup to comply with Material Design concepts.
 
-### Variations
+### Color Variations
 
 There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more.
 They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one.
 
 Example:
 
-    <button class="btn btn-material-deep-purple">Deep purple button</button>
+```html
+<button class="btn btn-material-deep-purple">Deep purple button</button>
+```
 
 These colors are taken from the Material Design color palette and are reported below:
 
 ![palette](demo/imgs/palette.jpg)
 
-To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
+To take advantage of all the shades please use `material-fullpalette.css`, but please be aware of its huge size.
 
-### Buttons
+### Forms
+
+All inputs should be surrounded by a standard `.form-group`, and as such `material.js` will enforce this.  The `.form-group` is
+used to signal different input styles and variations.  See the examples for variations.
+
+#### Sizing
+
+In general, it is preferred that sizing be altered with either `.form-group-sm` or `.form-group-lg`.  Due to the interconnected
+nature of inputs, labels, margins and padding, `material.js` will convert any use of `.input-sm` or `.input-lg` to 
+`.form-group-sm` or `.form-group-lg` in order to reduce the necessary markup/variations and get a standard sizing with
+fewer side effects.
+
+#### Buttons
 
 Add `.btn-flat` to a button to make it flat, without shadows.
 Add `.btn-raised` to a button to add a permanent shadow to it.
 
-### Inputs
+#### Inputs
 
-Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
+##### Labels
 
-Add `data-hint="some hint"` to show an hint under the input when the user focus it.
+The following classes should be placed on the `.form-group` to indicate the label style:
 
-Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
+- `.label-floating` - renders label as a placeholder, that animates above the field upon focus
+- `.label-static` - renders label above the field. `input placeholder` attribute can also be used in conjunction
+- `.label-placeholder` - renders a label as a placeholder only 
+- no label, but use of `input placeholder` attribute - same rendering as `.label-placeholder`
 
-    <div class="radio/checkbox radio-primary">
-        <label>
-            <input type="radio/checkbox" checked>
-            Option one is this
-        </label>
+##### Hints
+
+Upon focus, a hint can be displayed.  Use any `p | span` with `.help-block`.
+
+
+##### Examples
+
+```html
+  <div class="form-group label-static">
+    <label for="i2" class="control-label">label-static</label>
+    <input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
+    <p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
+  </div>
+
+  <div class="form-group label-floating">
+    <label for="i5" class="control-label">label-floating</label>
+    <input type="email" class="form-control" id="i5">
+    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
+  </div>
+
+  <div class="form-group label-placeholder">
+    <label for="i5p" class="control-label">label-placeholder</label>
+    <input type="email" class="form-control" id="i5p">
+    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
+  </div>
+```
+
+
+#### Radio, Checkbox, Toggle
+
+Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
+
+Radio example:
+
+```html
+<div class="form-group">
+  <label class="col-lg-2 control-label">Radios</label>
+
+  <div class="col-lg-10">
+    <div class="radio radio-primary">
+      <label>
+        <input type="radio" name="optionsRadios" checked="">
+        Option one
+      </label>
     </div>
+    <div class="radio radio-primary">
+      <label>
+        <input type="radio" name="optionsRadios">
+        Option two
+      </label>
+    </div>
+  </div>
+</div>
+```      
+        
+        
 
 ### Icons
 
@@ -123,7 +196,57 @@ Variations are available for every icon, including the original Bootstrap icons.
 
 The syntax to add a Material icon is:
 
-     <i class="icon icon-material-favorite"></i>
+```html
+<i class="icon icon-material-favorite"></i>
+```
+
+### Cards 
+
+A card will expand to fill all of the available width (e.g. column's width). Card's height will be automatically resized to match width.
+
+Here is an example on how to use it:
+
+```html
+<div class="card">
+
+    <div class="card-height-indicator"></div>
+
+    <div class="card-content">
+
+        <div class="card-image">
+            <img src="./image.jpg" alt="Loading image...">
+            <h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
+        </div>
+
+        <div class="card-body">
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+        </div>
+
+        <footer class="card-footer">
+            <button class="btn btn-flat">Share</button>
+            <button class="btn btn-flat btn-warning">Learn More</button>
+        </footer>
+
+    </div>
+
+</div>
+```    
+    
+Cards will adapt to column's width. The card below will have width equal to col-lg-6:
+
+```html
+<div class="row">
+    <div class="col-lg-3"></div>
+
+    <div class="col-lg-6">
+        <div class="card">
+            ...
+        </div>
+    </div>
+
+    <div class="col-lg-3"></div>
+</div>
+```
 
 ## Material.js
 
@@ -145,12 +268,14 @@ The functions that allows an optional selector are `$.material.ripples`, `$.mate
 
 You can even override the default values using the `$.material.options` function. The default values are:
 
-    $.material.options = {
-        "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
-        "inputElements": "input.form-control, textarea.form-control, select.form-control",
-        "checkboxElements": ".checkbox > label > input[type=checkbox]",
-        "radioElements": ".radio > label > input[type=radio]"
-    }
+```javascript
+$.material.options = {
+    "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
+    "inputElements": "input.form-control, textarea.form-control, select.form-control",
+    "checkboxElements": ".checkbox > label > input[type=checkbox]",
+    "radioElements": ".radio > label > input[type=radio]"
+}
+```    
 
 ### Arrive.js support
 
@@ -171,7 +296,9 @@ At the moment RipplesJS does not have its own repository but it will probably ha
 
 You may want to set a custom color to the ripples of a specific element, to do so write:
 
-    <button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
+```html
+<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
+```
 
 ### noUiSlider
 
@@ -188,6 +315,11 @@ Read more about [Dropdown.js here](https://github.com/FezVrasta/dropdown.js).
 Transform select and multi-select inputs into advanced text inputs. Material Design for BS provides a full replacement of the plugin's CSS, so don't include it.
 Read more about [selectize.js](http://brianreavis.github.io/selectize.js/).
 
+### Bootstrap Material Datepicker
+
+A Material Design datepicker created to be used with Material Design for Bootstrap.  
+Read more about [Bootstrap Material Datepicker](https://github.com/T00rk/bootstrap-material-datepicker)
+
 ## Compatibility
 
 Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but they may work.

bower.json

@@ -1,6 +1,5 @@
 {
   "name": "bootstrap-material-design",
-  "version": "0.3.0",
   "homepage": "http://fezvrasta.github.io/bootstrap-material-design",
   "authors": [
     "Federico Zivolo <info@mywebexpression.com>"
@@ -43,6 +42,7 @@
   ],
   "license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md",
   "dependencies": {
-    "jquery": "~2.1.1"
+    "jquery": "~2.1.1",
+    "bootstrap": "~3.3.5"
   }
 }

custom-color-palette.sh

@@ -0,0 +1,102 @@
+#!/bin/bash
+# This script automates color customization bootstrap material design
+# This script use "lessc", install first:
+# npm install -g less
+
+# author: @arturu
+# author name: Pietro Arturo Panetta
+# email: arturu@arturu.it
+# license GLP3 
+
+# This program is free software: you can redistribute it and/or modify it under 
+# the terms of the GNU General Public License as published by the Free Software 
+# Foundation, either version 3 of the License, or (at your option) any later 
+# version.
+
+# This program is distributed in the hope that it will be useful, but WITHOUT 
+# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+# FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+# You should have received a copy of the GNU General Public License along with 
+# this program. If not, see http://www.gnu.org/licenses/gpl-3.0.html.
+
+color=$1
+tempFile="custom-color-palette.less"
+pathOut="dist/custom"
+
+# script settings
+text_color_red="\e[0;31m"
+text_color_green="\e[0;32m"
+text_color_blue="\e[0;34m"
+text_bold=`tput bold`
+text_reset=`tput sgr0`
+text_tag_error=$(echo -e ${text_color_red}${text_bold}[Error]${text_reset})
+text_tag_success=$(echo -e ${text_color_green}${text_bold}[Success]${text_reset})
+# end script settings
+
+# check param
+if [[ $color == "" ]]
+ then
+  echo -e "$text_tag_error missing param. Use:
+   ./custom-color-palette.sh <color>
+   ${text_color_green}./custom-color-palette.sd deep-purple${text_reset}
+   for color follow: http://www.google.com/design/spec/style/color.html#color-color-palette
+   Run the script in the root of material design packange"
+  exit
+fi
+
+# check if they are in the root of material design packange
+if [ ! -f 'bower.json' ]
+ then
+  echo -e "$text_tag_error Run the script in the root of material design packange. Exit."
+  exit
+fi
+
+# read line packange name
+linePackName=$(sed -n '2p' 'bower.json' | awk '{split($0,array,":")} END{print array[2]}' | sed -r 's/[", ]+//g')
+
+if [[ $linePackName != 'bootstrap-material-design' ]]
+ then
+  echo -e "$text_tag_error It is not the right package. Exit."
+  exit
+fi
+
+# generate $tempFile
+echo "@import \"less/material.less\";
+
+// Override @primary color with one took from _colors.less
+// http://www.google.com/design/spec/style/color.html#color-color-palette
+
+@primary: @$color;
+" > $tempFile
+
+# check $tempFile
+if [ ! -f $tempFile ]
+ then
+  echo -e "$text_tag_error $tempFile not writed. Exit."
+  exit
+fi
+
+echo -e "$text_color_green Compiling material design... $text_reset"
+
+# check $pathOut
+if [ ! -d $pathOut ]
+ then
+  mkdir $pathOut
+fi
+
+# compiling
+lessc -x $tempFile > $pathOut/$color.css
+
+# check file $color.css
+if [ ! -f $pathOut/$color.css ]
+ then
+  echo -e "$text_tag_error ${text_color_blue}$pathOut/$color.css${text_reset} not writed"
+  exit
+fi
+
+# remove temp file
+yes | rm $tempFile
+
+#end message
+echo -e "$text_tag_success Use ${text_color_blue}$pathOut/$color.css${text_reset} instead of dist/css/material.css"

dist/css/roboto.css

@@ -1,25 +1,62 @@
+/*
+
+To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
+
+Then, run this script to get the list.
+
+
+(function() {
+  var colors = {}, main = {};
+  $(".color-group").each(function() {
+    var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
+    colors[color] = {};
+
+    $(this).find(".color").not(".main-color").each(function() {
+      var shade = $(this).find(".shade").text().trim(),
+          hex   = $(this).find(".hex").text().trim();
+
+      colors[color][shade] = hex;
+    });
+    main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
+
+  });
+  var LESS = "";
+  $.each(colors, function(name, shades) {
+    LESS += "\n\n";
+    $.each(shades, function(shade, hex) {
+      LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
+    });
+    if (main[name]) {
+      LESS += "@" + name + ": " + main[name] + ";\n";
+    }
+  });
+  console.log(LESS);
+})();
+
+
+*/
 @font-face {
   font-family: 'RobotoDraft';
   font-style: normal;
   font-weight: 400;
-  src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(../fonts/RobotoDraftRegular.woff2) format('woff2'), url(../fonts/RobotoDraftRegular.woff) format('woff');
+  src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url('../fonts/RobotoDraftRegular.woff2') format('woff2'), url('../fonts/RobotoDraftRegular.woff') format('woff');
 }
 @font-face {
   font-family: 'RobotoDraft';
   font-style: normal;
   font-weight: 500;
-  src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(../fonts/RobotoDraftMedium.woff2) format('woff2'), url(../fonts/RobotoDraftMedium.woff) format('woff');
+  src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url('../fonts/RobotoDraftMedium.woff2') format('woff2'), url('../fonts/RobotoDraftMedium.woff') format('woff');
 }
 @font-face {
   font-family: 'RobotoDraft';
   font-style: normal;
   font-weight: 700;
-  src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(../fonts/RobotoDraftBold.woff2) format('woff2'), url(../fonts/RobotoDraftBold.woff) format('woff');
+  src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url('../fonts/RobotoDraftBold.woff2') format('woff2'), url('../fonts/RobotoDraftBold.woff') format('woff');
 }
 @font-face {
   font-family: 'RobotoDraft';
   font-style: italic;
   font-weight: 400;
-  src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(../fonts/RobotoDraftItalic.woff2) format('woff2'), url(../fonts/RobotoDraftItalic.woff) format('woff');
+  src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url('../fonts/RobotoDraftItalic.woff2') format('woff2'), url('../fonts/RobotoDraftItalic.woff') format('woff');
 }
 /*# sourceMappingURL=roboto.css.map */

dist/css/roboto.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["/less/roboto.less"],"names":[],"mappings":"AAAA,WACE,wBAIA,CAAA,yLAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,4LAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,kLAAA,CAAA,UAQA,wBACA,CAAA,iBAGA,CAAA,4LAAA,CAAA","file":"roboto.min.css","sourcesContent":["@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 400;\n  //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n  src: local('RobotoDraft'),\n       local('RobotoDraft-Regular'),\n       local('Roboto-Regular'),\n       url(../fonts/RobotoDraftRegular.woff2) format('woff2'),\n       url(../fonts/RobotoDraftRegular.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 500;\n  //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n  src: local('RobotoDraft Medium'),\n       local('RobotoDraft-Medium'),\n       local('Roboto-Medium'),\n       url(../fonts/RobotoDraftMedium.woff2) format('woff2'),\n       url(../fonts/RobotoDraftMedium.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 700;\n  //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'),  local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n  src: local('RobotoDraft Bold'),\n       local('RobotoDraft-Bold'),\n       local('Roboto-Bold'),\n       url(../fonts/RobotoDraftBold.woff2) format('woff2'),\n       url(../fonts/RobotoDraftBold.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: italic;\n  font-weight: 400;\n  //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n  src: local('RobotoDraft Italic'),\n       local('RobotoDraft-Italic'),\n       local('Roboto-Italic'),\n       url(../fonts/RobotoDraftItalic.woff2) format('woff2'),\n       url(../fonts/RobotoDraftItalic.woff) format('woff');\n}\n"]}
+{"version":3,"sources":["/less/roboto.less"],"names":[],"mappings":"AAGA,WACE,wBAIA,CAAA,yLAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,4LAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,kLAAA,CAAA,UAQA,wBACA,CAAA,iBAGA,CAAA,4LAAA,CAAA","file":"roboto.min.css","sourcesContent":["@import \"_colors.less\";\n@import \"_variables.less\";\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 400;\n  //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n  src: local('RobotoDraft'),\n       local('RobotoDraft-Regular'),\n       local('Roboto-Regular'),\n       url('@{material-font-path}/RobotoDraftRegular.woff2') format('woff2'),\n       url('@{material-font-path}/RobotoDraftRegular.woff') format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 500;\n  //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n  src: local('RobotoDraft Medium'),\n       local('RobotoDraft-Medium'),\n       local('Roboto-Medium'),\n       url('@{material-font-path}/RobotoDraftMedium.woff2') format('woff2'),\n       url('@{material-font-path}/RobotoDraftMedium.woff') format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 700;\n  //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'),  local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n  src: local('RobotoDraft Bold'),\n       local('RobotoDraft-Bold'),\n       local('Roboto-Bold'),\n       url('@{material-font-path}/RobotoDraftBold.woff2') format('woff2'),\n       url('@{material-font-path}/RobotoDraftBold.woff') format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: italic;\n  font-weight: 400;\n  //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n  src: local('RobotoDraft Italic'),\n       local('RobotoDraft-Italic'),\n       local('Roboto-Italic'),\n       url('@{material-font-path}/RobotoDraftItalic.woff2') format('woff2'),\n       url('@{material-font-path}/RobotoDraftItalic.woff') format('woff');\n}\n"]}

dist/js/material.js

@@ -36,7 +36,8 @@
         ".navbar a:not(.withoutripple)",
         ".dropdown-menu a",
         ".nav-tabs a:not(.withoutripple)",
-        ".withripple"
+        ".withripple",
+        ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
       ].join(","),
       "inputElements": "input.form-control, textarea.form-control, select.form-control",
       "checkboxElements": ".checkbox > label > input[type=checkbox]",
@@ -69,84 +70,142 @@
       .filter(":notmdproc")
       .data("mdproc", true)
       .each( function() {
-        var $this = $(this);
+        var $input = $(this);
 
-        if (!$(this).attr("data-hint") && !$this.hasClass("floating-label")) {
-          return;
-        }
-        $this.wrap("<div class=form-control-wrapper></div>");
-        $this.after("<span class=material-input></span>");
-
-        // Add floating label if required
-        if ($this.hasClass("floating-label")) {
-          var placeholder = $this.attr("placeholder");
-          $this.attr("placeholder", null).removeClass("floating-label");
-          $this.after("<div class=floating-label>" + placeholder + "</div>");
+        // Requires form-group standard markup (will add it if necessary)
+        var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+        if($formGroup.length === 0){
+          $input.wrap("<div class='form-group'></div>");
+          $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
         }
 
-        // Add hint label if required
-        if ($this.attr("data-hint")) {
-          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
+        if ($input.attr("data-hint")) {
+          $input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
+          $input.removeAttr("data-hint");
+        }
+
+        // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
+        var legacySizes = {
+          "input-lg": "form-group-lg",
+          "input-sm": "form-group-sm"
+        };
+        $.each( legacySizes, function( legacySize, standardSize ) {
+          if ($input.hasClass(legacySize)) {
+            $input.removeClass(legacySize);
+            $formGroup.addClass(standardSize);
+          }
+        });
+
+        // Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
+        if ($input.hasClass("floating-label")) {
+          var placeholder = $input.attr("placeholder");
+          $input.attr("placeholder", null).removeClass("floating-label");
+          var id = $input.attr("id");
+          var forAttribute = "";
+          if(id) {
+            forAttribute = "for='" + id + "'";
+          }
+          $formGroup.addClass("label-floating");
+          $input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
         }
 
         // Set as empty if is empty (damn I must improve this...)
-        if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
-          $this.addClass("empty");
+        if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
+          $formGroup.addClass("is-empty");
         }
 
+          // Add at the end of the form-group
+        $formGroup.append("<span class='material-input'></span>");
+
         // Support for file input
-        if ($this.parent().next().is("[type=file]")) {
-          $this.parent().addClass("fileinput");
-          var $input = $this.parent().next().detach();
-          $this.after($input);
+        if ($formGroup.find("input[type=file]").length > 0) {
+          $formGroup.addClass("is-fileinput");
         }
       });
-
+    },
+    "attachInputEventHandlers": function() {
       $(document)
       .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
       .on("keydown paste", ".form-control", function(e) {
         if(_isChar(e)) {
-          $(this).removeClass("empty");
+          $(this).closest(".form-group").removeClass("is-empty");
         }
       })
       .on("keyup change", ".form-control", function() {
-        var $this = $(this);
-        if ($this.val() === "" && (typeof $this[0].checkValidity != "undefined" && $this[0].checkValidity())) {
-          $this.addClass("empty");
-        } else {
-          $this.removeClass("empty");
+        var $input = $(this);
+        var $formGroup = $input.closest(".form-group");
+        var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
+
+        if ($input.val() === "" && isValid) {
+          $formGroup.addClass("is-empty");
+        }
+        else {
+          $formGroup.removeClass("is-empty");
+        }
+
+        // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
+        //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
+        //  the form-group on change.
+        //
+        // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
+        //        BUT, I've left it here for backwards compatibility.
+        if(isValid){
+          $formGroup.removeClass("has-error");
+        }
+        else{
+          $formGroup.addClass("has-error");
         }
       })
-      .on("focus", ".form-control-wrapper.fileinput", function() {
-        $(this).find("input").addClass("focus");
+      .on("focus", ".form-control, .form-group.is-fileinput", function() {
+        $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
       })
-      .on("blur", ".form-control-wrapper.fileinput", function() {
-        $(this).find("input").removeClass("focus");
+      .on("blur", ".form-control, .form-group.is-fileinput", function() {
+        $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
       })
-      .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+      // make sure empty is added back when there is a programmatic value change.
+      //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
+      .on("change", ".form-group input", function() {
+        var $input = $(this);
+        if($input.attr("type") == "file") {
+          return;
+        }
+
+        var $formGroup = $input.closest(".form-group");
+        var value = $input.val();
+        if (value) {
+          $formGroup.removeClass("is-empty");
+        } else {
+          $formGroup.addClass("is-empty");
+        }
+      })
+      // set the fileinput readonly field with the name of the file
+      .on("change", ".form-group.is-fileinput input[type='file']", function() {
+        var $input = $(this);
+        var $formGroup = $input.closest(".form-group");
         var value = "";
-        $.each($(this)[0].files, function(i, file) {
+        $.each(this.files, function(i, file) {
           value += file.name + ", ";
         });
         value = value.substring(0, value.length - 2);
         if (value) {
-          $(this).prev().removeClass("empty");
+          $formGroup.removeClass("is-empty");
         } else {
-          $(this).prev().addClass("empty");
+          $formGroup.addClass("is-empty");
         }
-        $(this).prev().val(value);
+        $formGroup.find("input.form-control[readonly]").val(value);
       });
     },
     "ripples": function(selector) {
       $((selector) ? selector : this.options.withRipples).ripples();
     },
     "autofill": function() {
-
       // This part of code will detect autofill when the page is loading (username and password inputs for example)
       var loading = setInterval(function() {
         $("input[type!=checkbox]").each(function() {
-          if ($(this).val() && $(this).val() !== $(this).attr("value")) {
-            $(this).trigger("change");
+          var $this = $(this);
+          if ($this.val() && $this.val() !== $this.attr("value")) {
+            $this.trigger("change");
           }
         });
       }, 100);
@@ -155,29 +214,35 @@
       setTimeout(function() {
         clearInterval(loading);
       }, 10000);
-      // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
+    },
+    "attachAutofillEventHandlers": function() {
+      // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
       var focused;
       $(document)
       .on("focus", "input", function() {
         var $inputs = $(this).parents("form").find("input").not("[type=file]");
         focused = setInterval(function() {
           $inputs.each(function() {
-            if ($(this).val() !== $(this).attr("value")) {
-              $(this).trigger("change");
+            var $this = $(this);
+            if ($this.val() !== $this.attr("value")) {
+              $this.trigger("change");
             }
           });
         }, 100);
       })
-      .on("blur", "input", function() {
+      .on("blur", ".form-group input", function() {
         clearInterval(focused);
       });
     },
     "init": function() {
+      var $document = $(document);
+
       if ($.fn.ripples && this.options.ripples) {
         this.ripples();
       }
       if (this.options.input) {
         this.input();
+        this.attachInputEventHandlers();
       }
       if (this.options.checkbox) {
         this.checkbox();
@@ -190,31 +255,32 @@
       }
       if (this.options.autofill) {
         this.autofill();
+        this.attachAutofillEventHandlers();
       }
 
       if (document.arrive && this.options.arrive) {
         if ($.fn.ripples && this.options.ripples) {
-          $(document).arrive(this.options.withRipples, function() {
+          $document.arrive(this.options.withRipples, function() {
             $.material.ripples($(this));
           });
         }
         if (this.options.input) {
-          $(document).arrive(this.options.inputElements, function() {
+          $document.arrive(this.options.inputElements, function() {
             $.material.input($(this));
           });
         }
         if (this.options.checkbox) {
-          $(document).arrive(this.options.checkboxElements, function() {
+          $document.arrive(this.options.checkboxElements, function() {
             $.material.checkbox($(this));
           });
         }
         if (this.options.radio) {
-          $(document).arrive(this.options.radioElements, function() {
+          $document.arrive(this.options.radioElements, function() {
             $.material.radio($(this));
           });
         }
         if (this.options.togglebutton) {
-          $(document).arrive(this.options.togglebuttonElements, function() {
+          $document.arrive(this.options.togglebuttonElements, function() {
             $.material.togglebutton($(this));
           });
         }

dist/js/material.min.js

@@ -1,2 +1,2 @@
-!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(a(this).attr("data-hint")||b.hasClass("floating-label")){if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
+!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.closest(".form-group");0===c.length&&(b.wrap("<div class='form-group'></div>"),c=b.closest(".form-group")),b.attr("data-hint")&&(b.after("<p class='help-block'>"+b.attr("data-hint")+"</p>"),b.removeAttr("data-hint"));var d={"input-lg":"form-group-lg","input-sm":"form-group-sm"};if(a.each(d,function(a,d){b.hasClass(a)&&(b.removeClass(a),c.addClass(d))}),b.hasClass("floating-label")){var e=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var f=b.attr("id"),g="";f&&(g="for='"+f+"'"),c.addClass("label-floating"),b.after("<label "+g+"class='control-label'>"+e+"</label>")}(null===b.val()||"undefined"==b.val()||""===b.val())&&c.addClass("is-empty"),c.append("<span class='material-input'></span>"),c.find("input[type=file]").length>0&&c.addClass("is-fileinput")})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).closest(".form-group").removeClass("is-empty")}).on("keyup change",".form-control",function(){var b=a(this),c=b.closest(".form-group"),d="undefined"==typeof b[0].checkValidity||b[0].checkValidity();""===b.val()&&d?c.addClass("is-empty"):c.removeClass("is-empty"),d?c.removeClass("has-error"):c.addClass("has-error")}).on("focus",".form-control, .form-group.is-fileinput",function(){a(this).closest(".form-group").addClass("is-focused")}).on("blur",".form-control, .form-group.is-fileinput",function(){a(this).closest(".form-group").removeClass("is-focused")}).on("change",".form-group input",function(){var b=a(this);if("file"!=b.attr("type")){var c=b.closest(".form-group"),d=b.val();d?c.removeClass("is-empty"):c.addClass("is-empty")}}).on("change",".form-group.is-fileinput input[type='file']",function(){var b=a(this),c=b.closest(".form-group"),d="";a.each(this.files,function(a,b){d+=b.name+", "}),d=d.substring(0,d.length-2),d?c.removeClass("is-empty"):c.addClass("is-empty"),c.find("input.form-control[readonly]").val(d)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
 //# sourceMappingURL=material.min.js.map

dist/js/material.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAA2B,GAAbD,EAAIC,OAEvE,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SAEEC,OAAS,EACTC,SAAW,EACXC,UAAY,EACZC,cAAgB,EAChBC,OAAS,EACTC,QAAU,EACVC,UAAY,EAEZC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,eACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBV,SAAY,SAASW,GAEnB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQW,kBACtCK,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,mEAETb,aAAgB,SAASU,GAEvB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQY,sBACtCI,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,+BAETZ,MAAS,SAASS,GAEhB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQa,eACtCG,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,wDAEThB,MAAS,SAASa,GAChB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQU,eACtCM,OAAO,cACPlB,KAAK,UAAU,GACfoB,KAAM,WACL,GAAIC,GAAQ/B,EAAE2B,KAEd,IAAK3B,EAAE2B,MAAMK,KAAK,cAAiBD,EAAME,SAAS,kBAAlD,CAOA,GAJAF,EAAMG,KAAK,0CACXH,EAAMF,MAAM,sCAGRE,EAAME,SAAS,kBAAmB,CACpC,GAAIE,GAAcJ,EAAMC,KAAK,cAC7BD,GAAMC,KAAK,cAAe,MAAMI,YAAY,kBAC5CL,EAAMF,MAAM,6BAA+BM,EAAc,UAc3D,GAVIJ,EAAMC,KAAK,cACbD,EAAMF,MAAM,mBAAqBE,EAAMC,KAAK,aAAe,WAIzC,OAAhBD,EAAMM,OAAiC,aAAfN,EAAMM,OAAwC,KAAhBN,EAAMM,QAC9DN,EAAMO,SAAS,SAIbP,EAAMQ,SAASC,OAAOC,GAAG,eAAgB,CAC3CV,EAAMQ,SAASD,SAAS,YACxB,IAAII,GAASX,EAAMQ,SAASC,OAAOG,QACnCZ,GAAMF,MAAMa,OAIhB1C,EAAE4C,UACDC,GAAG,SAAU,iCAAkC,WAAa7C,EAAE2B,MAAMmB,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1C9C,EAAQ8C,IACT/C,EAAE2B,MAAMS,YAAY,WAGvBS,GAAG,eAAgB,gBAAiB,WACnC,GAAId,GAAQ/B,EAAE2B,KACM,MAAhBI,EAAMM,OAAkD,mBAA1BN,GAAM,GAAGiB,eAAgCjB,EAAM,GAAGiB,gBAClFjB,EAAMO,SAAS,SAEfP,EAAMK,YAAY,WAGrBS,GAAG,QAAS,kCAAmC,WAC9C7C,EAAE2B,MAAMsB,KAAK,SAASX,SAAS,WAEhCO,GAAG,OAAQ,kCAAmC,WAC7C7C,EAAE2B,MAAMsB,KAAK,SAASb,YAAY,WAEnCS,GAAG,SAAU,8CAA+C,WAC3D,GAAIK,GAAQ,EACZlD,GAAE8B,KAAK9B,EAAE2B,MAAM,GAAGwB,MAAO,SAASC,EAAGC,GACnCH,GAASG,EAAKC,KAAO,OAEvBJ,EAAQA,EAAMK,UAAU,EAAGL,EAAMM,OAAS,GACtCN,EACFlD,EAAE2B,MAAM8B,OAAOrB,YAAY,SAE3BpC,EAAE2B,MAAM8B,OAAOnB,SAAS,SAE1BtC,EAAE2B,MAAM8B,OAAOpB,IAAIa,MAGvBpC,QAAW,SAASY,GAClB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQQ,aAAaN,WAEtDK,SAAY,WAGV,GAAIuC,GAAUC,YAAY,WACxB3D,EAAE,yBAAyB8B,KAAK,WAC1B9B,EAAE2B,MAAMU,OAASrC,EAAE2B,MAAMU,QAAUrC,EAAE2B,MAAMK,KAAK,UAClDhC,EAAE2B,MAAMiC,QAAQ,aAGnB,IAGHC,YAAW,WACTC,cAAcJ,IACb,IAEH,IAAIK,EACJ/D,GAAE4C,UACDC,GAAG,QAAS,QAAS,WACpB,GAAImB,GAAUhE,EAAE2B,MAAMsC,QAAQ,QAAQhB,KAAK,SAASiB,IAAI,cACxDH,GAAUJ,YAAY,WACpBK,EAAQlC,KAAK,WACP9B,EAAE2B,MAAMU,QAAUrC,EAAE2B,MAAMK,KAAK,UACjChC,EAAE2B,MAAMiC,QAAQ,aAGnB,OAEJf,GAAG,OAAQ,QAAS,WACnBiB,cAAcC,MAGlBI,KAAQ,WACFnE,EAAEoE,GAAGtD,SAAWa,KAAKf,QAAQE,SAC/Ba,KAAKb,UAEHa,KAAKf,QAAQC,OACfc,KAAKd,QAEHc,KAAKf,QAAQG,UACfY,KAAKZ,WAEHY,KAAKf,QAAQI,cACfW,KAAKX,eAEHW,KAAKf,QAAQK,OACfU,KAAKV,QAEHU,KAAKf,QAAQO,UACfQ,KAAKR,WAGHyB,SAAS1B,QAAUS,KAAKf,QAAQM,SAC9BlB,EAAEoE,GAAGtD,SAAWa,KAAKf,QAAQE,SAC/Bd,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQQ,YAAa,WAC3CpB,EAAEW,SAASG,QAAQd,EAAE2B,SAGrBA,KAAKf,QAAQC,OACfb,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQU,cAAe,WAC7CtB,EAAEW,SAASE,MAAMb,EAAE2B,SAGnBA,KAAKf,QAAQG,UACff,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQW,iBAAkB,WAChDvB,EAAEW,SAASI,SAASf,EAAE2B,SAGtBA,KAAKf,QAAQK,OACfjB,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQa,cAAe,WAC7CzB,EAAEW,SAASM,MAAMjB,EAAE2B,SAGnBA,KAAKf,QAAQI,cACfhB,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQY,qBAAsB,WACpDxB,EAAEW,SAASK,aAAahB,EAAE2B,aAQnC0C"}
+{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","closest","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","removeClass","addClass","placeholder","id","forAttribute","val","append","find","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAA2B,GAAbD,EAAIC,OAEvE,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SAEEC,OAAS,EACTC,SAAW,EACXC,UAAY,EACZC,cAAgB,EAChBC,OAAS,EACTC,QAAU,EACVC,UAAY,EAEZC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,cACA,oEACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBV,SAAY,SAASW,GAEnB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQW,kBACtCK,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,mEAETb,aAAgB,SAASU,GAEvB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQY,sBACtCI,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,+BAETZ,MAAS,SAASS,GAEhB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQa,eACtCG,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,wDAEThB,MAAS,SAASa,GAChB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQU,eACtCM,OAAO,cACPlB,KAAK,UAAU,GACfoB,KAAM,WACL,GAAIC,GAAS/B,EAAE2B,MAGXK,EAAaD,EAAOE,QAAQ,cACP,KAAtBD,EAAWE,SACZH,EAAOI,KAAK,kCACZH,EAAaD,EAAOE,QAAQ,gBAI1BF,EAAOK,KAAK,eACdL,EAAOF,MAAM,yBAA2BE,EAAOK,KAAK,aAAe,QACnEL,EAAOM,WAAW,aAIpB,IAAIC,IACFC,WAAY,gBACZC,WAAY,gBAUd,IARAxC,EAAE8B,KAAMQ,EAAa,SAAUG,EAAYC,GACrCX,EAAOY,SAASF,KAClBV,EAAOa,YAAYH,GACnBT,EAAWa,SAASH,MAKpBX,EAAOY,SAAS,kBAAmB,CACrC,GAAIG,GAAcf,EAAOK,KAAK,cAC9BL,GAAOK,KAAK,cAAe,MAAMQ,YAAY,iBAC7C,IAAIG,GAAKhB,EAAOK,KAAK,MACjBY,EAAe,EAChBD,KACDC,EAAe,QAAUD,EAAK,KAEhCf,EAAWa,SAAS,kBACpBd,EAAOF,MAAM,UAAYmB,EAAe,yBAA2BF,EAAc,aAI9D,OAAjBf,EAAOkB,OAAkC,aAAhBlB,EAAOkB,OAAyC,KAAjBlB,EAAOkB,QACjEjB,EAAWa,SAAS,YAItBb,EAAWkB,OAAO,wCAGdlB,EAAWmB,KAAK,oBAAoBjB,OAAS,GAC/CF,EAAWa,SAAS,mBAI1BO,yBAA4B,WAC1BpD,EAAEqD,UACDC,GAAG,SAAU,iCAAkC,WAAatD,EAAE2B,MAAM4B,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1CvD,EAAQuD,IACTxD,EAAE2B,MAAMM,QAAQ,eAAeW,YAAY,cAG9CU,GAAG,eAAgB,gBAAiB,WACnC,GAAIvB,GAAS/B,EAAE2B,MACXK,EAAaD,EAAOE,QAAQ,eAC5BwB,EAA8C,mBAA5B1B,GAAO,GAAG2B,eAAiC3B,EAAO,GAAG2B,eAEtD,MAAjB3B,EAAOkB,OAAgBQ,EACzBzB,EAAWa,SAAS,YAGpBb,EAAWY,YAAY,YAStBa,EACDzB,EAAWY,YAAY,aAGvBZ,EAAWa,SAAS,eAGvBS,GAAG,QAAS,0CAA2C,WACtDtD,EAAE2B,MAAMM,QAAQ,eAAeY,SAAS,gBAEzCS,GAAG,OAAQ,0CAA2C,WACrDtD,EAAE2B,MAAMM,QAAQ,eAAeW,YAAY,gBAI5CU,GAAG,SAAU,oBAAqB,WACjC,GAAIvB,GAAS/B,EAAE2B,KACf,IAA0B,QAAvBI,EAAOK,KAAK,QAAf,CAIA,GAAIJ,GAAaD,EAAOE,QAAQ,eAC5B0B,EAAQ5B,EAAOkB,KACfU,GACF3B,EAAWY,YAAY,YAEvBZ,EAAWa,SAAS,eAIvBS,GAAG,SAAU,8CAA+C,WAC3D,GAAIvB,GAAS/B,EAAE2B,MACXK,EAAaD,EAAOE,QAAQ,eAC5B0B,EAAQ,EACZ3D,GAAE8B,KAAKH,KAAKiC,MAAO,SAASC,EAAGC,GAC7BH,GAASG,EAAKC,KAAO,OAEvBJ,EAAQA,EAAMK,UAAU,EAAGL,EAAMzB,OAAS,GACtCyB,EACF3B,EAAWY,YAAY,YAEvBZ,EAAWa,SAAS,YAEtBb,EAAWmB,KAAK,gCAAgCF,IAAIU,MAGxD7C,QAAW,SAASY,GAClB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQQ,aAAaN,WAEtDK,SAAY,WAEV,GAAI8C,GAAUC,YAAY,WACxBlE,EAAE,yBAAyB8B,KAAK,WAC9B,GAAIqC,GAAQnE,EAAE2B,KACVwC,GAAMlB,OAASkB,EAAMlB,QAAUkB,EAAM/B,KAAK,UAC5C+B,EAAMC,QAAQ,aAGjB,IAGHC,YAAW,WACTC,cAAcL,IACb,MAELM,4BAA+B,WAE7B,GAAIC,EACJxE,GAAEqD,UACDC,GAAG,QAAS,QAAS,WACpB,GAAImB,GAAUzE,EAAE2B,MAAM+C,QAAQ,QAAQvB,KAAK,SAASwB,IAAI,cACxDH,GAAUN,YAAY,WACpBO,EAAQ3C,KAAK,WACX,GAAIqC,GAAQnE,EAAE2B,KACVwC,GAAMlB,QAAUkB,EAAM/B,KAAK,UAC7B+B,EAAMC,QAAQ,aAGjB,OAEJd,GAAG,OAAQ,oBAAqB,WAC/BgB,cAAcE,MAGlBI,KAAQ,WACN,GAAIC,GAAY7E,EAAEqD,SAEdrD,GAAE8E,GAAGhE,SAAWa,KAAKf,QAAQE,SAC/Ba,KAAKb,UAEHa,KAAKf,QAAQC,QACfc,KAAKd,QACLc,KAAKyB,4BAEHzB,KAAKf,QAAQG,UACfY,KAAKZ,WAEHY,KAAKf,QAAQI,cACfW,KAAKX,eAEHW,KAAKf,QAAQK,OACfU,KAAKV,QAEHU,KAAKf,QAAQO,WACfQ,KAAKR,WACLQ,KAAK4C,+BAGHlB,SAASnC,QAAUS,KAAKf,QAAQM,SAC9BlB,EAAE8E,GAAGhE,SAAWa,KAAKf,QAAQE,SAC/B+D,EAAU3D,OAAOS,KAAKf,QAAQQ,YAAa,WACzCpB,EAAEW,SAASG,QAAQd,EAAE2B,SAGrBA,KAAKf,QAAQC,OACfgE,EAAU3D,OAAOS,KAAKf,QAAQU,cAAe,WAC3CtB,EAAEW,SAASE,MAAMb,EAAE2B,SAGnBA,KAAKf,QAAQG,UACf8D,EAAU3D,OAAOS,KAAKf,QAAQW,iBAAkB,WAC9CvB,EAAEW,SAASI,SAASf,EAAE2B,SAGtBA,KAAKf,QAAQK,OACf4D,EAAU3D,OAAOS,KAAKf,QAAQa,cAAe,WAC3CzB,EAAEW,SAASM,MAAMjB,EAAE2B,SAGnBA,KAAKf,QAAQI,cACf6D,EAAU3D,OAAOS,KAAKf,QAAQY,qBAAsB,WAClDxB,EAAEW,SAASK,aAAahB,EAAE2B,aAQnCoD","file":"material.min.js"}

dist/js/ripples.js

@@ -173,7 +173,7 @@
        */
       event = event.originalEvent;
 
-      if(event.touches.length !== 1) {
+      if(event.touches.length === 1) {
         return event.touches[0].pageX - wrapperOffset.left;
       }
 
@@ -200,7 +200,7 @@
        */
       event = event.originalEvent;
 
-      if(event.touches.length !== 1) {
+      if(event.touches.length === 1) {
         return event.touches[0].pageY - wrapperOffset.top;
       }
 

dist/js/ripples.min.js

@@ -1,2 +1,2 @@
-!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-wrapper").length||c.append('<div class="ripple-wrapper"></div>');var e=c.children(".ripple-wrapper"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1!==b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1!==b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
+!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-wrapper").length||c.append('<div class="ripple-wrapper"></div>');var e=c.children(".ripple-wrapper"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
 //# sourceMappingURL=ripples.min.js.map

dist/js/ripples.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"CAGA,SAAUA,EAAGC,EAAQC,EAAUC,GAE7B,YAuBA,SAASC,GAAQC,EAASC,GACxBC,EAAOC,KAEPA,KAAKH,QAAUL,EAAEK,GAEjBG,KAAKF,QAAUN,EAAES,UAAWC,EAAUJ,GAEtCE,KAAKG,UAAYD,EACjBF,KAAKI,MAAQC,EAEbL,KAAKM,OA5BP,GAAID,GAAU,UAMVN,EAAO,KAMPG,IAuBJN,GAAQW,UAAUD,KAAO,WACvB,GAAIE,GAAYR,KAAKH,OAErBW,GAASC,GAAG,uBAAwB,SAASC,GAI3C,IAAGX,EAAKY,WAA4B,cAAfD,EAAME,KAA3B,CASKJ,EAASK,KAAK,mBAAyB,QAC1CL,EAASM,OAAO,qCAOlB,IAAIC,GAAWP,EAASQ,SAAS,mBAM7BC,EAAOlB,EAAKmB,QAAQH,EAAUL,GAC9BS,EAAOpB,EAAKqB,QAAQL,EAAUL,EAMlC,IAAIO,GAASE,EAAb,CAQA,GAAIE,GAActB,EAAKuB,gBAAgBd,GAMnCe,EAAU/B,EAAE,cAEhB+B,GACCC,SAAS,UACTC,KACCC,KAAQP,EACRQ,IAAOV,EACPW,mBAAoBP,IAOtBN,EAASD,OAAOS,GAMhB,WAAc,MAAO9B,GAAOoC,iBAAiBN,EAAQ,IAAIO,WAMzD/B,EAAKgC,SAASvB,EAAUe,GAMxBS,WAAW,WACTjC,EAAKkC,UAAUV,IACd,KAMHf,EAASC,GAAG,8BAA+B,WACzCc,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,UAWvB3B,EAAQW,UAAU6B,WAAa,SAAS5B,EAAUe,GAEhD,MAAQc,MAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAAiBjB,EAAQgB,aAAgB,KAO5F3C,EAAQW,UAAUa,QAAU,SAASL,EAAWL,GAC9C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGE,MAAQL,EAAcf,MAGzC,GAZAhB,EAAMoC,MAAQL,EAAcf,MAoBvC9B,EAAQW,UAAUW,QAAU,SAASH,EAAUL,GAC7C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGG,MAAQN,EAAcd,KAGzC,GAZAjB,EAAMqC,MAAQN,EAAcd,KAoBvC/B,EAAQW,UAAUe,gBAAkB,SAASd,GAE3C,GAAIwC,GAAQxC,EAAS0B,KAAK,gBAAkB1B,EAAS0B,KAAK,gBAAkBzC,EAAOoC,iBAAiBrB,EAAS,IAAIwC,KAEjH,OAAOA,IAOTpD,EAAQW,UAAU0C,qBAAuB,WACvC,GAAIC,GAAYxD,EAASyD,MAAQzD,EAAS0D,gBACtCC,EAAYH,EAASI,MAErBC,EACFF,EAAUG,aAAe7D,GACzB0D,EAAUI,mBAAqB9D,GAC/B0D,EAAUK,gBAAkB/D,GAC5B0D,EAAUM,eAAiBhE,GAC3B0D,EAAUO,cAAgBjE,CAG5B,OAAO4D,IAOT3D,EAAQW,UAAUI,QAAU,WAC1B,MAAO,iEAAiEkD,KAAKC,UAAUC,YAOzFnE,EAAQW,UAAU0B,UAAY,SAASV,GACrCA,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,IAQnB3B,EAAQW,UAAU4B,UAAY,SAASZ,GACrCA,EAAQyC,MAELjE,EAAKkD,uBACN1B,EAAQC,SAAS,cAEjBD,EAAQ0C,SAASnC,QAAW,GAAI,IAAK,WACnCP,EAAQ2C,QAAQ,mBAIpB3C,EAAQd,GAAG,mEAAoE,WAC7Ec,EAAQ4C,YAQZvE,EAAQW,UAAUwB,SAAW,SAASvB,EAAUe,GAC9C,GAAI6C,GAAOrE,EAAKqC,WAAW5B,EAAUe,EAElCxB,GAAKkD,uBACN1B,EACCE,KACC4C,gBAAiB,SAAWD,EAAO,IACnCE,iBAAkB,SAAWF,EAAO,IACpCG,oBAAqB,SAAWH,EAAO,IACvCI,UAAa,SAAWJ,EAAO,MAEhC5C,SAAS,aACTU,KAAK,YAAa,MAClBA,KAAK,YAAa,MAEnBX,EAAQ0C,SACNQ,MAAmE,EAA1DpC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAClDkC,OAAoE,EAA1DrC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACnDmC,cAAyE,GAA1DtC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACxDoC,aAAwE,GAA1DvC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACvDV,QAAW,IACV,IAAK,WACNP,EAAQ2C,QAAQ,oBAStB1E,EAAEqF,GAAGxE,QAAU,SAASP,GACtB,MAAOE,MAAK8E,KAAK,WACXtF,EAAE0C,KAAKlC,KAAM,UAAYK,IAC3Bb,EAAE0C,KAAKlC,KAAM,UAAYK,EAAS,GAAIT,GAAQI,KAAMF,QAKzDiF,OAAQtF,OAAQC"}
+{"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"CAGA,SAAUA,EAAGC,EAAQC,EAAUC,GAE7B,YAuBA,SAASC,GAAQC,EAASC,GACxBC,EAAOC,KAEPA,KAAKH,QAAUL,EAAEK,GAEjBG,KAAKF,QAAUN,EAAES,UAAWC,EAAUJ,GAEtCE,KAAKG,UAAYD,EACjBF,KAAKI,MAAQC,EAEbL,KAAKM,OA5BP,GAAID,GAAU,UAMVN,EAAO,KAMPG,IAuBJN,GAAQW,UAAUD,KAAO,WACvB,GAAIE,GAAYR,KAAKH,OAErBW,GAASC,GAAG,uBAAwB,SAASC,GAI3C,IAAGX,EAAKY,WAA4B,cAAfD,EAAME,KAA3B,CASKJ,EAASK,KAAK,mBAAyB,QAC1CL,EAASM,OAAO,qCAOlB,IAAIC,GAAWP,EAASQ,SAAS,mBAM7BC,EAAOlB,EAAKmB,QAAQH,EAAUL,GAC9BS,EAAOpB,EAAKqB,QAAQL,EAAUL,EAMlC,IAAIO,GAASE,EAAb,CAQA,GAAIE,GAActB,EAAKuB,gBAAgBd,GAMnCe,EAAU/B,EAAE,cAEhB+B,GACCC,SAAS,UACTC,KACCC,KAAQP,EACRQ,IAAOV,EACPW,mBAAoBP,IAOtBN,EAASD,OAAOS,GAMhB,WAAc,MAAO9B,GAAOoC,iBAAiBN,EAAQ,IAAIO,WAMzD/B,EAAKgC,SAASvB,EAAUe,GAMxBS,WAAW,WACTjC,EAAKkC,UAAUV,IACd,KAMHf,EAASC,GAAG,8BAA+B,WACzCc,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,UAWvB3B,EAAQW,UAAU6B,WAAa,SAAS5B,EAAUe,GAEhD,MAAQc,MAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAAiBjB,EAAQgB,aAAgB,KAO5F3C,EAAQW,UAAUa,QAAU,SAASL,EAAWL,GAC9C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGE,MAAQL,EAAcf,MAGzC,GAZAhB,EAAMoC,MAAQL,EAAcf,MAoBvC9B,EAAQW,UAAUW,QAAU,SAASH,EAAUL,GAC7C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGG,MAAQN,EAAcd,KAGzC,GAZAjB,EAAMqC,MAAQN,EAAcd,KAoBvC/B,EAAQW,UAAUe,gBAAkB,SAASd,GAE3C,GAAIwC,GAAQxC,EAAS0B,KAAK,gBAAkB1B,EAAS0B,KAAK,gBAAkBzC,EAAOoC,iBAAiBrB,EAAS,IAAIwC,KAEjH,OAAOA,IAOTpD,EAAQW,UAAU0C,qBAAuB,WACvC,GAAIC,GAAYxD,EAASyD,MAAQzD,EAAS0D,gBACtCC,EAAYH,EAASI,MAErBC,EACFF,EAAUG,aAAe7D,GACzB0D,EAAUI,mBAAqB9D,GAC/B0D,EAAUK,gBAAkB/D,GAC5B0D,EAAUM,eAAiBhE,GAC3B0D,EAAUO,cAAgBjE,CAG5B,OAAO4D,IAOT3D,EAAQW,UAAUI,QAAU,WAC1B,MAAO,iEAAiEkD,KAAKC,UAAUC,YAOzFnE,EAAQW,UAAU0B,UAAY,SAASV,GACrCA,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,IAQnB3B,EAAQW,UAAU4B,UAAY,SAASZ,GACrCA,EAAQyC,MAELjE,EAAKkD,uBACN1B,EAAQC,SAAS,cAEjBD,EAAQ0C,SAASnC,QAAW,GAAI,IAAK,WACnCP,EAAQ2C,QAAQ,mBAIpB3C,EAAQd,GAAG,mEAAoE,WAC7Ec,EAAQ4C,YAQZvE,EAAQW,UAAUwB,SAAW,SAASvB,EAAUe,GAC9C,GAAI6C,GAAOrE,EAAKqC,WAAW5B,EAAUe,EAElCxB,GAAKkD,uBACN1B,EACCE,KACC4C,gBAAiB,SAAWD,EAAO,IACnCE,iBAAkB,SAAWF,EAAO,IACpCG,oBAAqB,SAAWH,EAAO,IACvCI,UAAa,SAAWJ,EAAO,MAEhC5C,SAAS,aACTU,KAAK,YAAa,MAClBA,KAAK,YAAa,MAEnBX,EAAQ0C,SACNQ,MAAmE,EAA1DpC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAClDkC,OAAoE,EAA1DrC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACnDmC,cAAyE,GAA1DtC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACxDoC,aAAwE,GAA1DvC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACvDV,QAAW,IACV,IAAK,WACNP,EAAQ2C,QAAQ,oBAStB1E,EAAEqF,GAAGxE,QAAU,SAASP,GACtB,MAAOE,MAAK8E,KAAK,WACXtF,EAAE0C,KAAKlC,KAAM,UAAYK,IAC3Bb,EAAE0C,KAAKlC,KAAM,UAAYK,EAAS,GAAIT,GAAQI,KAAMF,QAKzDiF,OAAQtF,OAAQC","file":"ripples.min.js"}

dist/test.html

@@ -1,50 +0,0 @@
-<html>
-
-    <head>
-
-        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
-        <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
-        <link href="dist/css/roboto.min.css" rel="stylesheet">
-        <link href="dist/css/material.min.css" rel="stylesheet">
-        <link href="dist/css/ripples.min.css" rel="stylesheet">
-
-    </head>
-
-    <body>
-
-        <!-- Your site -->
-
-        <h1>You can add your site here.</h1>
-
-        <h2>To ensure that material-design theme is working, check out the buttons below.</h2>
-
-        <h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
-
-
-        <p class="bs-component">
-            <a href="javascript:void(0)" class="btn btn-default">Default</a>
-            <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
-            <a href="javascript:void(0)" class="btn btn-success">Success</a>
-            <a href="javascript:void(0)" class="btn btn-info">Info</a>
-            <a href="javascript:void(0)" class="btn btn-warning">Warning</a>
-            <a href="javascript:void(0)" class="btn btn-danger">Danger</a>
-            <a href="javascript:void(0)" class="btn btn-link">Link</a>
-        </p>
-
-        <!-- Your site ends -->
-
-        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
-
-        <script src="js/ripples.min.js"></script>
-        <script src="js/material.min.js"></script>
-        <script>
-            $(document).ready(function() {
-                // This command is used to initialize some elements and make them work properly
-                $.material.init();
-            });
-        </script>
-
-    </body>
-
-</html>

index.css

@@ -0,0 +1,360 @@
+* {
+    box-sizing: border-box;
+}
+
+.header-panel {
+    background-color: #009587;
+    height: 144px;
+    position: relative;
+    z-index: 3;
+}
+
+.header-panel div {
+    position: relative;
+    height: 100%;
+}
+
+.header-panel h1 {
+    color: #FFF;
+    font-size: 20px;
+    font-weight: 400;
+    position: absolute;
+    bottom: 10px;
+    padding-left: 35px;
+}
+
+.menu {
+    overflow: auto;
+    padding: 0;
+}
+
+.menu, .menu * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.menu ul {
+    padding: 0;
+    margin: 7px 0;
+}
+
+.menu ul li {
+    list-style: none;
+    padding: 20px 0 20px 50px;
+    font-size: 15px;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+.menu ul li.active {
+    background-color: #dedede;
+    position: relative;
+}
+
+.menu ul li a {
+    color: rgb(51, 51, 51);
+    text-decoration: none;
+}
+
+.pages {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    padding: 0;
+    overflow: auto;
+}
+
+.pages > div {
+    padding: 0 5px;
+    padding-top: 64px;
+}
+
+.pages .header {
+    color: rgb(82, 101, 162);
+    font-size: 24px;
+    font-weight: normal;
+    margin-top: 5px;
+    margin-bottom: 60px;
+    letter-spacing: 1.20000004768372px;
+}
+
+.page {
+    transform: translateY(1080px);
+    transition: transform 0 linear;
+    display: none;
+    opacity: 0;
+    font-size: 16px;
+}
+
+.page.active {
+    transform: translateY(0px);
+    transition: all 0.3s ease-out;
+    display: block;
+    opacity: 1;
+}
+
+.opensource {
+    color: rgba(0, 0, 0, 0.62);
+    position: fixed;
+    margin-top: 50px;
+    margin-left: 50px;
+    z-index: 100;
+}
+
+#source-modal h4 {
+    color: black;
+}
+
+#paypal .btn {
+    padding: 5px 30px 6px 30px;
+}
+
+#paypal input {
+    background: transparent;
+    border: 0;
+}
+
+.cbwrapper div {
+    display: none;
+}
+
+.cbwrapper div:nth-child(2) {
+    display: block;
+}
+
+#carbonads, #fakecb {
+    border: 1px solid #d5d5d5;
+    font-size: 11px;
+    line-height: 15px;
+    overflow: hidden;
+    width: 340px;
+    padding: 20px;
+    margin: auto;
+    height: 142px;
+    border-radius: 2px;
+}
+
+#carbonads .carbon-img {
+    float: left;
+    display: block;
+}
+
+#carbonads .carbon-text, #carbonads .carbon-poweredby {
+    float: left;
+    width: 150px;
+    padding: 0 10px 10px 10px;
+}
+
+#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
+    text-decoration: none;
+}
+
+#carbonads .carbon-poweredby {
+    color: #9D9D9D;
+}
+
+#checkbox .sample1 label {
+    font-weight: bold;
+}
+
+#checkbox .hint {
+    padding-left: 45px;
+    padding-top: 20px;
+    font-weight: 400;
+}
+
+#checkbox .sample1 {
+    padding-bottom: 20px;
+}
+
+#checkbox h2 {
+    font-size: 18.7199993133545px;
+    font-weight: bold;
+    margin-bottom: 30px;
+}
+
+#checkbox .sample2 {
+    width: 300px;
+    clear: both;
+    font-weight: 400;
+}
+
+#checkbox .sample2 {
+    padding: 10px 0;
+}
+
+#checkbox .sample2 .text {
+    display: inline-block;
+}
+
+#checkbox .sample2 .checkbox {
+    float: right;
+    margin: 0;
+}
+
+/*#progress-bar h2 {*/
+    /*font-size: 18.7199993133545px;*/
+    /*font-weight: bold;*/
+    /*margin-bottom: 30px;*/
+/*}*/
+
+/*#dialog h2 {*/
+    /*padding: 14px;*/
+    /*margin: 0;*/
+    /*font-size: 16px;*/
+    /*font-weight: 400;*/
+/*}*/
+
+/*#shadow h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#shadow .sample {
+    width: 100px;
+    height: 100px;
+    margin: 16px;
+    padding: 16px;
+    display: inline-block;
+}
+
+#shadow-sample2 {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    margin: 16px;
+    padding: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+
+}
+
+#shadow-sample3 {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    margin: 16px;
+    padding: 16px;
+    border-radius: 100px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+/*#radio-button h2 {*/
+    /*font-size: 18.7199993133545px;*/
+    /*font-weight: bold;*/
+    /*margin-bottom: 30px;*/
+    /*margin-top: 50px;*/
+/*}*/
+
+#radio-button .radio {
+    margin: 20px 10px;
+}
+
+/*#input h2 {*/
+/*padding: 14px;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#input .inputs {
+    width: 80%;
+}
+
+/*#input .form-group {*/
+    /*margin: 30px 0;*/
+/*}*/
+
+#slider .sample1, #slider .sample2 {
+    padding: 20px 0;
+    background-color: #f0f0f0;
+    margin-bottom: 20px;
+}
+
+#slider .sample2 {
+    height: 150px;
+}
+
+#slider .sample2 .slider {
+    margin: 0 40px;
+}
+
+/*#slider h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#slider .slider {
+    margin: 15px;
+}
+
+/*#button h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#floating-action-button .btn {
+    margin: 20px;
+}
+
+/*#floating-action-button h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+/*#dropdown h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#dropdown .dropdown {
+    font-size: 30px;
+    padding: 20px;
+}
+
+/*#dropdown-menu h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#dropdown-menu .sample {
+    width: 200px;
+}
+
+#dropdown-menu .form-group {
+    margin: 30px 0;
+}
+
+/*#toggle-button h2 {*/
+    /*font-size: 18.7199993133545px;*/
+    /*font-weight: bold;*/
+    /*margin-bottom: 30px;*/
+    /*margin-top: 50px;*/
+/*}*/
+
+#toggle-button .togglebutton label {
+    margin: 20px 10px;
+    width: 200px;
+}
+
+#toggle-button .togglebutton .toggle {
+    float: right;
+}

less/_alerts.less

@@ -2,12 +2,13 @@
     border: 0px;
     border-radius: 0;
 
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
     .generic-variations(~"", @darkbg-text, {
         background-color: @material-color;
-        color: @text-color;
+        color: @material-text-color;
 
         a, .alert-link {
-            color: @text-color;
+            color: @material-text-color;
         }
     });
 

less/_buttons.less

@@ -1,3 +1,11 @@
+.btn-shadow() {
+  .shadow-z-1();
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  &:active:not(.btn-link) {
+    .shadow-z-1-hover();
+  }
+}
+
 .btn {
   position: relative;
   padding: 8px 30px;
@@ -24,25 +32,30 @@
   .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
 
   // BTN hover effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
   .generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, {
     background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor);
   });
   // BTN active effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
   .generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, {
     background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
   });
   // BTN .active effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
   .generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, {
     background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
   });
   // BTN flat hover effect
-  .generic-variations(~".btn-flat:hover:not(.btn-ink)", @btn-default, {
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
+  .generic-variations(~".btn-flat:hover:not(.btn-link)", @btn-default, {
     background-color: fade(@material-color, 20%);
   });
 
 }
 
-.btn {
+.btn,
+.input-group-btn .btn {
   &.btn-flat {
     background: none;
     box-shadow: none;
@@ -80,18 +93,20 @@
     &:active {
       .shadow-z-1-hover();
     }
-    &, .ripple-wrapper {
+    &,
+    .ripple-wrapper {
       border-radius: 100%;
     }
     &.btn-fab-mini {
       width: 40px;
       height: 40px;
-      padding: 13px;
+      padding: 13px 0;
       font-size: 15px;
     }
     i {
       position: relative;
       top: -5px;
+      margin: 0 auto;
     }
   }
 }
@@ -134,11 +149,3 @@
 .btn-group-flat {
   box-shadow: none !important;
 }
-
-.btn-shadow() {
-  .shadow-z-1();
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  &:active:not(.btn-link) {
-    .shadow-z-1-hover();
-  }
-}

less/_checkboxes.less

@@ -1,120 +1,151 @@
+// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
 .form-horizontal .checkbox {
   padding-top: 20px;
 }
-.checkbox {
-  transform: translateZ(0); // Force 3d rendering
-  label {
-    cursor: pointer;
-    padding-left: 0; // Reset for Bootstrap rule
-  }
 
-  // Hide native checkbox
-  input[type=checkbox] {
-    opacity: 0;
-    position: absolute;
-    margin: 0;
-    z-index: -1;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    left: 0;
-    pointer-events: none;
-  }
-
-  .checkbox-material {
-    vertical-align: middle;
-    position: relative;
-    top: 3px;
-    &:before {
-      display: block;
-      position: absolute;
-      left: 0;
-      content: "";
-      background-color: rgba(0,0,0,.84);
-      height: @checkbox-size;
-      width: @checkbox-size;
-      border-radius: 100%;
-      z-index: 1;
-      opacity: 0;
-      margin: 0;
-      transform: scale3d(2.3, 2.3, 1);
-    }
-
-    .check {
-      position: relative;
-      display: inline-block;
-      width: @checkbox-size;
-      height: @checkbox-size;
-      border: 2px solid;
-      border-radius: 2px;
-      overflow: hidden;
-      z-index: 1;
-    }
-    .check:before {
-      position: absolute;
-      content: "";
-      transform: rotate(45deg);
-      display: block;
-      margin-top: -4px;
-      margin-left: 6px;
-      width: 0;
-      height: 0;
-      box-shadow:
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0 inset;
-      animation: checkbox-off @checkbox-animation-check forwards;
+.form-group-checkbox-variant(@placeholder-font-size, @line-height){
+  .checkbox {
+    label {
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+      font-weight: normal;
     }
   }
-
-  input[type=checkbox]:focus + .checkbox-material .check:after {
-    opacity: 0.2;
-  }
-  input[type=checkbox]:checked + .checkbox-material .check:before {
-    box-shadow:
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0px 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      20px -12px 0 11px;
-    animation: checkbox-on @checkbox-animation-check forwards;
-  }
-
-  input[type=checkbox]:not(:checked) + .checkbox-material:before {
-    animation: rippleOff @checkbox-animation-ripple;
-  }
-  input[type=checkbox]:checked + .checkbox-material:before {
-    animation: rippleOn @checkbox-animation-ripple;
-  }
-
-  // Ripple effect on click
-  input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-    animation: rippleOff @checkbox-animation-ripple forwards;
-  }
-  input[type=checkbox]:checked + .checkbox-material .check:after {
-    animation: rippleOn @checkbox-animation-ripple forwards;
-  }
-
-  // Style for disabled inputs
-  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
-  input[type=checkbox][disabled] + .circle {
-    opacity: 0.5;
-  }
-  input[type=checkbox][disabled] + .checkbox-material .check:after {
-    background-color: @lightbg-text;
-    transform: rotate(-45deg);
-  }
-
-  .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
-  .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
-  .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
 }
 
+.form-group {
+
+  // default label size/location
+  .form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    .form-group-checkbox-variant(@md-input-font-size-small, @md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    .form-group-checkbox-variant(@md-input-font-size-large, @md-input-line-height-large);
+  }
+
+  .checkbox {
+    label {
+      cursor: pointer;
+      padding-left: 0; // Reset for Bootstrap rule
+      color: @checkbox-label-color;
+    }
+
+    // Hide native checkbox
+    input[type=checkbox] {
+      opacity: 0;
+      position: absolute;
+      margin: 0;
+      z-index: -1;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      left: 0;
+      pointer-events: none;
+    }
+
+    .checkbox-material {
+      vertical-align: middle;
+      position: relative;
+      top: 3px;
+      &:before {  // FIXME: document why this is necessary (doesn't seem to be on chrome)
+        display: block;
+        position: absolute;
+        left: 0;
+        content: "";
+        background-color: rgba(0,0,0,.84);
+        height: @checkbox-size;
+        width: @checkbox-size;
+        border-radius: 100%;
+        z-index: 1;
+        opacity: 0;
+        margin: 0;
+        transform: scale3d(2.3, 2.3, 1);
+      }
+
+      .check {
+        position: relative;
+        display: inline-block;
+        width: @checkbox-size;
+        height: @checkbox-size;
+        border: 2px solid @checkbox-border-color;
+        border-radius: 2px;
+        overflow: hidden;
+        z-index: 1;
+      }
+      .check:before {
+        position: absolute;
+        content: "";
+        transform: rotate(45deg);
+        display: block;
+        margin-top: -4px;
+        margin-left: 6px;
+        width: 0;
+        height: 0;
+        box-shadow:
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0 inset;
+        animation: checkbox-off @checkbox-animation-check forwards;
+      }
+    }
+
+    input[type=checkbox]:focus + .checkbox-material .check:after {
+      opacity: 0.2;
+    }
+    input[type=checkbox]:checked + .checkbox-material .check:before {
+      box-shadow:
+        0 0 0 10px,
+        10px -10px 0 10px,
+        32px 0px 0 20px,
+        0px 32px 0 20px,
+        -5px 5px 0 10px,
+        20px -12px 0 11px;
+      animation: checkbox-on @checkbox-animation-check forwards;
+    }
+
+    input[type=checkbox]:not(:checked) + .checkbox-material:before {
+      animation: rippleOff @checkbox-animation-ripple;
+    }
+    input[type=checkbox]:checked + .checkbox-material:before {
+      animation: rippleOn @checkbox-animation-ripple;
+    }
+
+    // Ripple effect on click
+    input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
+      animation: rippleOff @checkbox-animation-ripple forwards;
+    }
+    input[type=checkbox]:checked + .checkbox-material .check:after {
+      animation: rippleOn @checkbox-animation-ripple forwards;
+    }
+
+    // Style for disabled inputs
+    fieldset[disabled] &,
+    fieldset[disabled] & input[type=checkbox],
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
+    input[type=checkbox][disabled] + .circle {
+      opacity: 0.5;
+    }
+    input[type=checkbox][disabled] + .checkbox-material .check:after {
+      background-color: @lightbg-text;
+      transform: rotate(-45deg);
+    }
+
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @checkbox-checked-color);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @checkbox-checked-color);
+  }
+}
 
 @keyframes checkbox-on {
   0% {

less/_dialogs.less

@@ -18,7 +18,7 @@
   // Modal body
   // Where all modal content resides (sibling of .modal-header and .modal-footer)
   .modal-body {
-    padding-top:    0px;
+    padding-top:    24px;
     padding-right:  24px;
     padding-bottom: 16px;
     padding-left:   24px;

less/_dividers.less

@@ -12,7 +12,7 @@ hr {
     (-o-device-pixel-ratio: 3/4),
     (min-device-pixel-ratio: 0.75),
     (min-resolution: 0.75dppx),
-    (min-resolution: 120dpi), {
+    (min-resolution: 120dpi) {
       height:0.75px;
     }
 

less/_icons-material-design.less

@@ -977,7 +977,7 @@
     content: "\e6bf";
 }
 
-.mdi-av-queue-mus:before {
+.mdi-av-queue-music:before {
     content: "\e6c0";
 }
 
@@ -3205,7 +3205,7 @@
     content: "\e8ea";
 }
 
-.mdi-social-publ24px:before {
+.mdi-social-public:before {
     content: "\e8eb";
 }
 

less/_inputs-size.less

@@ -0,0 +1,218 @@
+//
+// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
+//
+// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
+//        to identify differences in sizing approaches to form inputs.
+// --------------------------------------------------
+
+legend {
+  margin-bottom: @md-input-line-height-computed;
+  font-size: (@md-input-font-size-base * 1.5);
+}
+
+// Adjust output element
+output {
+  padding-top: (@md-input-padding-base-vertical + 1);
+  font-size: @md-input-font-size-base;
+  line-height: @md-input-line-height-base;
+}
+
+.form-control {
+  height: @md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @md-input-padding-base-vertical @md-input-padding-base-horizontal;
+  font-size: @md-input-font-size-base;
+  line-height: @md-input-line-height-base;
+}
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
+    &.form-control {
+      line-height: @md-input-height-base;
+    }
+
+    &.input-sm,
+    .input-group-sm & {
+      line-height: @md-input-height-small;
+    }
+
+    &.input-lg,
+    .input-group-lg & {
+      line-height: @md-input-height-large;
+    }
+  }
+}
+
+.radio,
+.checkbox {
+
+  label {
+    min-height: @md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: (@md-input-padding-base-vertical + 1);
+  padding-bottom: (@md-input-padding-base-vertical + 1);
+  min-height: (@md-input-line-height-computed + @md-input-font-size-base);
+}
+
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+// mixin pulled from bootstrap and altered for less/sass compatibility
+.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
+
+  @{parent} {
+    height: @input-height;
+    padding: @padding-vertical @padding-horizontal;
+    font-size: @font-size;
+    line-height: @line-height;
+    border-radius: @border-radius;
+  }
+
+  select@{parent} {
+    height: @input-height;
+    line-height: @input-height;
+  }
+
+  textarea@{parent},
+  select[multiple]@{parent} {
+    height: auto;
+  }
+}
+
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+.input-sm {
+  .input-size('.input-sm', @md-input-height-small, @md-input-padding-small-vertical, @md-input-padding-small-horizontal, @md-input-font-size-small, @md-input-line-height-small, @md-input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: @md-input-height-small;
+    padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal;
+    font-size: @md-input-font-size-small;
+    line-height: @md-input-line-height-small;
+  }
+  select.form-control {
+    height: @md-input-height-small;
+    line-height: @md-input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @md-input-height-small;
+    min-height: (@md-input-line-height-computed + @md-input-font-size-small);
+    padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal;
+    font-size: @md-input-font-size-small;
+    line-height: @md-input-line-height-small;
+  }
+}
+
+.input-lg {
+  .input-size('.input-lg', @md-input-height-large, @md-input-padding-large-vertical, @md-input-padding-large-horizontal, @md-input-font-size-large, @md-input-line-height-large, @md-input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: @md-input-height-large;
+    padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal;
+    font-size: @md-input-font-size-large;
+    line-height: @md-input-line-height-large;
+  }
+  select.form-control {
+    height: @md-input-height-large;
+    line-height: @md-input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @md-input-height-large;
+    min-height: (@md-input-line-height-computed + @md-input-font-size-large);
+    padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal;
+    font-size: @md-input-font-size-large;
+    line-height: @md-input-line-height-large;
+  }
+}
+
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: (@md-input-line-height-computed + (@md-input-padding-base-vertical + 1));
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: @screen-sm-min) {
+    .control-label {
+      padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1);
+        font-size: @md-input-font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@md-input-padding-small-vertical + 1);
+        font-size: @md-input-font-size-small;
+      }
+    }
+  }
+}

less/_inputs.less

@@ -1,212 +1,285 @@
-fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
-  &, &:focus, &.focus {
-    &:not(textarea) {
-      height: 28px;
+@import '_inputs-size.less';
+
+// usage: .form-group-validation-state(@input-danger);
+.form-group-validation-state(@name, @color) {
+
+  &.@{name} { // e.g. has-error
+    .form-control {
+      box-shadow: none;
     }
-    padding: 0;
-    float: none;
-    border: 0;
-    box-shadow: none;
-    border-radius: 0;
-    &:disabled {
-      border-style: dashed;
-      border-bottom: 1px solid #757575;
+    &.is-focused .form-control {
+      background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
+    }
+    label.control-label,
+    .help-block {
+      color: @color;
     }
   }
 }
 
-select[multiple].form-control {
-  &, &:focus, &.focus {
-    height: 85px;
-  }
-}
+.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
+  @static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size));
+  @static-line-height: (@label-floating-size-ratio * @line-height);
 
-.form-control {
-  border: 0;
-  background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
-  background-size: 0 2px, 100% 1px;
-  background-repeat: no-repeat;
-  background-position: center bottom, center calc(~"100% - 1px");
-  background-color: transparent;
-  background-color: rgba(0,0,0,0);
-}
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-  background-color: transparent;
-  background-color: rgba(0,0,0,0);
-}
-fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:disabled, .form-control:disabled, fieldset[disabled] .form-control:focus:disabled, .form-control-wrapper .form-control:focus:disabled, .form-control:focus:disabled, fieldset[disabled] .form-control.focus:disabled, .form-control-wrapper .form-control.focus:disabled, .form-control.focus:disabled {
-  border: 0;
-}
+  @label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
+  @label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
 
-.form-control:focus, .form-control.focus {
-  outline: none;
-  background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
-  animation: input-highlight 0.5s forwards;
-  box-shadow: none;
-  background-size: 0 2px, 100% 1px;
-}
+  @help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size));
+  @help-block-line-height: (@help-block-size-ratio * @line-height);
 
+  // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+  margin: (@label-top-margin + @static-font-size) 0 0 0;
 
-.form-control-wrapper {
-  position: relative;
-
-  .floating-label {
-    color: #7E7E7E;
-    font-size: 14px;
-    position: absolute;
-    pointer-events: none;
-    left: 0px;
-    top: 5px;
-    transition: 0.2s ease all;
-    opacity: 0;
-  }
-  .form-control:focus ~ .floating-label,
-  .form-control:not(.empty) ~ .floating-label {
-    top: -10px;
-    font-size: 10px;
-    opacity: 1;
-  }
-  .form-control:focus ~ .floating-label {
-    color: @primary;
-  }
-  .form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
-    color: @input-danger;
-  }
-  .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
-    background-color: @input-default;
-  }
-  .form-control:invalid {
-    background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
-  }
-  .form-control.empty ~ .floating-label  {
-    opacity: 1;
-  }
-  textarea { resize: none; }
-  textarea ~ .form-control-highlight {
-    margin-top: -11px;
+  .form-control {
+    .material-placeholder({
+      font-size: @placeholder-font-size;
+    });
+    margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
   }
 
-  // Hints
-  .hint {
-    position: absolute;
-    font-size: 80%;
-    display: none;
-  }
-  .form-control:focus ~ .hint, .form-control.focus ~ .hint {
-    display: block;
+  // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
+  //  must also be expressed as form-group padding
+  padding-bottom: @vertical-padding;
+
+  .help-block {
+    margin-top: 0px; // allow the input margin to set-off the top of the help-block
+    font-size: @help-block-font-size;
   }
 
-  select ~ .material-input:after {
-    display: none;
+  // smaller focused or static size
+  label.control-label {
+    font-size: @static-font-size;
+    line-height: @static-line-height;
   }
 
-  // Fix for OS X
-  select {
-    appearance: none;
+  // larger labels as placeholders
+  &.label-floating,
+  &.label-placeholder {
+    label.control-label {
+      top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+    }
   }
 
+  // static or focused floating labels
+  &.label-static,
+  &.label-floating.is-focused,
+  &.label-floating:not(.is-empty) {
+    label.control-label {
+      top: @label-top;
+      left: 0;
+      // must repeat because the selector above is more specific than the general label sizing
+      font-size: @static-font-size;
+      line-height: @static-line-height;
+    }
+  }
 }
 
 .form-group {
-  &.has-warning {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-warning, @input-warning), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-warning;
-    }
-  }
-  &.has-error {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-danger;
-    }
-  }
-  &.has-success {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-success;
-    }
-  }
-  &.has-info {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-info, @input-info), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-info;
-    }
-  }
-  .generic-variations(~" .form-control:focus", @primary, {
-    background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
-  });
-  .generic-variations(~" .form-control.focus", @primary, {
-    background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
-  });
-  .variations(~" .control-label", color, @lightbg-text);
-  .variations(~" input.form-control:focus ~ .floating-label", color, @input-default);
+  //border: solid 1px red;
+  position: relative;
 
-}
-
-.input-group {
-  .form-control-wrapper {
-    .form-control {
-      float: none;
-    }
-    margin-right: 5px;
-    margin-left: 5px;
-  }
-  .input-group-addon {
+  // -----
+  // Inputs
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  .form-control {
     border: 0;
-    background: transparent;
+    background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
+    background-size: 0 2px, 100% 1px;
+    background-repeat: no-repeat;
+    background-position: center bottom, center calc(~"100% - 1px");
+    background-color: rgba(0, 0, 0, 0);
+    transition: background 0s ease-out;
+    float: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    // Placeholders and and labels-as-placeholders should look the same
+    .material-placeholder({
+      color: @input-placeholder-color;
+      font-weight: normal;
+    });
+
+
+    //&:textarea {    // appears to be an invalid selector
+    //  height: 40px;
+    //}
+
+    &[readonly],
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: rgba(0, 0, 0, 0);
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+      background-image: none;
+      border-bottom: 1px dotted @input-underline-color;
+    }
   }
-  .input-group-btn .btn {
-    border-radius: 4px;
-    margin: 0;
+
+  &.is-focused .form-control {
+    outline: none;
+    background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
+    background-size: 100% 2px, 100% 1px;
+    box-shadow: none;
+    transition-duration: 0.3s;
+
+    .material-input:after {
+      background-color: @input-default;
+    }
+  }
+
+  // -----
+  // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  &.label-static,
+  &.label-placeholder,
+  &.label-floating {
+
+    label.control-label {
+      position: absolute;
+      pointer-events: none;
+      transition: 0.3s ease all;
+    }
+  }
+
+  label.control-label {
+    // same label properties as form-group placeholder
+    color: @input-placeholder-color;
+    font-weight: normal;
+    margin: 16px 0 0 0; // std and lg
+  }
+
+  // hide label-placeholders when the field is not empty
+  &.label-placeholder:not(.is-empty){
+    label.control-label{
+      display: none;
+    }
+  }
+
+  .variations(~" label.control-label", color, @input-placeholder-color);  // default label color variations
+  .variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
+  .variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color);  // default label color variations
+
+  // default floating size/location
+  .form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base);
+
+  // sm floating size/location
+  &.form-group-sm {
+    .form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
+  }
+
+  // lg floating size/location
+  &.form-group-lg {
+    .form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
+  }
+
+  // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
+  .help-block {
+    position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
+    display: none;
+  }
+
+  &.is-focused {
+    .help-block {
+      display: block;
+    }
+  }
+
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
+  .generic-variations(~".is-focused .form-control", @primary, {
+    background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
+  });
+
+  .form-group-validation-state(has-warning, @input-warning);
+  .form-group-validation-state(has-error, @input-danger);
+  .form-group-validation-state(has-success, @input-success);
+  .form-group-validation-state(has-info, @input-info);
+
+  textarea {
+    resize: none;
+    & ~ .form-control-highlight {
+      margin-top: -11px;
+    }
+  }
+
+  select {
+    appearance: none; // Fix for OS X
+
+    & ~ .material-input:after {
+      display: none;
+    }
   }
 }
 
 select.form-control {
+
   border: 0;
   box-shadow: none;
   border-radius: 0;
-  &:focus, &.focus {
+
+  .form-group.is-focused & {
     box-shadow: none;
-    border-color: #757575;
+    border-color: @input-underline-color;
+  }
+
+  &[multiple] {
+    &,
+    .form-group.is-focused & {
+      height: 85px;
+    }
   }
 }
 
-@keyframes input-highlight {
-  0% {
-    background-size: 0 2px, 100% 1px;
-  }
-
-  100% {
-    background-size: 100% 2px, 100% 1px;
+.input-group-button-variation(@vertical-padding) {
+  .input-group-btn {
+    .btn {
+      margin: 0 0 @vertical-padding 0;
+    }
   }
 }
 
-// Input files (kinda hack)
-.form-control-wrapper input[type=file] {
+// ----------------
+// input group/addon related styles
+
+// default margin
+.input-group-button-variation(@md-input-padding-base-vertical);
+
+.form-group {
+  //.form-control {
+  //  float: none;
+  //}
+
+  // sm margin
+  &.form-group-sm {
+    .input-group-button-variation(@md-input-padding-small-vertical);
+  }
+
+  // lg margin
+  &.form-group-lg {
+    .input-group-button-variation(@md-input-padding-large-vertical);
+  }
+}
+
+.input-group {  // may be in or outside of form-group
+  .input-group-btn {
+    padding: 0 12px; // match addon spacing
+  }
+
+  .input-group-addon {
+    border: 0;
+    background: transparent;
+  }
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
   opacity: 0;
   position: absolute;
   top: 0;
@@ -217,3 +290,4 @@ select.form-control {
   height: 100%;
   z-index: 100;
 }
+

less/_material.less

@@ -0,0 +1,133 @@
+body {
+  background-color: @body-bg;
+  &.inverse {
+    background: #333333;
+    &, .form-control {
+      color: @darkbg-text;
+    }
+    .modal,
+    .panel-default,
+    .card {
+      &,
+      .form-control {
+        background-color: initial;
+        color: initial;
+      }
+    }
+
+  }
+}
+
+
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+  font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+}
+
+h5, h6{
+  font-weight: 400;
+}
+
+a, a:hover, a:focus {
+  color: @primary;
+}
+
+// Well and Jumbotrons
+@import "_welljumbo.less";
+
+// Buttons
+@import "_buttons.less";
+
+// Checkboxes
+@import "_checkboxes.less";
+
+// Toggle buttons
+@import "_togglebutton.less";
+
+// Radios
+@import "_radios.less";
+
+// Text inputs
+@import "_inputs.less";
+
+legend {
+  border-bottom: 0;
+}
+
+// Lists
+@import "_lists.less";
+
+// Navbar
+@import "_navbar.less";
+
+.dropdown-menu {
+  border: 0;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  .divider {
+    background-color: rgba(229, 229, 229, 0.12);
+  }
+  li {
+    overflow: hidden;
+    position: relative;
+    a:hover {
+      background-color: transparent;
+      color: @primary;
+    }
+  }
+  .variations(~" li a:hover", color, @primary);
+}
+
+// Alerts
+@import "_alerts.less";
+
+// Progress bar
+@import "_progress.less";
+
+// Typography
+.text-warning {
+  color: @btn-warning;
+}
+.text-primary {
+  color: @btn-primary;
+}
+.text-danger {
+  color: @btn-danger;
+}
+.text-success {
+  color: @btn-success;
+}
+.text-info {
+  color: @btn-info;
+}
+
+@import "_tabs.less";
+
+@import "_popups.less";
+
+@import "_icons.less";
+
+@import "_cards.less";
+
+@import "_dialogs.less";
+
+@import "_labels.less";
+
+@import "_panels.less";
+
+@import "_dividers.less";
+
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+    outline: 0;
+  }
+}
+
+
+// External plugins
+@import "_plugin-snackbarjs.less";
+@import "_plugin-nouislider.less";
+@import "_plugin-selectize.less";
+@import "_plugin-dropdownjs.less";

less/_mixins-fullpalette.less

@@ -1,25 +1,4 @@
-// usage: .variations(~" .check", color, transparent);
-.variations(@extra, @property, @default) {
-  .generic-variations(@extra, @default, {
-      @{property}: @material-color;
-    });
-}
-
-.background-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-      background-color: @material-color;
-      color: @text-color;
-      & when (@material-color = @btn-default) {
-        color: @lightbg-text;
-      }
-    });
-}
-
-.text-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-      color: @material-color;
-    });
-}
+@import '_mixins-shared.less';
 
 //
 // To use this mixin you should pass a function as final parameter to define
@@ -28,7 +7,7 @@
 // @material-color-name ---> "red", "green", "indigo" ...
 // @material-color-full-name ---> "red", "green-50", "indigo-400" ...
 // @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
-// @text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+// @material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
 //
 
 .generic-variations(@extra, @default, @func) {
@@ -40,63 +19,63 @@
     @material-color-name: "default";
     @material-color-full-name: @material-color-name;
     @material-color: @default;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-black@{extra} {
     @material-color-name: "black";
     @material-color-full-name: @material-color-name;
     @material-color: @black;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-white@{extra} {
     @material-color-name: "white";
     @material-color-full-name: @material-color-name;
     @material-color: @white;
-    @text-color: @lightbg-text;
+    @material-text-color: @lightbg-text;
     @func();
   }
   &-inverse@{extra} {
     @material-color-name: "inverse";
     @material-color-full-name: @material-color-name;
     @material-color: @inverse;
-    @text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
+    @material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
     @func();
   }
   &-primary@{extra} {
     @material-color-name: "primary";
     @material-color-full-name: @material-color-name;
     @material-color: @primary;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-success@{extra} {
     @material-color-name: "success";
     @material-color-full-name: @material-color-name;
     @material-color: @success;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-info@{extra} {
     @material-color-name: "info";
     @material-color-full-name: @material-color-name;
     @material-color: @info;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-warning@{extra} {
     @material-color-name: "warning";
     @material-color-full-name: @material-color-name;
     @material-color: @warning;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-danger@{extra} {
     @material-color-name: "danger";
     @material-color-full-name: @material-color-name;
     @material-color: @danger;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
 
@@ -109,7 +88,7 @@
       &-material-@{material-color-name}@{material-color-number}@{extra} {
         @material-color-full-name: "@{material-color-name}@{material-color-number}";
         @material-color: @@material-color-full-name;
-        @text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
+        @material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
         @func();
       }
 

less/_mixins-shared.less

@@ -0,0 +1,31 @@
+// Placeholder text
+.material-placeholder(@rules) {
+  &::-moz-placeholder { @rules(); } // Firefox
+  &:-ms-input-placeholder { @rules(); } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { @rules(); } // Safari and Chrome
+}
+
+// usage: .variations(~" .check", color, transparent);
+.variations(@extra, @property, @default) {
+  .generic-variations(@extra, @default, {
+    @{property}: @material-color;
+  });
+}
+
+.background-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+    background-color: @material-color;
+    & when (@material-color = @btn-default) {
+      color: @lightbg-text;
+    }
+    & when not (@material-color = @btn-default) {
+      color: @material-text-color;
+    }
+  });
+}
+
+.text-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+    color: @material-color;
+  });
+}

less/_mixins.less

@@ -1,25 +1,4 @@
-// usage: .variations(~" .check", color, transparent);
-.variations(@extra, @property, @default) {
-  .generic-variations(@extra, @default, {
-      @{property}: @material-color;
-    });
-}
-
-.background-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-      background-color: @material-color;
-      color: @text-color;
-      & when (@material-color = @btn-default) {
-        color: @lightbg-text;
-      }
-    });
-}
-
-.text-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-      color: @material-color;
-    });
-}
+@import '_mixins-shared.less';
 
 //
 // To use this mixin you should pass a function as final parameter to define
@@ -28,7 +7,7 @@
 // @material-color-name ---> "red", "green", "indigo" ...
 // @material-color-full-name ---> "red", "green-50", "indigo-400" ...
 // @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
-// @text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+// @material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
 //
 
 
@@ -41,63 +20,63 @@
     @material-color-name: "default";
     @material-color-full-name: @material-color-name;
     @material-color: @default;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-black@{extra} {
     @material-color-name: "black";
     @material-color-full-name: @material-color-name;
     @material-color: @black;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-white@{extra} {
     @material-color-name: "white";
     @material-color-full-name: @material-color-name;
     @material-color: @white;
-    @text-color: @lightbg-text;
+    @material-text-color: @lightbg-text;
     @func();
   }
   &-inverse@{extra} {
     @material-color-name: "inverse";
     @material-color-full-name: @material-color-name;
     @material-color: @inverse;
-    @text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
+    @material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
     @func();
   }
   &-primary@{extra} {
     @material-color-name: "primary";
     @material-color-full-name: @material-color-name;
     @material-color: @primary;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-success@{extra} {
     @material-color-name: "success";
     @material-color-full-name: @material-color-name;
     @material-color: @success;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-info@{extra} {
     @material-color-name: "info";
     @material-color-full-name: @material-color-name;
     @material-color: @info;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-warning@{extra} {
     @material-color-name: "warning";
     @material-color-full-name: @material-color-name;
     @material-color: @warning;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
   &-danger@{extra} {
     @material-color-name: "danger";
     @material-color-full-name: @material-color-name;
     @material-color: @danger;
-    @text-color: @darkbg-text;
+    @material-text-color: @darkbg-text;
     @func();
   }
 
@@ -110,7 +89,7 @@
       &-material-@{material-color-name}@{material-color-number}@{extra} {
         @material-color-full-name: "@{material-color-name}@{material-color-number}";
         @material-color: @@material-color-full-name;
-        @text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
+        @material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
         @func();
       }
 

less/_navbar.less

@@ -1,7 +1,7 @@
 .navbar {
   background-color: @primary;
-  border: 0;
-  border-radius: 0;
+  border: @zero;
+  border-radius: @zero;
 
   .navbar-brand {
     position: relative;
@@ -54,7 +54,7 @@
 
   // Darken the responsive nav toggle
   .navbar-toggle {
-    border: 0;
+    border: @zero;
     &:hover,
     &:focus {
       background-color: transparent;
@@ -96,7 +96,7 @@
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {
-          border: 0;
+          border: @zero;
           color: inherit;
         }
         .divider {
@@ -155,38 +155,61 @@
 
   .navbar-form {
     margin-top: 16px;
-    .form-control-wrapper .form-control, .form-control {
-      border-color: inherit;
-      color: inherit;
-    }
-    .form-control-wrapper {
-      .material-input:before, input:focus ~ .material-input:after {
+    .form-group {
+      margin: 0;
+      padding: 0;
+
+      .material-input:before,
+      &.is-focused .material-input:after {
         background-color: inherit;
       }
     }
+
+    .form-group .form-control,
+    .form-control {
+      border-color: inherit;
+      color: inherit;
+      padding: 0;
+      margin: 0;
+
+      // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
+      //---
+      //height: @input-height-base;
+      @bs-line-height-base: 1.428571429;
+      @bs-line-height-computed:    floor((@font-size-base * @bs-line-height-base)); // ~20px
+      height: (@bs-line-height-computed + 8px);
+      font-size: @font-size-base;
+      line-height: @bs-line-height-base;
+      //---
+    }
   }
 
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
   .generic-variations(~".navbar", @primary, {
     background-color: @material-color;
-    color: @text-color;
+    color: @material-text-color;
     // deeply defined to override welljumbo class without !impotant need
-    .navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
-      color: @text-color;
+    .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
+      color: @material-text-color;
     }
     .dropdown-menu {
+      border-radius: @dropdown-radius;
       li > a {
+        font-size: @dropdown-font-size;
+        padding: 13px 16px;
         &:hover,
         &:focus {
           color: @material-color;
+          background-color: @grey-200;
         }
       }
       .active > a {
         &:hover,
         &:focus {
-          color: @text-color;
+          color: @material-text-color;
         }
         background-color: @material-color;
-        color: @text-color;
+        color: @material-text-color;
       }
     }
   });

less/_plugin-dropdownjs.less

@@ -3,7 +3,7 @@
     top: 3px;
     font-size: 25px;
     position: absolute;
-    content: "\e894";
+    content: "\e8ac";
     font-family: "Material-Design-Icons";
     speak: none;
     font-style: normal;

less/_plugin-selectize.less

@@ -37,7 +37,7 @@
             border: 0px;
             background: transparent;
         }
-        &.floating-label-fix input {
+        &.label-floating-fix input {
             opacity: 0;
         }
         > div, > .item {

less/_radios.less

@@ -1,11 +1,40 @@
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
+
+.form-group-radio-variant(@placeholder-font-size, @line-height){
+  .radio {
+    label {
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  .form-group-radio-variant(@md-input-font-size-base, @md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    .form-group-radio-variant(@md-input-font-size-small, @md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    .form-group-radio-variant(@md-input-font-size-large, @md-input-line-height-large);
+  }     
+}
+
 .radio {
   label {
     cursor: pointer;
     padding-left: 45px;
     position: relative;
+    color: @radio-label-color;
+
     span {
       display: block;
       position: absolute;
@@ -14,7 +43,7 @@
       transition-duration: 0.2s;
     }
     .circle {
-      border: 2px solid @lightbg-text;
+      border: 2px solid @radio-border-color;
       height: 15px;
       width: 15px;
       border-radius: 100%;
@@ -72,7 +101,6 @@
   input[type=radio][disabled] ~ .check {
     background-color: @lightbg-text;
   }
-
 }
 
 @keyframes rippleOn {

less/_togglebutton.less

@@ -1,67 +1,96 @@
-.togglebutton {
-  vertical-align: middle;
-  &, label, input, .toggle {
-    user-select: none;
+.form-group-toggle-variant(@placeholder-font-size, @line-height){
+  .togglebutton {
+    label {
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+      font-weight: normal;
+    }
   }
-  label {
-    font-weight: 400;
-    cursor: pointer;
-    // Hide original checkbox
-    input[type=checkbox] {
-      opacity: 0;
-      width: 0;
-      height:0;
-    }
-    // Switch bg off and disabled
-    .toggle,
-    input[type=checkbox][disabled] + .toggle {
-      content: "";
-      display: inline-block;
-      width: 30px;
-      height: 15px;
-      background-color: rgba(80, 80, 80, 0.7);
-      border-radius: 15px;
-      margin-right: 10px;
-      transition: background 0.3s ease;
-      vertical-align: middle;
-    }
-    // Handle off
-    .toggle:after {
-      content: "";
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      background-color: #F1F1F1;
-      border-radius: 20px;
-      position: relative;
-      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
-      left: -5px;
-      top: -2px;
-      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
-    }
-    // Handle disabled
-    input[type=checkbox][disabled] + .toggle:after,
-    input[type=checkbox][disabled]:checked + .toggle:after{
-      background-color: #BDBDBD;
-    }
-    // Ripple off and disabled
-    input[type=checkbox] + .toggle:active:after,
-    input[type=checkbox][disabled] + .toggle:active:after {
-      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
-    }
-    input[type=checkbox]:checked + .toggle:after {
-      left: 15px;
-    }
+}
+
+.form-group {
+
+  // default label size/location
+  .form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    .form-group-toggle-variant(@md-input-font-size-small, @md-input-line-height-small);
   }
 
-  // Switch bg on
-  .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
-    background-color: fade(@material-color, 50%);
-  });
-  // Handle on
-  .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
-  // Ripple on
-  .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
-    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px fade(@material-color, 10%);
-  });
+  // lg label size/location
+  &.form-group-lg {
+    .form-group-toggle-variant(@md-input-font-size-large, @md-input-line-height-large);
+  }
+
+  .togglebutton {
+    vertical-align: middle;
+    &, label, input, .toggle {
+      user-select: none;
+    }
+    label {
+      cursor: pointer;
+      color: @togglebutton-label-color;
+
+      // Hide original checkbox
+      input[type=checkbox] {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+      // Switch bg off and disabled
+      .toggle,
+      input[type=checkbox][disabled] + .toggle {
+        content: "";
+        display: inline-block;
+        width: 30px;
+        height: 15px;
+        background-color: rgba(80, 80, 80, 0.7);
+        border-radius: 15px;
+        margin-right: 10px;
+        transition: background 0.3s ease;
+        vertical-align: middle;
+      }
+      // Handle off
+      .toggle:after {
+        content: "";
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-color: #F1F1F1;
+        border-radius: 20px;
+        position: relative;
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+        left: -5px;
+        top: -2px;
+        transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+      }
+      // Handle disabled
+      input[type=checkbox][disabled] + .toggle:after,
+      input[type=checkbox][disabled]:checked + .toggle:after {
+        background-color: #BDBDBD;
+      }
+      // Ripple off and disabled
+      input[type=checkbox] + .toggle:active:after,
+      input[type=checkbox][disabled] + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+      }
+      input[type=checkbox]:checked + .toggle:after {
+        left: 15px;
+      }
+    }
+
+    // Switch bg on
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
+    .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
+      background-color: fade(@material-color, 50%);
+    });
+    // Handle on
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
+    .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
+    // Ripple on
+    .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%);
+    });
+  }
 }

less/_variables.less

@@ -1,3 +1,6 @@
+// Material Global vars
+@zero: 0;
+
 // material icons path
 @material-font-path: "../fonts";
 
@@ -67,10 +70,74 @@
 @progress-warning: @warning;
 @progress-danger: @danger;
 
+@font-size-base: 14px;
+@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
+
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+
+
 // Global Material variables
 @material-border-radius: 2px;
+
+// --------------------
+// inputs
+@input-placeholder-color: #BDBDBD;
+@label-floating-size-ratio: 75 / 100;
+@help-block-size-ratio: 75 / 100;
 @input-underline-color: #D2D2D2;
 
+@md-input-font-size-base: 16px;
+@md-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
+@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
+
+// size when static or floating with focus i.e. 16px
+//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
+//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
+//@md-input-label-font-size-large: ceil((@label-floating-size-ratio * @md-input-font-size-large));
+
+//** Unit-less `line-height` for use in components like buttons.
+@md-input-line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@md-input-line-height-computed:    floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px
+@md-input-line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@md-input-line-height-small:         1.5;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+@md-input-padding-base-vertical:     8px - 1px; // was 6.
+@md-input-padding-base-horizontal:   0px; // was 12.
+@md-label-as-placeholder-shim-base:  0px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-base:           16px;
+
+@md-input-padding-large-vertical:    10px - 1px; // 10
+@md-input-padding-large-horizontal:  0px;  // 16
+@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-large:          16px;
+
+@md-input-padding-small-vertical:    4px - 1px; // 5
+@md-input-padding-small-horizontal:  0px; // 10
+@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-small:          12px;
+
+@md-input-padding-xs-vertical:       2px; // 1
+@md-input-padding-xs-horizontal:     0px; // 5
+
+@md-input-border-radius-base:        4px;
+@md-input-border-radius-large:       6px;
+@md-input-border-radius-small:       3px;
+
+
+//** Default `.form-control` height
+@md-input-height-base:              (@md-input-line-height-computed + (@md-input-padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+@md-input-height-large:             (ceil(@md-input-font-size-large * @md-input-line-height-large) + (@md-input-padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+@md-input-height-small:             (floor(@md-input-font-size-small * @md-input-line-height-small) + (@md-input-padding-small-vertical * 2) + 2);
+
+
+
+
 // Card
 @card-body-text: @lightbg-text;
 @card-body-background: #fff;
@@ -83,7 +150,21 @@
 @checkbox-size: 20px;
 @checkbox-animation-ripple: 500ms;
 @checkbox-animation-check: 0.3s;
+@checkbox-checked-color: #4caf50;
+@checkbox-label-color: rgba(0, 0, 0, .54);
+@checkbox-border-color: @checkbox-label-color;
 
 // Popovers and Popups
 @popover-background: rgba(101, 101, 101, 0.9);
 @popover-color: #ececec;
+
+// Dropdown Menu
+@dropdown-radius: 2px;
+@dropdown-font-size: 16px;
+
+// Toggle
+@togglebutton-label-color: @checkbox-label-color;
+
+// Radio:
+@radio-label-color: @checkbox-label-color;
+@radio-border-color: @checkbox-border-color;

less/_welljumbo.less

@@ -1,58 +1,11 @@
 body, .container, .container-fluid {
 
-  .well, .well:not([class^="well well-material-"]) {
-    &, .form-control {
-      color: @lightbg-text;
-    }
-    .floating-label {
-      color: #7e7e7e;
-    }
-    .form-control {
-      &::-webkit-input-placeholder {
-        color: #7e7e7e;
-      }
-      &::-moz-placeholder {
-        color: #7e7e7e;
-        opacity: 1;
-      }
-      &:-ms-input-placeholder {
-        color: #7e7e7e;
-      }
-    }
-    .option, .create {
-      color: @lightbg-text;
-    }
-  }
   .well.well-sm {
     padding: 10px;
   }
   .well.well-lg {
     padding: 26px;
   }
-
-  [class^="well well-material-"] {
-    &, .form-control, .floating-label {
-      color: @darkbg-text;
-    }
-    .form-control {
-      border-bottom-color: @darkbg-text;
-      &::-webkit-input-placeholder {
-        color: @darkbg-text;
-      }
-      &::-moz-placeholder {
-        color: @darkbg-text;
-        opacity: 1;
-      }
-      &:-ms-input-placeholder {
-        color: @darkbg-text;
-      }
-    }
-    // Rule to fix selectize plugin
-    .option, .create {
-      color: @lightbg-text;
-    }
-  }
-
   .well, .jumbotron {
 
     background-color: #fff;
@@ -64,7 +17,6 @@ body, .container, .container-fluid {
     p {
       font-weight: 300;
     }
-
     .variations(~"", background-color, #FFF);
   }
 }

less/material-fullpalette.less

@@ -1,2 +1,6 @@
-@import "material.less";
+@import "_colors.less";
+@import "_variables.less";
 @import "_mixins-fullpalette.less";
+@import "_icons-material-design.less";
+@import "_shadows.less";  // these are mixins only, and must be placed at the top before use (sass requiremnt)
+@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

less/material.less

@@ -1,142 +1,6 @@
-@import "_variables.less";
 @import "_colors.less";
+@import "_variables.less";
 @import "_mixins.less";
 @import "_icons-material-design.less";
-
-body {
-  background-color: @body-bg;
-  &.inverse {
-    background: #333333;
-    &, .form-control {
-      color: @darkbg-text;
-    }
-    .modal,
-    .panel-default,
-    .card {
-      &,
-      .form-control {
-        background-color: initial;
-        color: initial;
-      }
-    }
-
-  }
-}
-
-
-body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
-  font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 300;
-}
-
-h5, h6{
-  font-weight: 400;
-}
-
-a, a:hover, a:focus {
-  color: @primary;
-}
-
-// Well and Jumbotrons
-@import "_welljumbo.less";
-
-// Buttons
-@import "_buttons.less";
-
-// Checkboxes
-@import "_checkboxes.less";
-
-// Toggle buttons
-@import "_togglebutton.less";
-
-// Radios
-@import "_radios.less";
-
-// Text inputs
-@import "_inputs.less";
-
-legend {
-  border-bottom: 0;
-}
-
-// Lists
-@import "_lists.less";
-
-// Navbar
-@import "_navbar.less";
-
-.dropdown-menu {
-  border: 0;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-  .divider {
-    background-color: rgba(229, 229, 229, 0.12);
-  }
-  li {
-    overflow: hidden;
-    position: relative;
-    a:hover {
-      background-color: transparent;
-      color: @primary;
-    }
-  }
-  .variations(~" li a:hover", color, @primary);
-}
-
-// Alerts
-@import "_alerts.less";
-
-// Progress bar
-@import "_progress.less";
-
-// Typography
-.text-warning {
-  color: @btn-warning;
-}
-.text-primary {
-  color: @btn-primary;
-}
-.text-danger {
-  color: @btn-danger;
-}
-.text-success {
-  color: @btn-success;
-}
-.text-info {
-  color: @btn-info;
-}
-
-@import "_tabs.less";
-
-@import "_popups.less";
-
-@import "_icons.less";
-
-@import "_cards.less";
-
-@import "_dialogs.less";
-
-@import "_labels.less";
-
-@import "_panels.less";
-
-@import "_dividers.less";
-
-// Prevent highlight on mobile
-* {
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  -webkit-tap-highlight-color: transparent;
-  &:focus {
-    outline: 0;
-  }
-}
-
-
-// External plugins
-@import "_plugin-snackbarjs.less";
-@import "_plugin-nouislider.less";
-@import "_plugin-selectize.less";
-@import "_plugin-dropdownjs.less";
-
-// Material shadows
-// Place them on bottom of stylesheet to increase the importance of it and override other same-specificity selectors
-@import "_shadows.less";
+@import "_shadows.less";  // these are mixins only, and must be placed at the top before use (sass requiremnt)
+@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

less/roboto.less

@@ -1,3 +1,6 @@
+@import "_colors.less";
+@import "_variables.less";
+
 @font-face {
   font-family: 'RobotoDraft';
   font-style: normal;
@@ -6,8 +9,8 @@
   src: local('RobotoDraft'),
        local('RobotoDraft-Regular'),
        local('Roboto-Regular'),
-       url(../fonts/RobotoDraftRegular.woff2) format('woff2'),
-       url(../fonts/RobotoDraftRegular.woff) format('woff');
+       url('@{material-font-path}/RobotoDraftRegular.woff2') format('woff2'),
+       url('@{material-font-path}/RobotoDraftRegular.woff') format('woff');
 }
 
 @font-face {
@@ -18,8 +21,8 @@
   src: local('RobotoDraft Medium'),
        local('RobotoDraft-Medium'),
        local('Roboto-Medium'),
-       url(../fonts/RobotoDraftMedium.woff2) format('woff2'),
-       url(../fonts/RobotoDraftMedium.woff) format('woff');
+       url('@{material-font-path}/RobotoDraftMedium.woff2') format('woff2'),
+       url('@{material-font-path}/RobotoDraftMedium.woff') format('woff');
 }
 
 @font-face {
@@ -30,8 +33,8 @@
   src: local('RobotoDraft Bold'),
        local('RobotoDraft-Bold'),
        local('Roboto-Bold'),
-       url(../fonts/RobotoDraftBold.woff2) format('woff2'),
-       url(../fonts/RobotoDraftBold.woff) format('woff');
+       url('@{material-font-path}/RobotoDraftBold.woff2') format('woff2'),
+       url('@{material-font-path}/RobotoDraftBold.woff') format('woff');
 }
 
 @font-face {
@@ -42,6 +45,6 @@
   src: local('RobotoDraft Italic'),
        local('RobotoDraft-Italic'),
        local('Roboto-Italic'),
-       url(../fonts/RobotoDraftItalic.woff2) format('woff2'),
-       url(../fonts/RobotoDraftItalic.woff) format('woff');
+       url('@{material-font-path}/RobotoDraftItalic.woff2') format('woff2'),
+       url('@{material-font-path}/RobotoDraftItalic.woff') format('woff');
 }

meteor/package.js

@@ -14,15 +14,17 @@ Package.describe({
 });
 
 Package.onUse(function (api) {
-  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.versionsFrom('METEOR@1.2');
   api.use('twbs:bootstrap@3.3.1');
   api.use('jquery');
-  api.addFiles([
+  api.addAssets([
     // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
     'dist/fonts/Material-Design-Icons.eot',  // IE8 or older
     'dist/fonts/Material-Design-Icons.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
     'dist/fonts/Material-Design-Icons.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
     'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers
+  ], where);
+  api.addFiles([
     'dist/css/material.css',
     'dist/css/ripples.css',
     'dist/js/material.js',

meteor/test.js

@@ -44,60 +44,63 @@ var packageName;  // there seems to be no official way of finding out the name o
 
 var plugins = ['affix', 'alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'popover', 'scrollspy', 'tab', 'tooltip'];
 
-// test plugins
-plugins.forEach(function (plugin) {
-  Tinytest.add('Plugin - ' + plugin, function (test) {
-    test.instanceOf($(document.body)[plugin], Function, 'instantiated correctly');
-  });
-});
-
-// visual check
-plugins.forEach(function (plugin) {
-
-  Tinytest.addAsync('Visual check - ' + plugin, function (test, done) {
-    var bootstrapDropZone = document.createElement('div');
-    document.body.appendChild(bootstrapDropZone);
-
-
-    HTTP.get('http://rawgit.com/twbs/bootstrap/master/js/tests/visual/' + plugin + '.html', function callback(error, result) {
-      if (error) {
-        test.fail('Error getting the test file. Do we have an Internet connection to rawgit.com?');
-      } else {
-        // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
-        bootstrapDropZone.innerHTML = result.content.match(/<div[^]+<\/div>/);
-        test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
-      }
-
-      done();
+document.addEventListener('DOMContentLoaded', function() {
+    // test plugins
+    plugins.forEach(function (plugin) {
+      Tinytest.add('Plugin - ' + plugin, function (test) {
+        test.instanceOf($(document.body)[plugin], Function, 'instantiated correctly');
+      });
     });
 
-  });
-
-});
-
-
-Tinytest.addAsync('Visual check - Material Design', function (test, done) {
-  var bootstrapDropZone = document.createElement('div');
-  document.body.appendChild(bootstrapDropZone);
-
-  HTTP.get('http://rawgit.com/FezVrasta/bootstrap-material-design/master/bootstrap-elements.html', function callback(error, result) {
-    if (error) {
-      test.fail('Error getting the FezVrasta test file. Do we have an Internet connection to rawgit.com?');
-    } else {
-      // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
-      bootstrapDropZone.innerHTML = result.content.match(/<meta name="viewport"[^]+<script src=/);
-      test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
-      // only does anything after loading the 'dropdown' plugin test
-      $('[data-toggle="dropdown"]').dropdown();
-      // only does anything after loading the 'popover' plugin test
-      $('[data-toggle="popover"]').popover();
-      // only does anything after loading the 'tooltip' plugin test
-      $('[data-toggle="tooltip"]').tooltip();
-      // don't initialize the modals because that messes up the Tinytest runner HTML
-      $.material.init();
-    }
-
-    done();
-  });
+    // visual check
+    plugins.forEach(function (plugin) {
+
+      Tinytest.addAsync('Visual check - ' + plugin, function (test, done) {
+        var bootstrapDropZone = document.createElement('div');
+        document.body.appendChild(bootstrapDropZone);
+
+
+        HTTP.get('http://rawgit.com/twbs/bootstrap/master/js/tests/visual/' + plugin + '.html', function callback(error, result) {
+          if (error) {
+            test.fail('Error getting the test file. Do we have an Internet connection to rawgit.com?');
+          } else {
+            // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
+            bootstrapDropZone.innerHTML = result.content.match(/<div[^]+<\/div>/);
+            test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
+          }
+
+          done();
+        });
+
+      });
+
+    });
+
+
+    Tinytest.addAsync('Visual check - Material Design', function (test, done) {
+      var bootstrapDropZone = document.createElement('div');
+      document.body.appendChild(bootstrapDropZone);
+
+      HTTP.get('http://rawgit.com/FezVrasta/bootstrap-material-design/master/bootstrap-elements.html', function callback(error, result) {
+        if (error) {
+          test.fail('Error getting the FezVrasta test file. Do we have an Internet connection to rawgit.com?');
+        } else {
+          // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
+          bootstrapDropZone.innerHTML = result.content.match(/<meta name="viewport"[^]+<script src=/);
+          test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
+          // only does anything after loading the 'dropdown' plugin test
+          $('[data-toggle="dropdown"]').dropdown();
+          // only does anything after loading the 'popover' plugin test
+          $('[data-toggle="popover"]').popover();
+          // only does anything after loading the 'tooltip' plugin test
+          $('[data-toggle="tooltip"]').tooltip();
+          // don't initialize the modals because that messes up the Tinytest runner HTML
+          $.material.init();
+        }
+
+        done();
+      });
+
+    });
 
 });

package.js

@@ -14,15 +14,17 @@ Package.describe({
 });
 
 Package.onUse(function (api) {
-  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.versionsFrom('METEOR@1.2');
   api.use('twbs:bootstrap@3.3.1');
   api.use('jquery');
-  api.addFiles([
+  api.addAssets([
     // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
     'dist/fonts/Material-Design-Icons.eot',  // IE8 or older
     'dist/fonts/Material-Design-Icons.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
     'dist/fonts/Material-Design-Icons.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
     'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers
+  ], where);
+  api.addFiles([
     'dist/css/material.css',
     'dist/css/ripples.css',
     'dist/js/material.js',

package.json

@@ -1,8 +1,8 @@
 {
   "name": "bootstrap-material-design",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Material Design for Bootstrap 3",
-  "main": "index.js",
+  "main": "scripts/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -31,7 +31,6 @@
     "jquery": ">=1.9.1"
   },
   "devDependencies": {
-    "bootstrap": ">=3.0",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^1.0.1",
     "grunt-contrib-clean": "^0.6.0",
@@ -39,15 +38,17 @@
     "grunt-contrib-copy": "^0.6.0",
     "grunt-contrib-jasmine": "^0.8.0",
     "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-less": "^0.11.4",
+    "grunt-contrib-less": "^1.1.0",
     "grunt-contrib-sass": "^0.8.1",
     "grunt-contrib-uglify": "^0.6.0",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-bootlint": "latest",
+    "grunt-html": "latest",
     "grunt-csswring": "^1.1.0",
     "grunt-dependency-installer": "^0.2.0",
     "grunt-exec": "^0.4.6",
+    "grunt-less-to-sass": "latest",
     "grunt-newer": "^0.7.0",
-    "jquery": ">=1.9.1",
     "jshint-stylish": "^1.0.0",
     "load-grunt-tasks": "^0.6.0",
     "spacejam": "^1.1.1"

sass/_alerts.scss

@@ -1,96 +1,19 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .alert {
     border: 0px;
     border-radius: 0;
-    a, .alert-link {
-        color: #FFFFFF;
+
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
+    @include alert-variations(unquote(""), $darkbg-text);
+
+    &-info, &-danger, &-warning, &-success {
+        color: $darkbg-text;
+    }
+
+    &-default {
+        a, .alert-link {
+            color: $lightbg-text;
+        }
     }
 }
-
-
-// Alert buttons
-// --------------------------------------------------
-
-.alert-default {
-  @include alert-variant(#FFFFFF);
-    a, .alert-link {
-        color: #000000;
-    }
-}
-
-.alert-primary {
-  color: #FFFFFF;
-  @include alert-variant($primary);
-}
-// Success appears as green
-.alert-success {
-  color: #FFFFFF;
-  @include alert-variant($success);
-}
-// Info appears as blue-green
-.alert-info {
-  color: #FFFFFF;
-  @include alert-variant($info);
-}
-// Warning appears as orange
-.alert-warning {
-  color: #FFFFFF;
-  @include alert-variant($warning);
-}
-// Danger and error appear as red
-.alert-danger {
-  @include alert-variant($danger);
-}
-
-// Material shades
-.alert-material-red {
-    @include alert-variant($red)
-}
-.alert-material-pink {
-    @include alert-variant($pink);
-}
-.alert-material-purple {
-    @include alert-variant($purple);
-}
-.alert-material-deeppurple {
-    @include alert-variant($deeppurple);
-}
-.alert-material-indigo {
-    @include alert-variant($indigo);
-}
-.alert-material-lightblue {
-    @include alert-variant($lightblue);
-}
-.alert-material-cyan {
-    @include alert-variant($cyan);
-}
-.alert-material-teal {
-    @include alert-variant($teal);
-}
-.alert-material-lightgreen {
-    @include alert-variant($lightgreen);
-}
-.alert-material-lime {
-    @include alert-variant($lime);
-}
-.alert-material-lightyellow {
-    @include alert-variant($lightyellow);
-}
-.alert-material-orange {
-    @include alert-variant($orange);
-}
-.alert-material-deeporange {
-    @include alert-variant($deeporange);
-}
-.alert-material-grey {
-    @include alert-variant($grey);
-}
-.alert-material-bluegrey {
-    @include alert-variant($bluegrey);
-}
-.alert-material-brown {
-    @include alert-variant($brown);
-}
-.alert-material-lightgrey {
-    @include alert-variant($lightgrey);
-}
-

sass/_animations.scss

@@ -1,16 +0,0 @@
-// main: _material.scss
-
-@keyframes input-highlight {
-    0% {
-        left: 20%;
-        width: 20%;
-    }
-    99% {
-        width: 0;
-        left: 0;
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}

sass/_buttons.scss

@@ -1,187 +1,145 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 @mixin btn-shadow(){
-    @extend .shadow-z-2;
-    transition: box-shadow transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    &:active:not(.btn-link) {
-        @extend .shadow-z-3;
-    }
-
-    &:hover {
-        @extend .shadow-z-5;
-    }
-
+  @include shadow-z-1();
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  &:active:not(.btn-link) {
+    @include shadow-z-1-hover();
+  }
 }
 
 .btn {
-    position: relative;
-    padding: 8px 30px;
-    border: 0;
-    margin: 10px 1px;
+  position: relative;
+  padding: 8px 30px;
+  border: 0;
+  margin: 10px 1px;
+  cursor: pointer;
+  border-radius: 2px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: $darkbg-text;
 
-    cursor: pointer;
-    border-radius: 4px;
-    text-transform: uppercase;
-    text-decoration: none;
-    color: $darkbg-text;
+  &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
+    @include shadow-z-1();
+  }
+  &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
+    @include shadow-z-1-hover();
+  }
+  transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none !important;
+
+
+  @include variations(unquote(".btn-flat:not(.btn-link)"), color, $lightbg-text);
+
+  @include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default);
+
+  // BTN hover effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
+  @include button-variations(unquote(":hover:not(.btn-link):not(.btn-flat)"), $btn-default, 4%);
+  // BTN active effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
+  @include button-variations(unquote(":active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%);
+  // BTN .active effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
+  @include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%);
+  // BTN flat hover effect
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
+  @include bg-color-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, (20/100));
 
-    &:hover {
-        color: $darkbg-text;
-    }
-    &:hover:not(.btn-link) {
-        @extend .shadow-z-2-hover;
-    }
-    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    &:active:not(.btn-link) {
-        @extend .shadow-z-3;
-    }
-    outline: none !important;
-}
-// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
-.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
-    color: $lightbg-text;
-    &:hover {
-        color: $lightbg-text;
-    }
-}
-.btn:not([class^="btn btn-"]), .btn-default {
-    &:hover {
-        background-color: rgba(255,255,255,0.5);
-    }
 }
 
-.btn-raised {
+.btn,
+.input-group-btn .btn {
+  &.btn-flat {
+    background: none;
+    box-shadow: none;
+    font-weight: 500;
+    &:disabled {
+      color: $text-disabled !important;
+    }
+  }
+
+  // Size variations
+  &.btn-sm {
+    padding: 5px 20px;
+  }
+  &.btn-xs {
+    padding: 4px 15px;
+    font-size: 10px;
+  }
+
+  &.btn-raised {
     @include btn-shadow();
-}
+  }
 
-.open > .dropdown-toggle.btn {
-    //.variations(#{""}, background-color, $btn-default);
-}
-.btn-flat {
-    box-shadow: none !important;
-    &.btn-default:hover {
-        background: none;
-    }
-}
-
-.btn-group, .btn-group-vertical {
-    position: relative;
-    border-radius: 4px;
-    margin: 10px 1px;
-
-    @include btn-shadow();
-    &.open .dropdown-toggle {
-        box-shadow: none;
-    }
-    &.btn-group-raised {
-        @include btn-shadow();
-    }
-    .btn, .btn:active, .btn-group {
-        box-shadow: none !important;
-        margin: 0;
-    }
-    .btn:active .caret { margin-left: -1px; }
-}
-.btn-group-flat {
-    box-shadow: none !important;
-}
-
-// Floating Action Button (FAB)
-
-.btn-fab {
+  &.btn-fab {
     margin: 0;
     padding: 15px;
     font-size: 26px;
     width: 56px;
     height: 56px;
+    &, &:hover, &:active {
+      @include variations(unquote(""), background-color, transparent);
+    }
     &, &:hover {
-        //.variations(#{""}, background-color, transparent);
+      @include shadow-z-1();
     }
-    &, .ripple-wrapper {
-        border-radius: 100%;
+    &:active {
+      @include shadow-z-1-hover();
     }
-    &.btn-mini {
-        width: 40px;
-        height: 40px;
-        padding: 13px;
-        font-size: 15px;
+    &,
+    .ripple-wrapper {
+      border-radius: 100%;
     }
+    &.btn-fab-mini {
+      width: 40px;
+      height: 40px;
+      padding: 13px 0;
+      font-size: 15px;
+    }
+    i {
+      position: relative;
+      top: -5px;
+      margin: 0 auto;
+    }
+  }
 }
 
-// Alert buttons
-// --------------------------------------------------
+// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default)
+.btn-link, .btn:not([class*="btn-"]), .btn-default {
+  color: $lightbg-text;
+  &:hover {
+    color: $lightbg-text;
+  }
+}
+.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) {
+  &:hover, &.active {
+    background-color: rgba(255,255,255,0.5);
+  }
+}
+.open > .dropdown-toggle.btn {
+  @include variations(unquote(""), background-color, $btn-default);
+}
+.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
+  margin-left: 0;
+}
+.btn-group, .btn-group-vertical {
+  position: relative;
+  border-radius: 2px;
+  margin: 10px 1px;
 
-.btn-default {
-  @include button-variant($btn-default);
+  @include btn-shadow();
+  &.open .dropdown-toggle {
+    box-shadow: none;
+  }
+  &.btn-group-raised {
+    @include btn-shadow();
+  }
+  .btn, .btn:active, .btn-group {
+    box-shadow: none !important;
+    margin: 0;
+  }
 }
-.btn-primary {
-  @include button-variant($primary);
+.btn-group-flat {
+  box-shadow: none !important;
 }
-// Success appears as green
-.btn-success {
-  @include button-variant($success);
-}
-// Info appears as blue-green
-.btn-info {
-  @include button-variant($info);
-}
-// Warning appears as orange
-.btn-warning {
-  @include button-variant($warning);
-}
-// Danger and error appear as red
-.btn-danger {
-  @include button-variant($danger);
-}
-
-// Material shades
-.btn-material-red {
-    @include button-variant($red)
-}
-.btn-material-pink {
-    @include button-variant($pink);
-}
-.btn-material-purple {
-    @include button-variant($purple);
-}
-.btn-material-deeppurple {
-    @include button-variant($deeppurple);
-}
-.btn-material-indigo {
-    @include button-variant($indigo);
-}
-.btn-material-lightblue {
-    @include button-variant($lightblue);
-}
-.btn-material-cyan {
-    @include button-variant($cyan);
-}
-.btn-material-teal {
-    @include button-variant($teal);
-}
-.btn-material-lightgreen {
-    @include button-variant($lightgreen);
-}
-.btn-material-lime {
-    @include button-variant($lime);
-}
-.btn-material-lightyellow {
-    @include button-variant($lightyellow);
-}
-.btn-material-orange {
-    @include button-variant($orange);
-}
-.btn-material-deeporange {
-    @include button-variant($deeporange);
-}
-.btn-material-grey {
-    @include button-variant($grey);
-}
-.btn-material-bluegrey {
-    @include button-variant($bluegrey);
-}
-.btn-material-brown {
-    @include button-variant($brown);
-}
-.btn-material-lightgrey {
-    @include button-variant($lightgrey);
-}
-

sass/_cards.scss

@@ -1,130 +1,68 @@
-//
-// Cards
-// http://www.google.com/design/spec/components/cards.html#cards-usage
-//
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .card {
-  @extend .shadow-z-1;
 
-  border-radius: 2px;
-  margin-bottom: 20px; // Same as panel margins
+    /***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
 
-  h1, h2, h3, h4, h5, h6 {
-    font-weight: 100;
-    margin: 10px 0;
-  }
-
-  .card-body {
-    padding: 15px;
-  }
-
-  .card-actions {
-    padding: 15px;
-    text-transform: uppercase;
-    .main { font-weight: bold; }
-    a {
-      font-size: 15px;
-      margin: 0 15px 0 0;
-      &:hover {
-        text-decoration: none;
-      }
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    .card-height-indicator {
+        margin-top: 100%;
+    }
+    .card-content {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
     }
 
-  }
+    /**************************************************************************/
 
-  img {
-    max-width:100%;
-    max-height:100%;
-  }
 
-  .card-footer {
-    padding: 15px;
-    border-top: 1px solid;
-    border-color: $lightgrey;
+    border-radius: 2px;
+    color: $card-body-text;
+    background: $card-body-background;
 
-    .icon {
-      font-size: 25px;
-      transition: ease transform 0.5s;
-      &:hover { text-decoration: none; transform: transform3d(0, 0, 0, -1px)}
+    @include shadow-z-2();
+
+    .card-image {
+        height: 60%;
+        position: relative;
+        overflow: hidden;
+        img {
+            width: 100%;
+            height: 100%;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            pointer-events: none;
+        }
+        .card-image-headline {
+            position: absolute;
+            bottom: 16px;
+            left: 18px;
+            color: $card-image-headline;
+            font-size: 2em;
+        }
     }
-  }
 
-}
+    .card-body {
+        height: 30%;
+        padding: 18px;
+    }
 
-// Alert buttons
-// --------------------------------------------------
-
-.card-default {
-  @include card-variant($btn-default, #000, darken($btn-default, 10%));
-}
-.card-primary {
-  @include card-variant($primary, #FFFFFF, $lightgrey);
-}
-// Success appears as green
-.card-success {
-  @include card-variant($success, #FFFFFF, darken($success, 10%));
-}
-// Info appears as blue-green
-.card-info {
-  @include card-variant($info, #FFFFFF, darken($info, 10%));
-}
-// Warning appears as orange
-.card-warning {
-  @include card-variant($warning, #FFFFFF, lighten($warning, 10%));
-}
-// Danger and error appear as red
-.card-danger {
-  @include card-variant($danger, #FFFFFF, darken($danger, 10%));
-}
-
-// Material shades
-.card-material-red {
-    @include card-variant($red, #FFFFFF, lighten($red, 10%))
-}
-.card-material-pink {
-    @include card-variant($pink, #FFFFFF, darken($pink, 10%));
-}
-.card-material-purple {
-    @include card-variant($purple, #FFFFFF, darken($purple, 10%));
-}
-.card-material-deeppurple {
-    @include card-variant($deeppurple, #FFFFFF, lighten($deeppurple, 10%));
-}
-.card-material-indigo {
-    @include card-variant($indigo, #FFFFFF, lighten($indigo, 10%));
-}
-.card-material-lightblue {
-    @include card-variant($lightblue, #fff, darken($lightblue, 10%));
-}
-.card-material-cyan {
-    @include card-variant($cyan, #FFFFFF, darken($cyan, 10%));
-}
-.card-material-teal {
-    @include card-variant($teal, #FFFFFF, darken($teal, 10%));
-}
-.card-material-lightgreen {
-    @include card-variant($lightgreen, #FFFFFF, darken($lightgreen, 10%));
-}
-.card-material-lime {
-    @include card-variant($lime, #FFFFFF, darken($lime, 10%));
-}
-.card-material-lightyellow {
-    @include card-variant($lightyellow, darken($lightyellow, 60%), darken($lightyellow, 10%));
-}
-.card-material-orange {
-    @include card-variant($orange, #FFFFFF, darken($orange, 10%));
-}
-.card-material-deeporange {
-    @include card-variant($deeporange, #FFFFFF, darken($deeporange, 10%));
-}
-.card-material-grey {
-    @include card-variant($grey, #FFFFFF, darken($grey, 10%));
-}
-.card-material-bluegrey {
-    @include card-variant($bluegrey, #FFFFFF, darken($bluegrey, 10%));
-}
-.card-material-brown {
-    @include card-variant($brown, #FFFFFF, lighten($brown, 10%));
-}
-.card-material-lightgrey {
-    @include card-variant($lightgrey, darken(#FFFFFF, 10%), darken($lightgrey, 10%));
+    .card-footer {
+        height: 10%;
+        padding: 18px;
+        button {
+            margin: 0 !important;
+            position: relative;
+            bottom: 25px;
+            width: auto;
+            &:first-child {
+                left: -15px;
+            }
+        }
+    }
 }

sass/_checkboxes.scss

@@ -1,189 +1,270 @@
-.form-horizontal .checkbox {
-    padding-top: 15px;
-}
-.checkbox {
-    transform: rotate(0deg);
-    label {
-        cursor: pointer;
-        padding-left: 45px;
-        position: relative;
-        span {
-            display: block;
-            position: absolute;
-            left: 0px;
-            transition-duration: 0.2s;
-        }
-        .check:after {
-            display: block;
-            position: absolute;
-            content: "";
-            background-color: $lightbg-text;
-            left: -5px;
-            top: -15px;
-            height: 50px;
-            width: 50px;
-            border-radius: 100%;
-            z-index: 1;
-            opacity: 0;
-            margin: 0;
-        }
-        .check:before {
-            display: block;
-            content: "";
-            border: 2px solid $lightbg-text;
-            height: 20px;
-            width: 20px;
-            transition-delay: 0.2s;
-        }
-    }
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
-    // Variations
-    //.variations(#{" .check"}, color, $success);
+// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
+.form-horizontal .checkbox {
+  padding-top: 20px;
+}
+
+@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
+  .checkbox {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-checkbox-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-checkbox-variant($md-input-font-size-large, $md-input-line-height-large);
+  }
+
+  .checkbox {
+    label {
+      cursor: pointer;
+      padding-left: 0; // Reset for Bootstrap rule
+      color: $checkbox-label-color;
+    }
 
     // Hide native checkbox
-    input[type=checkbox] { opacity: 0; }
+    input[type=checkbox] {
+      opacity: 0;
+      position: absolute;
+      margin: 0;
+      z-index: -1;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      left: 0;
+      pointer-events: none;
+    }
 
-    input[type=checkbox] ~ .check:before {
+    .checkbox-material {
+      vertical-align: middle;
+      position: relative;
+      top: 3px;
+      &:before {  // FIXME: document why this is necessary (doesn't seem to be on chrome)
+        display: block;
         position: absolute;
-        top: 2px;
-        left: 11px;
-        width: 18px;
-        height: 18px;
-        border: solid 2px;
-        border-color: #5a5a5a;
-        animation: uncheck 300ms ease-out forwards;
+        left: 0;
+        content: "";
+        background-color: rgba(0,0,0,.84);
+        height: $checkbox-size;
+        width: $checkbox-size;
+        border-radius: 100%;
+        z-index: 1;
+        opacity: 0;
+        margin: 0;
+        transform: scale3d(2.3, 2.3, 1);
+      }
+
+      .check {
+        position: relative;
+        display: inline-block;
+        width: $checkbox-size;
+        height: $checkbox-size;
+        border: 2px solid $checkbox-border-color;
+        border-radius: 2px;
+        overflow: hidden;
+        z-index: 1;
+      }
+      .check:before {
+        position: absolute;
+        content: "";
+        transform: rotate(45deg);
+        display: block;
+        margin-top: -4px;
+        margin-left: 6px;
+        width: 0;
+        height: 0;
+        box-shadow:
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0,
+          0 0 0 0 inset;
+        animation: checkbox-off $checkbox-animation-check forwards;
+      }
     }
 
-    input[type=checkbox]:focus ~ .check:after {
-        opacity: 0.2;
+    input[type=checkbox]:focus + .checkbox-material .check:after {
+      opacity: 0.2;
+    }
+    input[type=checkbox]:checked + .checkbox-material .check:before {
+      box-shadow:
+        0 0 0 10px,
+        10px -10px 0 10px,
+        32px 0px 0 20px,
+        0px 32px 0 20px,
+        -5px 5px 0 10px,
+        20px -12px 0 11px;
+      animation: checkbox-on $checkbox-animation-check forwards;
     }
 
-    input[type=checkbox]:checked ~ .check:before {
-        animation: check 300ms ease-out forwards;
+    input[type=checkbox]:not(:checked) + .checkbox-material:before {
+      animation: rippleOff $checkbox-animation-ripple;
+    }
+    input[type=checkbox]:checked + .checkbox-material:before {
+      animation: rippleOn $checkbox-animation-ripple;
     }
 
     // Ripple effect on click
-    input[type=checkbox]:not(:checked) ~ .check:after {
-        animation: rippleOff 500ms linear forwards;
+    input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
+      animation: rippleOff $checkbox-animation-ripple forwards;
     }
-    input[type=checkbox]:checked ~ .check:after {
-        animation: rippleOn 500ms linear forwards;
-    }
-
-    // Make animate quickly when not hover
-    &:not(:hover) input[type=checkbox] ~ .check {
-        &:before, &:after {
-            animation-duration: 1ms;
-        }
+    input[type=checkbox]:checked + .checkbox-material .check:after {
+      animation: rippleOn $checkbox-animation-ripple forwards;
     }
 
     // Style for disabled inputs
-    input[type=checkbox][disabled]:not(:checked) ~ .check:before {
-        opacity: 0.5;
+    fieldset[disabled] &,
+    fieldset[disabled] & input[type=checkbox],
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
+    input[type=checkbox][disabled] + .circle {
+      opacity: 0.5;
     }
-    input[type=checkbox][disabled] ~ .check:after {
-        background-color: $lightbg-text;
-        transform: rotate(-45deg);
+    input[type=checkbox][disabled] + .checkbox-material .check:after {
+      background-color: $lightbg-text;
+      transform: rotate(-45deg);
     }
 
-    //.variations(#{" input[type=checkbox]:checked ~ .check:after"}, background-color, $success);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $checkbox-checked-color);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $checkbox-checked-color);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $checkbox-checked-color);
+  }
 }
 
-@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;
-    }
+@keyframes checkbox-on {
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px;
+  }
+  50% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px 2px 0 11px;
+  }
+  100% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px;
+  }
 }
+@keyframes checkbox-off {
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px,
+      0 0 0 0 inset;
+  }
 
-@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;
-    }
+  25% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px,
+      0 0 0 0 inset;
+  }
+  50% {
+    transform: rotate(45deg);
+    margin-top: -4px;
+    margin-left: 6px;
+    width: 0px;
+    height: 0px;
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px,
+      0 0 0 0 inset;
+  }
+  51% {
+    transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 10px inset;
+  }
+  100% {
+    transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 0px inset;
+  }
 }
-
 @keyframes rippleOn {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }
-
 @keyframes rippleOff {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }

sass/_colors.scss

@@ -0,0 +1,362 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+/*
+
+To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
+
+Then, run this script to get the list@mixin (function(){
+  var colors = {}, main = {};
+  $(".color-group")@mixin each(function(){
+    var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
+    colors[color] = {};
+
+    $(this)@mixin find(".color").not(".main-color").each(function(){
+      var shade = $(this).find(".shade").text().trim(),
+          hex   = $(this).find(".hex").text().trim();
+
+      colors[color][shade] = hex;
+    });
+    main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
+
+  });
+  var LESS = "";
+  $@mixin each(colors, function(name, shades){
+    LESS += "\n\n";
+    $@mixin each(shades, function(shade, hex){
+      LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default;
+    });
+    if (main[name]) {
+      LESS += "$" + name + ": " + main[name] + ";\n" !default;
+    }
+  });
+  console.log(LESS);
+})();
+
+
+*/
+$red-50: #ffebee !default;
+$red-100: #ffcdd2 !default;
+$red-200: #ef9a9a !default;
+$red-300: #e57373 !default;
+$red-400: #ef5350 !default;
+$red-500: #f44336 !default;
+$red-600: #e53935 !default;
+$red-700: #d32f2f !default;
+$red-800: #c62828 !default;
+$red-900: #b71c1c !default;
+$red-A100: #ff8a80 !default;
+$red-A200: #ff5252 !default;
+$red-A400: #ff1744 !default;
+$red-A700: #d50000 !default;
+$red: $red-500 !default;
+
+
+$pink-50: #fce4ec !default;
+$pink-100: #f8bbd0 !default;
+$pink-200: #f48fb1 !default;
+$pink-300: #f06292 !default;
+$pink-400: #ec407a !default;
+$pink-500: #e91e63 !default;
+$pink-600: #d81b60 !default;
+$pink-700: #c2185b !default;
+$pink-800: #ad1457 !default;
+$pink-900: #880e4f !default;
+$pink-A100: #ff80ab !default;
+$pink-A200: #ff4081 !default;
+$pink-A400: #f50057 !default;
+$pink-A700: #c51162 !default;
+$pink: $pink-500 !default;
+
+
+$purple-50: #f3e5f5 !default;
+$purple-100: #e1bee7 !default;
+$purple-200: #ce93d8 !default;
+$purple-300: #ba68c8 !default;
+$purple-400: #ab47bc !default;
+$purple-500: #9c27b0 !default;
+$purple-600: #8e24aa !default;
+$purple-700: #7b1fa2 !default;
+$purple-800: #6a1b9a !default;
+$purple-900: #4a148c !default;
+$purple-A100: #ea80fc !default;
+$purple-A200: #e040fb !default;
+$purple-A400: #d500f9 !default;
+$purple-A700: #aa00ff !default;
+$purple: $purple-500 !default;
+
+
+$deep-purple-50: #ede7f6 !default;
+$deep-purple-100: #d1c4e9 !default;
+$deep-purple-200: #b39ddb !default;
+$deep-purple-300: #9575cd !default;
+$deep-purple-400: #7e57c2 !default;
+$deep-purple-500: #673ab7 !default;
+$deep-purple-600: #5e35b1 !default;
+$deep-purple-700: #512da8 !default;
+$deep-purple-800: #4527a0 !default;
+$deep-purple-900: #311b92 !default;
+$deep-purple-A100: #b388ff !default;
+$deep-purple-A200: #7c4dff !default;
+$deep-purple-A400: #651fff !default;
+$deep-purple-A700: #6200ea !default;
+$deep-purple: $deep-purple-500 !default;
+
+
+$indigo-50: #e8eaf6 !default;
+$indigo-100: #c5cae9 !default;
+$indigo-200: #9fa8da !default;
+$indigo-300: #7986cb !default;
+$indigo-400: #5c6bc0 !default;
+$indigo-500: #3f51b5 !default;
+$indigo-600: #3949ab !default;
+$indigo-700: #303f9f !default;
+$indigo-800: #283593 !default;
+$indigo-900: #1a237e !default;
+$indigo-A100: #8c9eff !default;
+$indigo-A200: #536dfe !default;
+$indigo-A400: #3d5afe !default;
+$indigo-A700: #304ffe !default;
+$indigo: $indigo-500 !default;
+
+
+$blue-50: #e3f2fd !default;
+$blue-100: #bbdefb !default;
+$blue-200: #90caf9 !default;
+$blue-300: #64b5f6 !default;
+$blue-400: #42a5f5 !default;
+$blue-500: #2196f3 !default;
+$blue-600: #1e88e5 !default;
+$blue-700: #1976d2 !default;
+$blue-800: #1565c0 !default;
+$blue-900: #0d47a1 !default;
+$blue-A100: #82b1ff !default;
+$blue-A200: #448aff !default;
+$blue-A400: #2979ff !default;
+$blue-A700: #2962ff !default;
+$blue: $blue-500 !default;
+
+
+$light-blue-50: #e1f5fe !default;
+$light-blue-100: #b3e5fc !default;
+$light-blue-200: #81d4fa !default;
+$light-blue-300: #4fc3f7 !default;
+$light-blue-400: #29b6f6 !default;
+$light-blue-500: #03a9f4 !default;
+$light-blue-600: #039be5 !default;
+$light-blue-700: #0288d1 !default;
+$light-blue-800: #0277bd !default;
+$light-blue-900: #01579b !default;
+$light-blue-A100: #80d8ff !default;
+$light-blue-A200: #40c4ff !default;
+$light-blue-A400: #00b0ff !default;
+$light-blue-A700: #0091ea !default;
+$light-blue: $light-blue-500 !default;
+
+
+$cyan-50: #e0f7fa !default;
+$cyan-100: #b2ebf2 !default;
+$cyan-200: #80deea !default;
+$cyan-300: #4dd0e1 !default;
+$cyan-400: #26c6da !default;
+$cyan-500: #00bcd4 !default;
+$cyan-600: #00acc1 !default;
+$cyan-700: #0097a7 !default;
+$cyan-800: #00838f !default;
+$cyan-900: #006064 !default;
+$cyan-A100: #84ffff !default;
+$cyan-A200: #18ffff !default;
+$cyan-A400: #00e5ff !default;
+$cyan-A700: #00b8d4 !default;
+$cyan: $cyan-500 !default;
+
+
+$teal-50: #e0f2f1 !default;
+$teal-100: #b2dfdb !default;
+$teal-200: #80cbc4 !default;
+$teal-300: #4db6ac !default;
+$teal-400: #26a69a !default;
+$teal-500: #009688 !default;
+$teal-600: #00897b !default;
+$teal-700: #00796b !default;
+$teal-800: #00695c !default;
+$teal-900: #004d40 !default;
+$teal-A100: #a7ffeb !default;
+$teal-A200: #64ffda !default;
+$teal-A400: #1de9b6 !default;
+$teal-A700: #00bfa5 !default;
+$teal: $teal-500 !default;
+
+
+$green-50: #e8f5e9 !default;
+$green-100: #c8e6c9 !default;
+$green-200: #a5d6a7 !default;
+$green-300: #81c784 !default;
+$green-400: #66bb6a !default;
+$green-500: #4caf50 !default;
+$green-600: #43a047 !default;
+$green-700: #388e3c !default;
+$green-800: #2e7d32 !default;
+$green-900: #1b5e20 !default;
+$green-A100: #b9f6ca !default;
+$green-A200: #69f0ae !default;
+$green-A400: #00e676 !default;
+$green-A700: #00c853 !default;
+$green: $green-500 !default;
+
+
+$light-green-50: #f1f8e9 !default;
+$light-green-100: #dcedc8 !default;
+$light-green-200: #c5e1a5 !default;
+$light-green-300: #aed581 !default;
+$light-green-400: #9ccc65 !default;
+$light-green-500: #8bc34a !default;
+$light-green-600: #7cb342 !default;
+$light-green-700: #689f38 !default;
+$light-green-800: #558b2f !default;
+$light-green-900: #33691e !default;
+$light-green-A100: #ccff90 !default;
+$light-green-A200: #b2ff59 !default;
+$light-green-A400: #76ff03 !default;
+$light-green-A700: #64dd17 !default;
+$light-green: $light-green-500 !default;
+
+
+$lime-50: #f9fbe7 !default;
+$lime-100: #f0f4c3 !default;
+$lime-200: #e6ee9c !default;
+$lime-300: #dce775 !default;
+$lime-400: #d4e157 !default;
+$lime-500: #cddc39 !default;
+$lime-600: #c0ca33 !default;
+$lime-700: #afb42b !default;
+$lime-800: #9e9d24 !default;
+$lime-900: #827717 !default;
+$lime-A100: #f4ff81 !default;
+$lime-A200: #eeff41 !default;
+$lime-A400: #c6ff00 !default;
+$lime-A700: #aeea00 !default;
+$lime: $lime-500 !default;
+
+
+$yellow-50: #fffde7 !default;
+$yellow-100: #fff9c4 !default;
+$yellow-200: #fff59d !default;
+$yellow-300: #fff176 !default;
+$yellow-400: #ffee58 !default;
+$yellow-500: #ffeb3b !default;
+$yellow-600: #fdd835 !default;
+$yellow-700: #fbc02d !default;
+$yellow-800: #f9a825 !default;
+$yellow-900: #f57f17 !default;
+$yellow-A100: #ffff8d !default;
+$yellow-A200: #ffff00 !default;
+$yellow-A400: #ffea00 !default;
+$yellow-A700: #ffd600 !default;
+$yellow: $yellow-500 !default;
+
+
+$amber-50: #fff8e1 !default;
+$amber-100: #ffecb3 !default;
+$amber-200: #ffe082 !default;
+$amber-300: #ffd54f !default;
+$amber-400: #ffca28 !default;
+$amber-500: #ffc107 !default;
+$amber-600: #ffb300 !default;
+$amber-700: #ffa000 !default;
+$amber-800: #ff8f00 !default;
+$amber-900: #ff6f00 !default;
+$amber-A100: #ffe57f !default;
+$amber-A200: #ffd740 !default;
+$amber-A400: #ffc400 !default;
+$amber-A700: #ffab00 !default;
+$amber: $amber-500 !default;
+
+
+$orange-50: #fff3e0 !default;
+$orange-100: #ffe0b2 !default;
+$orange-200: #ffcc80 !default;
+$orange-300: #ffb74d !default;
+$orange-400: #ffa726 !default;
+$orange-500: #ff9800 !default;
+$orange-600: #fb8c00 !default;
+$orange-700: #f57c00 !default;
+$orange-800: #ef6c00 !default;
+$orange-900: #e65100 !default;
+$orange-A100: #ffd180 !default;
+$orange-A200: #ffab40 !default;
+$orange-A400: #ff9100 !default;
+$orange-A700: #ff6d00 !default;
+$orange: $orange-500 !default;
+
+
+$deep-orange-50: #fbe9e7 !default;
+$deep-orange-100: #ffccbc !default;
+$deep-orange-200: #ffab91 !default;
+$deep-orange-300: #ff8a65 !default;
+$deep-orange-400: #ff7043 !default;
+$deep-orange-500: #ff5722 !default;
+$deep-orange-600: #f4511e !default;
+$deep-orange-700: #e64a19 !default;
+$deep-orange-800: #d84315 !default;
+$deep-orange-900: #bf360c !default;
+$deep-orange-A100: #ff9e80 !default;
+$deep-orange-A200: #ff6e40 !default;
+$deep-orange-A400: #ff3d00 !default;
+$deep-orange-A700: #dd2c00 !default;
+$deep-orange: $deep-orange-500 !default;
+
+
+$brown-50: #efebe9 !default;
+$brown-100: #d7ccc8 !default;
+$brown-200: #bcaaa4 !default;
+$brown-300: #a1887f !default;
+$brown-400: #8d6e63 !default;
+$brown-500: #795548 !default;
+$brown-600: #6d4c41 !default;
+$brown-700: #5d4037 !default;
+$brown-800: #4e342e !default;
+$brown-900: #3e2723 !default;
+$brown-A100: #d7ccc8 !default;
+$brown-A200: #bcaaa4 !default;
+$brown-A400: #8d6e63 !default;
+$brown-A700: #5d4037 !default;
+$brown: $brown-500 !default;
+
+
+$grey-50: #fafafa !default;
+$grey-100: #f5f5f5 !default;
+$grey-200: #eeeeee !default;
+$grey-300: #e0e0e0 !default;
+$grey-400: #bdbdbd !default;
+$grey-500: #9e9e9e !default;
+$grey-600: #757575 !default;
+$grey-700: #616161 !default;
+$grey-800: #424242 !default;
+$grey-900: #212121 !default;
+$grey-A100: #f5f5f5 !default;
+$grey-A200: #eeeeee !default;
+$grey-A400: #bdbdbd !default;
+$grey-A700: #616161 !default;
+$grey: $grey-500 !default;
+
+
+$blue-grey-50: #eceff1 !default;
+$blue-grey-100: #cfd8dc !default;
+$blue-grey-200: #b0bec5 !default;
+$blue-grey-300: #90a4ae !default;
+$blue-grey-400: #78909c !default;
+$blue-grey-500: #607d8b !default;
+$blue-grey-600: #546e7a !default;
+$blue-grey-700: #455a64 !default;
+$blue-grey-800: #37474f !default;
+$blue-grey-900: #263238 !default;
+$blue-grey-A100: #cfd8dc !default;
+$blue-grey-A200: #b0bec5 !default;
+$blue-grey-A400: #78909c !default;
+$blue-grey-A700: #455a64 !default;
+$blue-grey: $blue-grey-500 !default;
+
+
+$black: #000000 !default;
+$white: #ffffff !default;
+$inverse: $indigo !default;

sass/_dialogs.scss

@@ -0,0 +1,54 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+//
+// Modals
+// Material Design element Dialogs
+// --------------------------------------------------
+.modal-content {
+  @include shadow-z-5();
+  border-radius: 2px;
+  border: none;
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+  .modal-header {
+    border-bottom: none;
+    padding-top:    24px;
+    padding-right:  24px;
+    padding-bottom: 0px;
+    padding-left:   24px;
+  }
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    padding-top:    24px;
+    padding-right:  24px;
+    padding-bottom: 16px;
+    padding-left:   24px;
+  }
+  // Footer (for actions)
+  .modal-footer {
+    border-top: none;
+    padding: 7px;
+    button {
+      margin: 0;
+      padding-left: 16px;
+      padding-right: 16px;
+      width: auto;
+      &.pull-left {
+        padding-left: 5px;
+        padding-right: 5px;
+        position: relative;
+        left: -5px;
+      }
+    }
+    button+button {
+      margin-bottom: 16px;
+    }
+  }
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+.modal-backdrop {
+  background: rgba(0,0,0,0.3);
+}

sass/_dividers.scss

@@ -0,0 +1,73 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+hr {
+  &.on-dark {
+    color: lighten($black, 10%);
+  }
+
+  &.on-light {
+    color: lighten($white, 10%);
+  }
+
+  @media  (-webkit-min-device-pixel-ratio: 0.75),
+    (min--moz-device-pixel-ratio: 0.75),
+    (-o-device-pixel-ratio: 3/4),
+    (min-device-pixel-ratio: 0.75),
+    (min-resolution: 0.75dppx),
+    (min-resolution: 120dpi) {
+      height:0.75px;
+    }
+
+  @media  (-webkit-min-device-pixel-ratio: 1),
+    (min--moz-device-pixel-ratio: 1),
+    (-o-device-pixel-ratio: 1),
+    (min-device-pixel-ratio: 1),
+    (min-resolution: 1dppx),
+    (min-resolution: 160dpi) {
+      height:1px;
+    }
+  @media  (-webkit-min-device-pixel-ratio: 1.33),
+    (min--moz-device-pixel-ratio: 1.33),
+    (-o-device-pixel-ratio: 133/100),
+    (min-device-pixel-ratio: 1.33),
+    (min-resolution: 1.33dppx),
+    (min-resolution: 213dpi) {
+      height:1.333px;
+    }
+  @media  (-webkit-min-device-pixel-ratio: 1.5),
+    (min--moz-device-pixel-ratio: 1.5),
+    (-o-device-pixel-ratio: 3/2),
+    (min-device-pixel-ratio: 1.5),
+    (min-resolution: 1.5dppx),
+    (min-resolution: 240dpi) {
+      height:1.5px;
+    }
+
+  @media  (-webkit-min-device-pixel-ratio: 2),
+    (min--moz-device-pixel-ratio: 2),
+    (-o-device-pixel-ratio: 2/1),
+    (min-device-pixel-ratio: 2),
+    (min-resolution: 2dppx),
+    (min-resolution: 380dpi) {
+      height:2px;
+    }
+
+  @media  (-webkit-min-device-pixel-ratio: 3),
+    (min--moz-device-pixel-ratio: 3),
+    (-o-device-pixel-ratio: 3/1),
+    (min-device-pixel-ratio: 3),
+    (min-resolution: 3dppx),
+    (min-resolution: 480dpi) {
+      height:3px;
+    }
+
+  @media  (-webkit-min-device-pixel-ratio: 4),
+    (min--moz-device-pixel-ratio: 4),
+    (-o-device-pixel-ratio: 4/1),
+    (min-device-pixel-ratio: 3),
+    (min-resolution: 4dppx),
+    (min-resolution: 640dpi) {
+      height:4px;
+    }
+
+}

sass/_icons-material-design.scss

@@ -1,10 +1,12 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 @font-face {
     font-family: 'Material-Design-Icons';
-    src:url('#{material-font-path}/Material-Design-Icons.eot?3ocs8m');
-    src:url('#{material-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
-        url('#{material-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
-        url('#{material-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
-        url('#{material-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
+    src:url('#{$material-font-path}/Material-Design-Icons.eot?3ocs8m');
+    src:url('#{$material-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
+        url('#{$material-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
+        url('#{$material-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
+        url('#{$material-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
     font-weight: normal;
     font-style: normal;
 }
@@ -209,7 +211,6 @@
 
 /* Start Icons */
 
-
 .mdi-action-3d-rotation:before {
     content: "\e600";
 }
@@ -978,7 +979,7 @@
     content: "\e6bf";
 }
 
-.mdi-av-queue-mus:before {
+.mdi-av-queue-music:before {
     content: "\e6c0";
 }
 
@@ -3206,7 +3207,7 @@
     content: "\e8ea";
 }
 
-.mdi-social-publ24px:before {
+.mdi-social-public:before {
     content: "\e8eb";
 }
 

sass/_icons.scss

@@ -1,80 +1,7 @@
-.icon {}
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
-// Navbar alternate
-// --------------------------------------------------
-
-.icon-default {
-  @include icon-variant($lightbg-text);
-}
-.icon-primary {
-  @include icon-variant($primary);
-}
-// Success appears as green
-.icon-success {
-  @include icon-variant($success);
-}
-// Info appears as blue-green
-.icon-info {
-  @include icon-variant($info);
-}
-// Warning appears as orange
-.icon-warning {
-  @include icon-variant($warning);
-}
-// Danger and error appear as red
-.icon-danger {
-  @include icon-variant($danger);
-}
-
-// Material shades
-.icon-material-red {
-    @include icon-variant($red)
-}
-.icon-material-pink {
-    @include icon-variant($pink);
-}
-.icon-material-purple {
-    @include icon-variant($purple);
-}
-.icon-material-deeppurple {
-    @include icon-variant($deeppurple);
-}
-.icon-material-indigo {
-    @include icon-variant($indigo);
-}
-.icon-material-lightblue {
-    @include icon-variant($lightblue);
-}
-.icon-material-cyan {
-    @include icon-variant($cyan);
-}
-.icon-material-teal {
-    @include icon-variant($teal);
-}
-.icon-material-lightgreen {
-    @include icon-variant($lightgreen);
-}
-.icon-material-lime {
-    @include icon-variant($lime);
-}
-.icon-material-lightyellow {
-    @include icon-variant($lightyellow);
-}
-.icon-material-orange {
-    @include icon-variant($orange);
-}
-.icon-material-deeporange {
-    @include icon-variant($deeporange);
-}
-.icon-material-grey {
-    @include icon-variant($grey);
-}
-.icon-material-bluegrey {
-    @include icon-variant($bluegrey);
-}
-.icon-material-brown {
-    @include icon-variant($brown);
-}
-.icon-material-lightgrey {
-    @include icon-variant($lightgrey);
+.mdi, icon {
+    @include variations(unquote(""), color, $lightbg-text);
+    line-height: inherit;
+    vertical-align: bottom;
 }

sass/_inputs-size.scss

@@ -0,0 +1,220 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+//
+// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
+//
+// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
+//        to identify differences in sizing approaches to form inputs.
+// --------------------------------------------------
+
+legend {
+  margin-bottom: $md-input-line-height-computed;
+  font-size: ($md-input-font-size-base * 1.5);
+}
+
+// Adjust output element
+output {
+  padding-top: ($md-input-padding-base-vertical + 1);
+  font-size: $md-input-font-size-base;
+  line-height: $md-input-line-height-base;
+}
+
+.form-control {
+  height: $md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $md-input-padding-base-vertical $md-input-padding-base-horizontal;
+  font-size: $md-input-font-size-base;
+  line-height: $md-input-line-height-base;
+}
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
+    &.form-control {
+      line-height: $md-input-height-base;
+    }
+
+    &.input-sm,
+    .input-group-sm & {
+      line-height: $md-input-height-small;
+    }
+
+    &.input-lg,
+    .input-group-lg & {
+      line-height: $md-input-height-large;
+    }
+  }
+}
+
+.radio,
+.checkbox {
+
+  label {
+    min-height: $md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: ($md-input-padding-base-vertical + 1);
+  padding-bottom: ($md-input-padding-base-vertical + 1);
+  min-height: ($md-input-line-height-computed + $md-input-font-size-base);
+}
+
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+// mixin pulled from bootstrap and altered for less/sass compatibility
+@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
+
+  #{$parent} {
+    height: $input-height;
+    padding: $padding-vertical $padding-horizontal;
+    font-size: $font-size;
+    line-height: $line-height;
+    border-radius: $border-radius;
+  }
+
+  select#{$parent} {
+    height: $input-height;
+    line-height: $input-height;
+  }
+
+  textarea#{$parent},
+  select[multiple]#{$parent} {
+    height: auto;
+  }
+}
+
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+.input-sm {
+  @include input-size('.input-sm', $md-input-height-small, $md-input-padding-small-vertical, $md-input-padding-small-horizontal, $md-input-font-size-small, $md-input-line-height-small, $md-input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: $md-input-height-small;
+    padding: $md-input-padding-small-vertical $md-input-padding-small-horizontal;
+    font-size: $md-input-font-size-small;
+    line-height: $md-input-line-height-small;
+  }
+  select.form-control {
+    height: $md-input-height-small;
+    line-height: $md-input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: $md-input-height-small;
+    min-height: ($md-input-line-height-computed + $md-input-font-size-small);
+    padding: ($md-input-padding-small-vertical + 1) $md-input-padding-small-horizontal;
+    font-size: $md-input-font-size-small;
+    line-height: $md-input-line-height-small;
+  }
+}
+
+.input-lg {
+  @include input-size('.input-lg', $md-input-height-large, $md-input-padding-large-vertical, $md-input-padding-large-horizontal, $md-input-font-size-large, $md-input-line-height-large, $md-input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: $md-input-height-large;
+    padding: $md-input-padding-large-vertical $md-input-padding-large-horizontal;
+    font-size: $md-input-font-size-large;
+    line-height: $md-input-line-height-large;
+  }
+  select.form-control {
+    height: $md-input-height-large;
+    line-height: $md-input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: $md-input-height-large;
+    min-height: ($md-input-line-height-computed + $md-input-font-size-large);
+    padding: ($md-input-padding-large-vertical + 1) $md-input-padding-large-horizontal;
+    font-size: $md-input-font-size-large;
+    line-height: $md-input-line-height-large;
+  }
+}
+
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: ($md-input-line-height-computed + ($md-input-padding-base-vertical + 1));
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: $screen-sm-min) {
+    .control-label {
+      padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: $screen-sm-min) {
+      .control-label {
+        padding-top: (($md-input-padding-large-vertical * $md-input-line-height-large) + 1);
+        font-size: $md-input-font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: $screen-sm-min) {
+      .control-label {
+        padding-top: ($md-input-padding-small-vertical + 1);
+        font-size: $md-input-font-size-small;
+      }
+    }
+  }
+}

sass/_inputs.scss

@@ -1,209 +1,295 @@
-fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
-    &, &:focus, &.focus {
-        &:not(textarea) {
-            height: 28px;
-        }
-        padding: 0;
-        float: none;
-        border: 0;
-        box-shadow: none;
-        border-radius: 0;
-        background: transparent;
-        border-bottom: 1px solid #757575;
-        &:disabled {
-            border-style: dashed;
-        }
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@import '_inputs-size';
+
+// usage: @include form-group-validation-state($input-danger);
+@mixin form-group-validation-state($name, $color){
+
+  &.#{$name} { // e.g. has-error
+    .form-control {
+      box-shadow: none;
     }
+    &.is-focused .form-control {
+      background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
+    }
+    label.control-label,
+    .help-block {
+      color: $color;
+    }
+  }
 }
 
-select[multiple].form-control {
-    &, &:focus, &.focus {
-        height: 85px;
-    }
+@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
+  $static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default;
+  $static-line-height: ($label-floating-size-ratio * $line-height) !default;
+
+  $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
+  $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
+
+  $help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default;
+  $help-block-line-height: ($help-block-size-ratio * $line-height) !default;
+
+  // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+  margin: ($label-top-margin + $static-font-size) 0 0 0;
+
+  .form-control {
+    @include material-placeholder {
+      font-size: $placeholder-font-size;
+    
 }
+    margin-bottom: $vertical-padding; // must be specified to give help-block vertical space
+  }
 
-.form-control-wrapper {
-    position: relative;
+  // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
+  //  must also be expressed as form-group padding
+  padding-bottom: $vertical-padding;
 
-    .form-control:focus, .form-control.focus {
-        outline: none;
-    }
+  .help-block {
+    margin-top: 0px; // allow the input margin to set-off the top of the help-block
+    font-size: $help-block-font-size;
+  }
 
-    .floating-label {
-        color: #7E7E7E;
-        font-size: 14px;
-        position: absolute;
-        pointer-events: none;
-        left: 0px;
-        top: 5px;
-        transition: 0.2s ease all;
-        opacity: 0;
-    }
-    .form-control:not(.empty) ~ .floating-label {
-        top: -10px;
-        font-size: 10px;
-        opacity: 1;
-    }
-    .form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
-        color: $input-danger;
-    }
-    .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
-        background-color: $input-default;
-    }
-    .form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
-        &:before, &:after  {
-            background-color: $input-danger;
-        }
-    }
-    .form-control.empty ~ .floating-label {
-        opacity: 1;
-    }
-    .material-input:before {
-        position: absolute;
-        content: "";
-        width: 100%;
-        left: 0;
-        height: 2px;
-        background-color: $input-default;
-        bottom: -1px;
-        transform: scaleX(0);
-        transition: transform 0s;
-    }
-    .form-control:focus  ~ .material-input:before, .form-control.focus  ~ .material-input:before {
-        transform: scaleX(1);
-        transition: transform 0.2s ease-out;
-    }
-    .material-input:after {
-        content: "";
-        position: absolute;
-        height: 18px;
-        width: 100px;
-        margin-top: -1px;
-        top: 7px;
-        left: 0;
-        pointer-events: none;
-        opacity: 0.9;
-        transform-origin: left;
-    }
-    .input-lg ~ .material-input:after {
-        height: 26px;
-    }
-    textarea { resize: none; }
-    textarea ~ .form-control-highlight {
-        margin-top: -11px;
-    }
+  // smaller focused or static size
+  label.control-label {
+    font-size: $static-font-size;
+    line-height: $static-line-height;
+  }
 
-    /* active state */
-    .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
-        animation: input-highlight 0.3s ease;
-        animation-fill-mode: forwards;
-        opacity: 0;
+  // larger labels as placeholders
+  &.label-floating,
+  &.label-placeholder {
+    label.control-label {
+      top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
     }
+  }
 
-    select ~ .material-input:after {
-        display: none;
+  // static or focused floating labels
+  &.label-static,
+  &.label-floating.is-focused,
+  &.label-floating:not(.is-empty) {
+    label.control-label {
+      top: $label-top;
+      left: 0;
+      // must repeat because the selector above is more specific than the general label sizing
+      font-size: $static-font-size;
+      line-height: $static-line-height;
     }
-
+  }
 }
 
 .form-group {
-    &.has-warning {
-        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
-            background: $input-warning;
-        }
-        .control-label, input.form-control:not(.empty) ~ .floating-label {
-            color: $input-warning;
-        }
-    }
-    &.has-error {
-        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
-            background: $input-danger;
-        }
-        .control-label, input.form-control:not(.empty) ~ .floating-label {
-            color: $input-danger;
-        }
-    }
-    &.has-success {
-        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
-            background: $input-success;
-        }
-        .control-label, input.form-control:not(.empty) ~ .floating-label {
-            color: $input-success;
-        }
-    }
-    &.has-info {
-        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
-            background: $input-info;
-        }
-        .control-label, input.form-control:not(.empty) ~ .floating-label {
-            color: $input-info;
-        }
-    }
-    //.variations(#{" .material-input:before"}, background-color, $indigo);
-    //.variations(#{" input.form-control:focus ~ .material-input:after"}, background-color, $indigo);
-    //.variations(#{" input.form-control.focus ~ .material-input:after"}, background-color, $indigo);
-    //.variations(#{" .control-label"}, color, $lightbg-text);
-    //.variations(#{" input.form-control:not(.empty) ~ .floating-label"}, color, $indigo);
+  //border: solid 1px red;
+  position: relative;
+
+  // -----
+  // Inputs
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  .form-control {
+    border: 0;
+    background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
+    background-size: 0 2px, 100% 1px;
+    background-repeat: no-repeat;
+    background-position: center bottom, center calc(100% - 1px);
+    background-color: rgba(0, 0, 0, 0);
+    transition: background 0s ease-out;
+    float: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    // Placeholders and and labels-as-placeholders should look the same
+    @include material-placeholder {
+      color: $input-placeholder-color;
+      font-weight: normal;
     
 }
 
-.input-group {
-    .form-control-wrapper {
-        .form-control {
-            float: none;
-        }
-        margin-right: 5px;
-        margin-left: 5px;
-        bottom: -10px;
+
+    //&:textarea {    // appears to be an invalid selector
+    //  height: 40px;
+    //}
+
+    &[readonly],
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: rgba(0, 0, 0, 0);
     }
-    .input-group-addon {
-        border: 0;
+
+    &[disabled],
+    fieldset[disabled] & {
+      background-image: none;
+      border-bottom: 1px dotted $input-underline-color;
     }
-    .input-group-btn .btn {
-        border-radius: 4px;
+  }
+
+  &.is-focused .form-control {
+    outline: none;
+    background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
+    background-size: 100% 2px, 100% 1px;
+    box-shadow: none;
+    transition-duration: 0.3s;
+
+    .material-input:after {
+      background-color: $input-default;
     }
+  }
+
+  // -----
+  // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  &.label-static,
+  &.label-placeholder,
+  &.label-floating {
+
+    label.control-label {
+      position: absolute;
+      pointer-events: none;
+      transition: 0.3s ease all;
+    }
+  }
+
+  label.control-label {
+    // same label properties as form-group placeholder
+    color: $input-placeholder-color;
+    font-weight: normal;
+    margin: 16px 0 0 0; // std and lg
+  }
+
+  // hide label-placeholders when the field is not empty
+  &.label-placeholder:not(.is-empty){
+    label.control-label{
+      display: none;
+    }
+  }
+
+  @include variations(unquote(" label.control-label"), color, $input-placeholder-color);  // default label color variations
+  @include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations
+  @include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $input-placeholder-color);  // default label color variations
+
+  // default floating size/location
+  @include form-group-size-variant($md-input-font-size-base, $md-label-top-margin-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base);
+
+  // sm floating size/location
+  &.form-group-sm {
+    @include form-group-size-variant($md-input-font-size-small, $md-label-top-margin-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small);
+  }
+
+  // lg floating size/location
+  &.form-group-lg {
+    @include form-group-size-variant($md-input-font-size-large, $md-label-top-margin-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large);
+  }
+
+  // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
+  .help-block {
+    position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
+    display: none;
+  }
+
+  &.is-focused {
+    .help-block {
+      display: block;
+    }
+  }
+
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
+  @include bg-img-variations(unquote(".is-focused .form-control"), $primary);
+
+  @include form-group-validation-state(has-warning, $input-warning);
+  @include form-group-validation-state(has-error, $input-danger);
+  @include form-group-validation-state(has-success, $input-success);
+  @include form-group-validation-state(has-info, $input-info);
+
+  textarea {
+    resize: none;
+    & ~ .form-control-highlight {
+      margin-top: -11px;
+    }
+  }
+
+  select {
+    appearance: none; // Fix for OS X
+
+    & ~ .material-input:after {
+      display: none;
+    }
+  }
 }
 
 select.form-control {
-    border: 0;
+
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+
+  .form-group.is-focused & {
     box-shadow: none;
-    border-radius: 0;
-    &:focus, &.focus {
-        box-shadow: none;
-        border-color: #757575;
+    border-color: $input-underline-color;
+  }
+
+  &[multiple] {
+    &,
+    .form-group.is-focused & {
+      height: 85px;
     }
+  }
 }
 
-
-@mixin keyframe-input-highlight(){
-    0% {
-        left: 20%;
-        transform: scaleX(20%);
-    }
-    99% {
-        transform: scaleX(0);
-        left: 0;
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
+@mixin input-group-button-variation($vertical-padding){
+  .input-group-btn {
+    .btn {
+      margin: 0 0 $vertical-padding 0;
     }
+  }
 }
 
-@keyframes input-highlight {
-    @include keyframe-input-highlight()
+// ----------------
+// input group/addon related styles
+
+// default margin
+@include input-group-button-variation($md-input-padding-base-vertical);
+
+.form-group {
+  //.form-control {
+  //  float: none;
+  //}
+
+  // sm margin
+  &.form-group-sm {
+    @include input-group-button-variation($md-input-padding-small-vertical);
+  }
+
+  // lg margin
+  &.form-group-lg {
+    @include input-group-button-variation($md-input-padding-large-vertical);
+  }
 }
 
+.input-group {  // may be in or outside of form-group
+  .input-group-btn {
+    padding: 0 12px; // match addon spacing
+  }
 
-// Input files (kinda hack)
-.form-control-wrapper input[type=file] {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
+  .input-group-addon {
+    border: 0;
+    background: transparent;
+  }
 }
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+

sass/_labels.scss

@@ -0,0 +1,6 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.label {
+    border-radius: 1px;
+    @include variations(unquote(""), background-color, $grey);
+}

sass/_lists.scss

@@ -1,83 +1,104 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .list-group {
+  border-radius: 0;
+  .list-group-item {
+    background-color: transparent;
+    overflow: hidden;
+    border: 0;
     border-radius: 0;
-    .list-group-item {
-        background-color: transparent;
-        overflow: hidden;
-        border: 0;
-        border-radius: 0;
-        padding: 0 16px;
-        .row-picture, .row-action-primary {
-            float: left;
-            display: inline-block;
-            padding-right: 16px;
-            img, i, label {
-                display: block;
-                width: 56px;
-                height: 56px;
-            }
-            img {
-                background: rgba(0,0,0,0.1);
-                padding: 1px;
-                &.circle {
-                    border-radius: 100%;
-                }
-            }
-            i {
-                background: rgba(0,0,0,0.25);
-                border-radius: 100%;
-                text-align: center;
-                line-height: 56px;
-                font-size: 20px;
-                color: white;
-            }
-            label {
-                margin-left: 7px;
-                margin-right: -7px;
-                margin-top: 5px;
-                margin-bottom: -5px;
-            }
-        }
-        .row-content {
-            display: inline-block;
-            width: #{"calc(100% - 92px)"};
-            min-height: 66px;
-            .action-secondary {
-                position: absolute;
-                right: 16px;
-                top: 16px;
-                i {
-                    font-size: 20px;
-                    color: rgba(0,0,0,0.25);
-                    cursor: pointer;
-                }
-            }
-            .action-secondary  ~ * {
-                max-width: #{"calc(100% - 30px)"};
-            }
-            .least-content {
-                position: absolute;
-                right: 16px;
-                top: 0px;
-                color: rgba(0,0,0,0.54);
-                font-size: 14px;
-            }
-        }
-        .list-group-item-heading {
-            color: rgba(0, 0, 0, 0.77);
-            font-size: 20px;
-            line-height: 29px;
-        }
+    padding: 0 16px;
+    &.baseline {
+      border-bottom: 1px solid #cecece;
+      &:last-child {
+        border-bottom: none;
+      }
     }
-    .list-group-separator {
-        clear: both;
-        overflow: hidden;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        &:before {
-            content: "";
-            width: #{"calc(100% - 90px)"};
-            border-bottom: 1px solid rgba(0,0,0,0.1);
-            float: right;
+    .row-picture, .row-action-primary {
+      float: left;
+      display: inline-block;
+      padding-right: 16px;
+      img, i, label {
+        display: block;
+        width: 56px;
+        height: 56px;
+      }
+      img {
+        background: rgba(0,0,0,0.1);
+        padding: 1px;
+        &.circle {
+          border-radius: 100%;
         }
+      }
+      i {
+        background: rgba(0,0,0,0.25);
+        border-radius: 100%;
+        text-align: center;
+        line-height: 56px;
+        font-size: 20px;
+        color: white;
+      }
+      label {
+        margin-left: 7px;
+        margin-right: -7px;
+        margin-top: 5px;
+        margin-bottom: -5px;
+        .checkbox-material {
+          left: -10px;
+        }
+      }
     }
+    .row-content {
+      display: inline-block;
+      width: unquote("calc(100% - 92px)");
+      min-height: 66px;
+      .action-secondary {
+        position: absolute;
+        right: 16px;
+        top: 16px;
+        i {
+          font-size: 20px;
+          color: rgba(0,0,0,0.25);
+          cursor: pointer;
+        }
+      }
+      .action-secondary  ~ * {
+        max-width: unquote("calc(100% - 30px)");
+      }
+      .least-content {
+        position: absolute;
+        right: 16px;
+        top: 0px;
+        color: rgba(0,0,0,0.54);
+        font-size: 14px;
+      }
+    }
+    .list-group-item-heading {
+      color: rgba(0, 0, 0, 0.77);
+      font-size: 20px;
+      line-height: 29px;
+    }
+  }
+  .list-group-item.active {
+    &:hover, &:focus {
+      background: rgba(0,0,0,.15);
+      outline: 10px solid rgba(0,0,0,.15);
+    }
+    .list-group-item-heading, .list-group-item-text {
+      color: $lightbg-text;
+    }
+
+  }
+  .list-group-separator {
+    clear: both;
+    overflow: hidden;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    &:before {
+      content: "";
+      width: unquote("calc(100% - 90px)");
+      border-bottom: 1px solid rgba(0,0,0,0.1);
+      float: right;
+    }
+  }
 }

sass/_material.scss

@@ -0,0 +1,135 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+body {
+  background-color: $body-bg;
+  &.inverse {
+    background: #333333;
+    &, .form-control {
+      color: $darkbg-text;
+    }
+    .modal,
+    .panel-default,
+    .card {
+      &,
+      .form-control {
+        background-color: initial;
+        color: initial;
+      }
+    }
+
+  }
+}
+
+
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+  font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+}
+
+h5, h6{
+  font-weight: 400;
+}
+
+a, a:hover, a:focus {
+  color: $primary;
+}
+
+// Well and Jumbotrons
+@import '_welljumbo';
+
+// Buttons
+@import '_buttons';
+
+// Checkboxes
+@import '_checkboxes';
+
+// Toggle buttons
+@import '_togglebutton';
+
+// Radios
+@import '_radios';
+
+// Text inputs
+@import '_inputs';
+
+legend {
+  border-bottom: 0;
+}
+
+// Lists
+@import '_lists';
+
+// Navbar
+@import '_navbar';
+
+.dropdown-menu {
+  border: 0;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  .divider {
+    background-color: rgba(229, 229, 229, 0.12);
+  }
+  li {
+    overflow: hidden;
+    position: relative;
+    a:hover {
+      background-color: transparent;
+      color: $primary;
+    }
+  }
+  @include variations(unquote(" li a:hover"), color, $primary);
+}
+
+// Alerts
+@import '_alerts';
+
+// Progress bar
+@import '_progress';
+
+// Typography
+.text-warning {
+  color: $btn-warning;
+}
+.text-primary {
+  color: $btn-primary;
+}
+.text-danger {
+  color: $btn-danger;
+}
+.text-success {
+  color: $btn-success;
+}
+.text-info {
+  color: $btn-info;
+}
+
+@import '_tabs';
+
+@import '_popups';
+
+@import '_icons';
+
+@import '_cards';
+
+@import '_dialogs';
+
+@import '_labels';
+
+@import '_panels';
+
+@import '_dividers';
+
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+    outline: 0;
+  }
+}
+
+
+// External plugins
+@import '_plugin-snackbarjs';
+@import '_plugin-nouislider';
+@import '_plugin-selectize';
+@import '_plugin-dropdownjs';

sass/_mixins-fullpalette.scss

@@ -0,0 +1,307 @@
+// This file is NOT automatically converted and must be manually merged
+@import 'mixins-shared';
+
+@mixin generic-variations-colors($args) {
+
+  //@debug "multi-palette generic-variations-colors called with #{inspect($args)}";
+
+  $material-colors: (
+          "red-50": (name: "red", color: $red-50, number: "-50"),
+          "red-100": (name: "red", color: $red-100, number: "-100"),
+          "red-200": (name: "red", color: $red-200, number: "-200"),
+          "red-300": (name: "red", color: $red-300, number: "-300"),
+          "red-400": (name: "red", color: $red-400, number: "-400"),
+          "red-500": (name: "red", color: $red-500, number: "-500"),
+          "red-600": (name: "red", color: $red-600, number: "-600"),
+          "red-700": (name: "red", color: $red-700, number: "-700"),
+          "red-800": (name: "red", color: $red-800, number: "-800"),
+          "red-900": (name: "red", color: $red-900, number: "-900"),
+          "red-A100": (name: "red", color: $red-A100, number: "-A100"),
+          "red-A200": (name: "red", color: $red-A200, number: "-A200"),
+          "red-A400": (name: "red", color: $red-A400, number: "-A400"),
+          "red-A700": (name: "red", color: $red-A700, number: "-A700"),
+          "red": (name: "red", color: $red, number: ""),
+          "pink-50": (name: "pink", color: $pink-50, number: "-50"),
+          "pink-100": (name: "pink", color: $pink-100, number: "-100"),
+          "pink-200": (name: "pink", color: $pink-200, number: "-200"),
+          "pink-300": (name: "pink", color: $pink-300, number: "-300"),
+          "pink-400": (name: "pink", color: $pink-400, number: "-400"),
+          "pink-500": (name: "pink", color: $pink-500, number: "-500"),
+          "pink-600": (name: "pink", color: $pink-600, number: "-600"),
+          "pink-700": (name: "pink", color: $pink-700, number: "-700"),
+          "pink-800": (name: "pink", color: $pink-800, number: "-800"),
+          "pink-900": (name: "pink", color: $pink-900, number: "-900"),
+          "pink-A100": (name: "pink", color: $pink-A100, number: "-A100"),
+          "pink-A200": (name: "pink", color: $pink-A200, number: "-A200"),
+          "pink-A400": (name: "pink", color: $pink-A400, number: "-A400"),
+          "pink-A700": (name: "pink", color: $pink-A700, number: "-A700"),
+          "pink": (name: "pink", color: $pink, number: ""),
+          "purple-50": (name: "purple", color: $purple-50, number: "-50"),
+          "purple-100": (name: "purple", color: $purple-100, number: "-100"),
+          "purple-200": (name: "purple", color: $purple-200, number: "-200"),
+          "purple-300": (name: "purple", color: $purple-300, number: "-300"),
+          "purple-400": (name: "purple", color: $purple-400, number: "-400"),
+          "purple-500": (name: "purple", color: $purple-500, number: "-500"),
+          "purple-600": (name: "purple", color: $purple-600, number: "-600"),
+          "purple-700": (name: "purple", color: $purple-700, number: "-700"),
+          "purple-800": (name: "purple", color: $purple-800, number: "-800"),
+          "purple-900": (name: "purple", color: $purple-900, number: "-900"),
+          "purple-A100": (name: "purple", color: $purple-A100, number: "-A100"),
+          "purple-A200": (name: "purple", color: $purple-A200, number: "-A200"),
+          "purple-A400": (name: "purple", color: $purple-A400, number: "-A400"),
+          "purple-A700": (name: "purple", color: $purple-A700, number: "-A700"),
+          "purple": (name: "purple", color: $purple, number: ""),
+          "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
+          "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"),
+          "deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"),
+          "deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"),
+          "deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"),
+          "deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"),
+          "deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"),
+          "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
+          "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"),
+          "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
+          "deep-purple-A100": (name: "deep-purple", color: $deep-purple-A100, number: "-A100"),
+          "deep-purple-A200": (name: "deep-purple", color: $deep-purple-A200, number: "-A200"),
+          "deep-purple-A400": (name: "deep-purple", color: $deep-purple-A400, number: "-A400"),
+          "deep-purple-A700": (name: "deep-purple", color: $deep-purple-A700, number: "-A700"),
+          "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
+          "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
+          "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
+          "indigo-200": (name: "indigo", color: $indigo-200, number: "-200"),
+          "indigo-300": (name: "indigo", color: $indigo-300, number: "-300"),
+          "indigo-400": (name: "indigo", color: $indigo-400, number: "-400"),
+          "indigo-500": (name: "indigo", color: $indigo-500, number: "-500"),
+          "indigo-600": (name: "indigo", color: $indigo-600, number: "-600"),
+          "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
+          "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
+          "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
+          "indigo-A100": (name: "indigo", color: $indigo-A100, number: "-A100"),
+          "indigo-A200": (name: "indigo", color: $indigo-A200, number: "-A200"),
+          "indigo-A400": (name: "indigo", color: $indigo-A400, number: "-A400"),
+          "indigo-A700": (name: "indigo", color: $indigo-A700, number: "-A700"),
+          "indigo": (name: "indigo", color: $indigo, number: ""),
+          "blue-50": (name: "blue", color: $blue-50, number: "-50"),
+          "blue-100": (name: "blue", color: $blue-100, number: "-100"),
+          "blue-200": (name: "blue", color: $blue-200, number: "-200"),
+          "blue-300": (name: "blue", color: $blue-300, number: "-300"),
+          "blue-400": (name: "blue", color: $blue-400, number: "-400"),
+          "blue-500": (name: "blue", color: $blue-500, number: "-500"),
+          "blue-600": (name: "blue", color: $blue-600, number: "-600"),
+          "blue-700": (name: "blue", color: $blue-700, number: "-700"),
+          "blue-800": (name: "blue", color: $blue-800, number: "-800"),
+          "blue-900": (name: "blue", color: $blue-900, number: "-900"),
+          "blue-A100": (name: "blue", color: $blue-A100, number: "-A100"),
+          "blue-A200": (name: "blue", color: $blue-A200, number: "-A200"),
+          "blue-A400": (name: "blue", color: $blue-A400, number: "-A400"),
+          "blue-A700": (name: "blue", color: $blue-A700, number: "-A700"),
+          "blue": (name: "blue", color: $blue, number: ""),
+          "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
+          "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"),
+          "light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"),
+          "light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"),
+          "light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"),
+          "light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"),
+          "light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"),
+          "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
+          "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"),
+          "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
+          "light-blue-A100": (name: "light-blue", color: $light-blue-A100, number: "-A100"),
+          "light-blue-A200": (name: "light-blue", color: $light-blue-A200, number: "-A200"),
+          "light-blue-A400": (name: "light-blue", color: $light-blue-A400, number: "-A400"),
+          "light-blue-A700": (name: "light-blue", color: $light-blue-A700, number: "-A700"),
+          "light-blue": (name: "light-blue", color: $light-blue, number: ""),
+          "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
+          "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
+          "cyan-200": (name: "cyan", color: $cyan-200, number: "-200"),
+          "cyan-300": (name: "cyan", color: $cyan-300, number: "-300"),
+          "cyan-400": (name: "cyan", color: $cyan-400, number: "-400"),
+          "cyan-500": (name: "cyan", color: $cyan-500, number: "-500"),
+          "cyan-600": (name: "cyan", color: $cyan-600, number: "-600"),
+          "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
+          "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
+          "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
+          "cyan-A100": (name: "cyan", color: $cyan-A100, number: "-A100"),
+          "cyan-A200": (name: "cyan", color: $cyan-A200, number: "-A200"),
+          "cyan-A400": (name: "cyan", color: $cyan-A400, number: "-A400"),
+          "cyan-A700": (name: "cyan", color: $cyan-A700, number: "-A700"),
+          "cyan": (name: "cyan", color: $cyan, number: ""),
+          "teal-50": (name: "teal", color: $teal-50, number: "-50"),
+          "teal-100": (name: "teal", color: $teal-100, number: "-100"),
+          "teal-200": (name: "teal", color: $teal-200, number: "-200"),
+          "teal-300": (name: "teal", color: $teal-300, number: "-300"),
+          "teal-400": (name: "teal", color: $teal-400, number: "-400"),
+          "teal-500": (name: "teal", color: $teal-500, number: "-500"),
+          "teal-600": (name: "teal", color: $teal-600, number: "-600"),
+          "teal-700": (name: "teal", color: $teal-700, number: "-700"),
+          "teal-800": (name: "teal", color: $teal-800, number: "-800"),
+          "teal-900": (name: "teal", color: $teal-900, number: "-900"),
+          "teal-A100": (name: "teal", color: $teal-A100, number: "-A100"),
+          "teal-A200": (name: "teal", color: $teal-A200, number: "-A200"),
+          "teal-A400": (name: "teal", color: $teal-A400, number: "-A400"),
+          "teal-A700": (name: "teal", color: $teal-A700, number: "-A700"),
+          "teal": (name: "teal", color: $teal, number: ""),
+          "green-50": (name: "green", color: $green-50, number: "-50"),
+          "green-100": (name: "green", color: $green-100, number: "-100"),
+          "green-200": (name: "green", color: $green-200, number: "-200"),
+          "green-300": (name: "green", color: $green-300, number: "-300"),
+          "green-400": (name: "green", color: $green-400, number: "-400"),
+          "green-500": (name: "green", color: $green-500, number: "-500"),
+          "green-600": (name: "green", color: $green-600, number: "-600"),
+          "green-700": (name: "green", color: $green-700, number: "-700"),
+          "green-800": (name: "green", color: $green-800, number: "-800"),
+          "green-900": (name: "green", color: $green-900, number: "-900"),
+          "green-A100": (name: "green", color: $green-A100, number: "-A100"),
+          "green-A200": (name: "green", color: $green-A200, number: "-A200"),
+          "green-A400": (name: "green", color: $green-A400, number: "-A400"),
+          "green-A700": (name: "green", color: $green-A700, number: "-A700"),
+          "green": (name: "green", color: $green, number: ""),
+          "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
+          "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"),
+          "light-green-200": (name: "light-green", color: $light-green-200, number: "-200"),
+          "light-green-300": (name: "light-green", color: $light-green-300, number: "-300"),
+          "light-green-400": (name: "light-green", color: $light-green-400, number: "-400"),
+          "light-green-500": (name: "light-green", color: $light-green-500, number: "-500"),
+          "light-green-600": (name: "light-green", color: $light-green-600, number: "-600"),
+          "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"),
+          "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"),
+          "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"),
+          "light-green-A100": (name: "light-green", color: $light-green-A100, number: "-A100"),
+          "light-green-A200": (name: "light-green", color: $light-green-A200, number: "-A200"),
+          "light-green-A400": (name: "light-green", color: $light-green-A400, number: "-A400"),
+          "light-green-A700": (name: "light-green", color: $light-green-A700, number: "-A700"),
+          "light-green": (name: "light-green", color: $light-green, number: ""),
+          "lime-50": (name: "lime", color: $lime-50, number: "-50"),
+          "lime-100": (name: "lime", color: $lime-100, number: "-100"),
+          "lime-200": (name: "lime", color: $lime-200, number: "-200"),
+          "lime-300": (name: "lime", color: $lime-300, number: "-300"),
+          "lime-400": (name: "lime", color: $lime-400, number: "-400"),
+          "lime-500": (name: "lime", color: $lime-500, number: "-500"),
+          "lime-600": (name: "lime", color: $lime-600, number: "-600"),
+          "lime-700": (name: "lime", color: $lime-700, number: "-700"),
+          "lime-800": (name: "lime", color: $lime-800, number: "-800"),
+          "lime-900": (name: "lime", color: $lime-900, number: "-900"),
+          "lime-A100": (name: "lime", color: $lime-A100, number: "-A100"),
+          "lime-A200": (name: "lime", color: $lime-A200, number: "-A200"),
+          "lime-A400": (name: "lime", color: $lime-A400, number: "-A400"),
+          "lime-A700": (name: "lime", color: $lime-A700, number: "-A700"),
+          "lime": (name: "lime", color: $lime, number: ""),
+          "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
+          "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
+          "yellow-200": (name: "yellow", color: $yellow-200, number: "-200"),
+          "yellow-300": (name: "yellow", color: $yellow-300, number: "-300"),
+          "yellow-400": (name: "yellow", color: $yellow-400, number: "-400"),
+          "yellow-500": (name: "yellow", color: $yellow-500, number: "-500"),
+          "yellow-600": (name: "yellow", color: $yellow-600, number: "-600"),
+          "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
+          "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
+          "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
+          "yellow-A100": (name: "yellow", color: $yellow-A100, number: "-A100"),
+          "yellow-A200": (name: "yellow", color: $yellow-A200, number: "-A200"),
+          "yellow-A400": (name: "yellow", color: $yellow-A400, number: "-A400"),
+          "yellow-A700": (name: "yellow", color: $yellow-A700, number: "-A700"),
+          "yellow": (name: "yellow", color: $yellow, number: ""),
+          "amber-50": (name: "amber", color: $amber-50, number: "-50"),
+          "amber-100": (name: "amber", color: $amber-100, number: "-100"),
+          "amber-200": (name: "amber", color: $amber-200, number: "-200"),
+          "amber-300": (name: "amber", color: $amber-300, number: "-300"),
+          "amber-400": (name: "amber", color: $amber-400, number: "-400"),
+          "amber-500": (name: "amber", color: $amber-500, number: "-500"),
+          "amber-600": (name: "amber", color: $amber-600, number: "-600"),
+          "amber-700": (name: "amber", color: $amber-700, number: "-700"),
+          "amber-800": (name: "amber", color: $amber-800, number: "-800"),
+          "amber-900": (name: "amber", color: $amber-900, number: "-900"),
+          "amber-A100": (name: "amber", color: $amber-A100, number: "-A100"),
+          "amber-A200": (name: "amber", color: $amber-A200, number: "-A200"),
+          "amber-A400": (name: "amber", color: $amber-A400, number: "-A400"),
+          "amber-A700": (name: "amber", color: $amber-A700, number: "-A700"),
+          "amber": (name: "amber", color: $amber, number: ""),
+          "orange-50": (name: "orange", color: $orange-50, number: "-50"),
+          "orange-100": (name: "orange", color: $orange-100, number: "-100"),
+          "orange-200": (name: "orange", color: $orange-200, number: "-200"),
+          "orange-300": (name: "orange", color: $orange-300, number: "-300"),
+          "orange-400": (name: "orange", color: $orange-400, number: "-400"),
+          "orange-500": (name: "orange", color: $orange-500, number: "-500"),
+          "orange-600": (name: "orange", color: $orange-600, number: "-600"),
+          "orange-700": (name: "orange", color: $orange-700, number: "-700"),
+          "orange-800": (name: "orange", color: $orange-800, number: "-800"),
+          "orange-900": (name: "orange", color: $orange-900, number: "-900"),
+          "orange-A100": (name: "orange", color: $orange-A100, number: "-A100"),
+          "orange-A200": (name: "orange", color: $orange-A200, number: "-A200"),
+          "orange-A400": (name: "orange", color: $orange-A400, number: "-A400"),
+          "orange-A700": (name: "orange", color: $orange-A700, number: "-A700"),
+          "orange": (name: "orange", color: $orange, number: ""),
+          "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
+          "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"),
+          "deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"),
+          "deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"),
+          "deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"),
+          "deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"),
+          "deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"),
+          "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
+          "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"),
+          "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
+          "deep-orange-A100": (name: "deep-orange", color: $deep-orange-A100, number: "-A100"),
+          "deep-orange-A200": (name: "deep-orange", color: $deep-orange-A200, number: "-A200"),
+          "deep-orange-A400": (name: "deep-orange", color: $deep-orange-A400, number: "-A400"),
+          "deep-orange-A700": (name: "deep-orange", color: $deep-orange-A700, number: "-A700"),
+          "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
+          "brown-50": (name: "brown", color: $brown-50, number: "-50"),
+          "brown-100": (name: "brown", color: $brown-100, number: "-100"),
+          "brown-200": (name: "brown", color: $brown-200, number: "-200"),
+          "brown-300": (name: "brown", color: $brown-300, number: "-300"),
+          "brown-400": (name: "brown", color: $brown-400, number: "-400"),
+          "brown-500": (name: "brown", color: $brown-500, number: "-500"),
+          "brown-600": (name: "brown", color: $brown-600, number: "-600"),
+          "brown-700": (name: "brown", color: $brown-700, number: "-700"),
+          "brown-800": (name: "brown", color: $brown-800, number: "-800"),
+          "brown-900": (name: "brown", color: $brown-900, number: "-900"),
+          "brown-A100": (name: "brown", color: $brown-A100, number: "-A100"),
+          "brown-A200": (name: "brown", color: $brown-A200, number: "-A200"),
+          "brown-A400": (name: "brown", color: $brown-A400, number: "-A400"),
+          "brown-A700": (name: "brown", color: $brown-A700, number: "-A700"),
+          "brown": (name: "brown", color: $brown, number: ""),
+          "grey-50": (name: "grey", color: $grey-50, number: "-50"),
+          "grey-100": (name: "grey", color: $grey-100, number: "-100"),
+          "grey-200": (name: "grey", color: $grey-200, number: "-200"),
+          "grey-300": (name: "grey", color: $grey-300, number: "-300"),
+          "grey-400": (name: "grey", color: $grey-400, number: "-400"),
+          "grey-500": (name: "grey", color: $grey-500, number: "-500"),
+          "grey-600": (name: "grey", color: $grey-600, number: "-600"),
+          "grey-700": (name: "grey", color: $grey-700, number: "-700"),
+          "grey-800": (name: "grey", color: $grey-800, number: "-800"),
+          "grey-900": (name: "grey", color: $grey-900, number: "-900"),
+          "grey-A100": (name: "grey", color: $grey-A100, number: "-A100"),
+          "grey-A200": (name: "grey", color: $grey-A200, number: "-A200"),
+          "grey-A400": (name: "grey", color: $grey-A400, number: "-A400"),
+          "grey-A700": (name: "grey", color: $grey-A700, number: "-A700"),
+          "grey": (name: "grey", color: $grey, number: ""),
+          "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
+          "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"),
+          "blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"),
+          "blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"),
+          "blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"),
+          "blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"),
+          "blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"),
+          "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
+          "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"),
+          "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
+          "blue-grey-A100": (name: "blue-grey", color: $blue-grey-A100, number: "-A100"),
+          "blue-grey-A200": (name: "blue-grey", color: $blue-grey-A200, number: "-A200"),
+          "blue-grey-A400": (name: "blue-grey", color: $blue-grey-A400, number: "-A400"),
+          "blue-grey-A700": (name: "blue-grey", color: $blue-grey-A700, number: "-A700"),
+          "blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
+  );
+
+  @each $material-color-combination, $color-attributes in $material-colors {
+    // build a single depth color palette
+    $args-variation-color: map-merge($args, (
+            material-color-name: map-get($color-attributes, name),
+            material-color: map-get($color-attributes, color),
+            material-color-number: map-get($color-attributes, number)
+    ));
+
+    //@debug "generic-variations-color #{map-get($color-attributes, name)} #{map-get($color-attributes, color)} #{map-get($color-attributes, number)}";
+    @include generic-variations-color($args-variation-color)
+  }
+}

sass/_mixins-shared.scss

@@ -0,0 +1,292 @@
+// This file is NOT automatically converted and must be manually merged
+@import "mixins-utilities";
+
+// Placeholder text
+@mixin material-placeholder() {
+  &::-moz-placeholder {@content; } // Firefox
+  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
+}
+
+
+// variations(unquote(""), background-color, #FFF);
+@mixin variations($extra, $material-param-1, $default) {
+  @include generic-variations($extra, $default, "variations-content", $material-param-1);
+}
+
+@mixin variations-content($args) {
+  //@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, material-color)}; }";
+  //@debug "#{inspect($args)}";
+  //@error "break here";
+  #{map-get($args, material-param-1)}: map-get($args, material-color);
+}
+
+@mixin background-variations($extra, $default) {
+  @include generic-variations($extra, $default, "background-variations-content", null);
+}
+
+@mixin background-variations-content($args) {
+  background-color: map-get($args, material-color);
+  @if (map-get($args, material-color) == $btn-default) {
+    color: $lightbg-text;
+  } @else {
+    color: map-get($args, material-text-color);
+  }
+}
+
+@mixin text-variations($extra, $default) {
+  @include generic-variations($extra, $default, "text-variations-content", null);
+}
+
+@mixin text-variations-content($args) {
+  color: map-get($args, material-color);
+}
+
+@mixin button-variations($extra, $default, $material-param-1) {
+  @include generic-variations($extra, $default, "button-variations-content", $material-param-1);
+}
+
+@mixin button-variations-content($args) {
+  //@debug "#{inspect($args)}";
+  $material-color: map-get($args, material-color);
+  $material-param-1: map-get($args, material-param-1);
+  background-color: contrast-color($material-color,
+          darken($material-color, $material-param-1),
+          lighten($material-color, $material-param-1));
+}
+
+@mixin bg-color-variations($extra, $default, $material-param-1) {
+  @include generic-variations($extra, $default, "bg-color-variations-content", $material-param-1);
+}
+
+@mixin bg-color-variations-content($args) {
+  background-color: rgba(map-get($args, material-color), map-get($args, material-param-1));
+}
+
+// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
+@mixin bg-box-shadow-variations($extra, $default) {
+  @include generic-variations($extra, $default, "bg-box-shadow-variations-content", null);
+}
+
+@mixin bg-box-shadow-variations-content($args){
+  $material-color: map-get($args, material-color);
+  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
+}
+
+// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
+@mixin bg-img-variations($extra, $default) {
+  @include generic-variations($extra, $default, "bg-img-variations-content", null);
+}
+
+@mixin bg-img-variations-content($args){
+  $material-color: map-get($args, material-color);
+  //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, material-color-name)} #{map-get($args, material-color)}"; //#{inspect($args)}";
+  background-image: linear-gradient($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color);
+}
+
+// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
+@mixin navbar-variations($extra, $default) {
+  @include generic-variations($extra, $default, "navbar-variations-content", null);
+}
+
+@mixin navbar-variations-content($args){
+  $material-color: map-get($args, material-color);
+  $material-text-color: map-get($args, material-text-color);
+
+  background-color: $material-color;
+  color: $material-text-color;
+  // deeply defined to override welljumbo class without !impotant need
+  .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
+    color: $material-text-color;
+  }
+  .dropdown-menu {
+    border-radius: $dropdown-radius;
+    li > a {
+      font-size: $dropdown-font-size;
+      padding: 13px 16px;
+      &:hover,
+      &:focus {
+        color: $material-color;
+        background-color: $grey-200;
+      }
+    }
+    .active > a {
+      &:hover,
+      &:focus {
+        color: $material-text-color;
+      }
+      background-color: $material-color;
+      color: $material-text-color;
+    }
+  }
+}
+
+// alert-variations("", $primary)
+@mixin alert-variations($extra, $default) {
+  @include generic-variations($extra, $default, "alert-variations-content", null);
+}
+
+@mixin alert-variations-content($args){
+  $material-color: map-get($args, material-color);
+  $material-text-color: map-get($args, material-text-color);
+
+  background-color: $material-color;
+  color: $material-text-color;
+
+  a, .alert-link {
+    color: $material-text-color;
+  }
+}
+
+// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
+@mixin call-variations-content-mixin($args) {
+  $mixin-name: map-get($args, mixin-name);
+  @if $mixin-name == variations-content {
+    @include variations-content($args);
+  } @else if $mixin-name == background-variations-content {
+    @include background-variations-content($args);
+  } @else if $mixin-name == text-variations-content {
+    @include text-variations-content($args);
+  } @else if $mixin-name == button-variations-content {
+    @include button-variations-content($args);
+  } @else if $mixin-name == bg-color-variations-content {
+    @include bg-color-variations-content($args);
+  } @else if $mixin-name == bg-box-shadow-variations-content {
+    @include bg-box-shadow-variations-content($args);
+  } @else if $mixin-name == bg-img-variations-content {
+    @include bg-img-variations-content($args);
+  } @else if $mixin-name == navbar-variations-content {
+    @include navbar-variations-content($args);
+  }@else if $mixin-name == alert-variations-content {
+    @include alert-variations-content($args);
+  } @else {
+    @error "Unknown mixin: #{$mixin-name}"
+  }
+}
+
+//
+// To use this mixin you should pass a function as final parameter to define
+// the style. In that definition you can use the following variables to define it.
+//
+// $material-color-name ---> "red", "green", "indigo" ...
+// $material-color-full-name ---> "red", "green-50", "indigo-400" ...
+// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
+// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+//
+
+@mixin generic-variations($extra, $default, $mixin-name, $material-param-1) {
+
+  //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
+  $args: (
+          extra: $extra,
+          default: $default,
+          mixin-name: $mixin-name,
+          material-param-1: $material-param-1
+  );
+
+  // bootstrap styles
+  &#{$extra}, &-default#{$extra} {
+
+    $args-extra: map-merge($args, (
+            material-color-name: "default",
+            material-color-full-name: "default",
+            material-color: $default,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-extra);
+  }
+  &-black#{$extra} {
+    $args-black: map-merge($args, (
+            material-color-name: "black",
+            material-color-full-name: "black",
+            material-color: $black,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-black);
+  }
+  &-white#{$extra} {
+    $args-white: map-merge($args, (
+            material-color-name: "white",
+            material-color-full-name: "white",
+            material-color: $white,
+            material-text-color: $lightbg-text
+    ));
+    @include call-variations-content-mixin($args-white);
+  }
+  &-inverse#{$extra} {
+    $args-inverse: map-merge($args, (
+            material-color-name: "inverse",
+            material-color-full-name: "inverse",
+            material-color: $inverse,
+            material-text-color: contrast-color($inverse, $lightbg-text, $darkbg-text)
+    ));
+    @include call-variations-content-mixin($args-inverse);
+  }
+  &-primary#{$extra} {
+    $args-primary: map-merge($args, (
+            material-color-name: "primary",
+            material-color-full-name: "primary",
+            material-color: $primary,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-primary);
+  }
+  &-success#{$extra} {
+    $args-success: map-merge($args, (
+            material-color-name: "success",
+            material-color-full-name: "success",
+            material-color: $success,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-success);
+  }
+  &-info#{$extra} {
+    $args-info: map-merge($args, (
+            material-color-name: "info",
+            material-color-full-name: "info",
+            material-color: $info,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-info);
+  }
+  &-warning#{$extra} {
+    $args-warning: map-merge($args, (
+            material-color-name: "warning",
+            material-color-full-name: "warning",
+            material-color: $warning,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-warning);
+  }
+  &-danger#{$extra} {
+    $args-danger: map-merge($args, (
+            material-color-name: "danger",
+            material-color-full-name: "danger",
+            material-color: $danger,
+            material-text-color: $darkbg-text
+    ));
+    @include call-variations-content-mixin($args-danger);
+  }
+
+  @include generic-variations-colors($args)
+}
+
+@mixin generic-variations-color($args) {
+  $material-color-name: map-get($args, material-color-name);
+  $material-color-number: map-get($args, material-color-number);
+  $material-color-full-name: "#{$material-color-name}#{$material-color-number}";
+  $material-color: map-get($args, material-color); // $material-color-full-name;
+  $material-text-color: contrast-color($material-color, $lightbg-text, $darkbg-text);
+
+  &-material-#{$material-color-name}#{unquote($material-color-number)}#{map-get($args, extra)} {
+    $args-color: map-merge($args, (
+            material-color-full-name: $material-color-full-name,
+            material-color: $material-color,
+            material-text-color: $material-text-color,
+    ));
+
+    @include call-variations-content-mixin($args-color);
+  }
+}
+
+$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");

sass/_mixins-utilities.scss

@@ -0,0 +1,29 @@
+// This file is here to emulate the less #contrast function
+
+// contrast-color and brightness borrowed from compass
+// Copyright (c) 2009-2014 Christopher M. Eppstein
+// Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown
+@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
+  }
+  @if $color == null {
+    @return null;
+  }
+  @else {
+    $color-brightness: brightness($color);
+    $dark-text-brightness: brightness($dark);
+    $light-text-brightness: brightness($light);
+    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+  }
+}
+
+@function brightness($color) {
+  @if type-of($color) == color {
+    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
+  }
+  @else {
+    @return unquote("brightness(#{$color})");
+  }
+}

sass/_mixins.scss

@@ -1,32 +1,41 @@
-@mixin card-variant($background, $color, $border) {
-  background-color: $background;
-  color: $color;
+// This file is NOT automatically converted and must be manually merged
+@import 'mixins-shared';
 
-  .card-footer, .card-header {
-    border-color: $border;
-  }
+@mixin generic-variations-colors($args) {
 
-  a {
-    color: $color;
+  $material-colors: (
+          "red": $red,
+          "pink": $pink,
+          "purple": $purple,
+          "deep-purple": $deep-purple,
+          "indigo": $indigo,
+          "blue": $blue,
+          "light-blue": $light-blue,
+          "cyan": $cyan,
+          "teal": $teal,
+          "green": $green,
+          "light-green": $light-green,
+          "lime": $lime,
+          "yellow": $yellow,
+          "amber": $amber,
+          "orange": $orange,
+          "deep-orange": $deep-orange,
+          "brown": $brown,
+          "grey": $grey,
+          "blue-grey": $blue-grey
+  );
+
+  @each $material-color-name, $material-color in $material-colors {
+    // build a single depth color palette
+    $args-variation-color: map-merge($args, (
+            material-color-name: $material-color-name,
+            material-color: $material-color,
+            material-color-number: ""
+    ));
+
+    @include generic-variations-color($args-variation-color)
   }
 }
 
-@mixin button-variant($color) {
-    background-color: $color;
-}
-
-@mixin alert-variant($color) {
-    background-color: $color;
-}
-
-@mixin progress-bar-variant($color) {
-    background-color: $color;
-}
-
-@mixin navbar-variant($color) {
-    background-color: $color;
-}
-
-@mixin icon-variant($color) {
-    color: $color;
-}
+// http://hugogiraudel.com/2014/01/27/casting-types-in-sass/
+// https://github.com/HugoGiraudel/SassyJSON/blob/master/stylesheets/decode/helpers/color/_color.scss

sass/_navbar.scss

@@ -1,286 +1,211 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .navbar {
-    background-color: $navbar-default-bg;
-    border: 0;
-    border-radius: 0;
+  background-color: $primary;
+  border: $zero;
+  border-radius: $zero;
 
-    .navbar-brand {
-        position: relative;
-        height: 60px;
-        line-height: 30px;
-        color: $navbar-brand-color;
-        &:hover,
-        &:focus {
-            color: $navbar-brand-color;
-            background-color: transparent;
+  .navbar-brand {
+    position: relative;
+    height: 60px;
+    line-height: 30px;
+    color: inherit;
+    &:hover,
+    &:focus {
+      color: inherit;
+      background-color: transparent;
+    }
+  }
+
+  .navbar-text {
+    color: inherit;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: inherit;
+      padding-top: 20px;
+      padding-bottom: 20px;
+
+      &:hover,
+      &:focus {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+    > .active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: inherit;
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: inherit;
+        background-color: transparent;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  // Darken the responsive nav toggle
+  .navbar-toggle {
+    border: $zero;
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+    .icon-bar {
+      background-color: inherit;
+      border: 1px solid;
+    }
+  }
+
+  .navbar-default .navbar-toggle,
+  .navbar-inverse .navbar-toggle {
+    border-color: transparent;
+  }
+
+  .navbar-collapse,
+  .navbar-form {
+    border-color: rgba(0,0,0,0.1);
+  }
+
+  // Dropdowns
+  .navbar-nav {
+    > .open > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+
+    @media (max-width: 767px) {
+      .navbar-text {
+        color: inherit;
+        margin-top: 15px;
+        margin-bottom: 15px;
+      }
+
+      // Dropdowns get custom display
+      .open .dropdown-menu {
+        > .dropdown-header {
+          border: $zero;
+          color: inherit;
+        }
+        .divider {
+          border-bottom: 1px solid;
+          opacity: 0.08;
         }
-    }
-
-    .navbar-text {
-        color: $navbar-color;
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
-
-    .navbar-nav {
         > li > a {
-            color: $navbar-link-color;
-            padding-top: 20px;
-            padding-bottom: 20px;
-
-            &:hover,
-            &:focus {
-                color: $navbar-link-hover-color;
-                background-color: $navbar-link-hover-bg;
-            }
+          color: inherit;
+          &:hover,
+          &:focus {
+            color: inherit;
+            background-color: transparent;
+          }
         }
         > .active > a {
-            &,
-            &:hover,
-            &:focus {
-                color: $navbar-link-active-color;
-                background-color: $navbar-link-active-bg;
-            }
+          &,
+          &:hover,
+          &:focus {
+            color: inherit;
+            background-color: transparent;
+          }
         }
         > .disabled > a {
-            &,
-            &:hover,
-            &:focus {
-                color: $navbar-link-disabled-color;
-                background-color: $navbar-link-disabled-bg;
-            }
+          &,
+          &:hover,
+          &:focus {
+            color: inherit;
+            background-color: transparent;
+          }
         }
+      }
+    }
+  }
+
+  .navbar-link {
+    color: inherit;
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  .btn-link {
+    color: inherit;
+    &:hover,
+    &:focus {
+      color: inherit;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      &:hover,
+      &:focus {
+        color: inherit;
+      }
+    }
+  }
+
+  .navbar-form {
+    margin-top: 16px;
+    .form-group {
+      margin: 0;
+      padding: 0;
+
+      .material-input:before,
+      &.is-focused .material-input:after {
+        background-color: inherit;
+      }
     }
 
-    // Darken the responsive nav toggle
-    .navbar-toggle {
-        border-color: $navbar-toggle-border-color;
-        &:hover,
-        &:focus {
-            background-color: $navbar-toggle-hover-bg;
-        }
-        .icon-bar {
-            background-color: $navbar-toggle-icon-bar-bg;
-        }
-    }
+    .form-group .form-control,
+    .form-control {
+      border-color: inherit;
+      color: inherit;
+      padding: 0;
+      margin: 0;
 
-    .navbar-collapse,
+      // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
+      //---
+      //height: $input-height-base;
+      $bs-line-height-base: 1.428571429 !default;
+      $bs-line-height-computed:    floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
+      height: ($bs-line-height-computed + 8px);
+      font-size: $font-size-base;
+      line-height: $bs-line-height-base;
+      //---
+    }
+  }
+
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
+  @include navbar-variations(unquote(".navbar"), $primary);
+
+  &-inverse {
+    background-color: $indigo;
+  }
+
+  @media (max-width: 1199px) {
+
+    .navbar-brand {
+      height: 50px;
+      padding: 10px 15px;
+    }
     .navbar-form {
-        border-color: rgba(0,0,0,0.1);
+      margin-top: 10px;
     }
 
-    // Dropdowns
-    .navbar-nav {
-        > .open > a {
-            &,
-            &:hover,
-            &:focus {
-                background-color: $navbar-link-active-bg;
-                color: $navbar-link-active-color;
-            }
-        }
-
-        @media (max-width: 767px) {
-            // Dropdowns get custom display
-            .open .dropdown-menu {
-                > .dropdown-header {
-                    border: 0;
-                    color: darken($navbar-link-color, 17%)
-                }
-                .divider {
-                    background-color: $navbar-border;
-                }
-                > li > a {
-                    color: $navbar-link-color;
-                    &:hover,
-                    &:focus {
-                        color: $navbar-link-hover-color;
-                        background-color: $navbar-link-hover-bg;
-                    }
-                }
-                > .active > a {
-                    &,
-                    &:hover,
-                    &:focus {
-                        color: $navbar-link-active-color;
-                        background-color: $navbar-link-active-bg;
-                    }
-                }
-                > .disabled > a {
-                    &,
-                    &:hover,
-                    &:focus {
-                        color: $navbar-link-disabled-color;
-                        background-color: $navbar-link-disabled-bg;
-                    }
-                }
-            }
-        }
-    }
-
-    .navbar-link {
-        color: $navbar-link-color;
-        &:hover {
-            color: $navbar-link-hover-color;
-        }
-    }
-
-    .navbar-link {
-        color: $navbar-link-color;
-        &:hover,
-        &:focus {
-            color: $navbar-link-hover-color;
-        }
-        &[disabled],
-        fieldset[disabled] & {
-            &:hover,
-            &:focus {
-                color: $navbar-link-disabled-color;
-            }
-        }
-    }
-
-    .navbar-form {
-        margin-top: 16px;
-        .form-control-wrapper .form-control, .form-control {
-            border-color: $navbar-border;
-            color: $navbar-border;
-        }
-        .form-control-wrapper {
-            .material-input:before, input:focus ~ .material-input:after {
-                background-color: $navbar-border;
-            }
-        }
-        ::-webkit-input-placeholder { color: $navbar-border; }
-        :-moz-placeholder { color: $navbar-border; };
-        ::-moz-placeholder { color: $navbar-border; };
-        :-ms-input-placeholder { color: $navbar-border; };
+    .navbar-nav > li > a {
+      padding-top: 15px;
+      padding-bottom: 15px;
     }
+  }
 }
-
-.navbar-inverse {
-        background-color: $navbar-inverse-bg;
-    }
-
-.navbar-white {
-        background-color: #FFF;
-        .navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
-            color: $lightbg-text;
-        }
-        .navbar-nav {
-            & > li > a {
-                color: $lightbg-text;
-
-                &:hover,
-                &:focus {
-                    color: $lightbg-text;
-                    background-color: $navbar-link-hover-bg;
-                }
-            }
-            & > .active > a {
-                &,
-                &:hover,
-                &:focus {
-                    color: $lightbg-text;
-                    background-color: $navbar-link-active-bg;
-                }
-            }
-            & > .disabled > a {
-                &,
-                &:hover,
-                &:focus {
-                    color: $lightbg-text;
-                    background-color: $navbar-link-disabled-bg;
-                }
-            }
-
-            & > .open > a {
-                &,
-                &:hover,
-                &:focus {
-                    background-color: $navbar-link-active-bg;
-                    color: $lightbg-text;
-                }
-            }
-
-        }
-    }
-
-// Navbar alternate
-// --------------------------------------------------
-
-.navbar-default {
-  @include navbar-variant($primary);
-}
-.navbar-primary {
-  @include navbar-variant($primary);
-}
-// Success appears as green
-.navbar-success {
-  @include navbar-variant($success);
-}
-// Info appears as blue-green
-.navbar-info {
-  @include navbar-variant($info);
-}
-// Warning appears as orange
-.navbar-warning {
-  @include navbar-variant($warning);
-}
-// Danger and error appear as red
-.navbar-danger {
-  @include navbar-variant($danger);
-}
-
-// Material shades
-.navbar-material-red {
-    @include navbar-variant($red)
-}
-.navbar-material-pink {
-    @include navbar-variant($pink);
-}
-.navbar-material-purple {
-    @include navbar-variant($purple);
-}
-.navbar-material-deeppurple {
-    @include navbar-variant($deeppurple);
-}
-.navbar-material-indigo {
-    @include navbar-variant($indigo);
-}
-.navbar-material-lightblue {
-    @include navbar-variant($lightblue);
-}
-.navbar-material-cyan {
-    @include navbar-variant($cyan);
-}
-.navbar-material-teal {
-    @include navbar-variant($teal);
-}
-.navbar-material-lightgreen {
-    @include navbar-variant($lightgreen);
-}
-.navbar-material-lime {
-    @include navbar-variant($lime);
-}
-.navbar-material-lightyellow {
-    @include navbar-variant($lightyellow);
-}
-.navbar-material-orange {
-    @include navbar-variant($orange);
-}
-.navbar-material-deeporange {
-    @include navbar-variant($deeporange);
-}
-.navbar-material-grey {
-    @include navbar-variant($grey);
-}
-.navbar-material-bluegrey {
-    @include navbar-variant($bluegrey);
-}
-.navbar-material-brown {
-    @include navbar-variant($brown);
-}
-.navbar-material-lightgrey {
-    @include navbar-variant($lightgrey);
-}
-

sass/_panels.scss

@@ -0,0 +1,23 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.panel {
+  border-radius: 2px;
+  border: 0;
+
+  @include variations(unquote(" > .panel-heading"), background-color, $grey-200);
+  @include shadow-z-1;
+}
+
+
+[class*="panel-"] > .panel-heading {
+  color: $darkbg-text;
+  border: 0;
+}
+.panel-default, .panel:not([class*="panel-"]) {
+  > .panel-heading {
+    color: $lightbg-text;
+  }
+}
+.panel-footer {
+  background-color: $grey-200;
+}

sass/_plugin-dropdownjs.scss

@@ -0,0 +1,21 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.dropdownjs:after {
+    right: 5px;
+    top: 3px;
+    font-size: 25px;
+    position: absolute;
+    content: "\e8ac";
+    font-family: "Material-Design-Icons";
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    pointer-events: none;
+    color: #757575;
+
+}

sass/_plugin-nouislider.scss

@@ -1,3 +1,5 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .noUi-target,
 .noUi-target * {
     -webkit-touch-callout: none;
@@ -37,12 +39,20 @@
 .noUi-horizontal {
     height: 10px;
 }
-.noUi-horizontal .noUi-handle {
+.noUi-handle {
     box-sizing: border-box;
     width: 12px;
     height: 12px;
     left: -10px;
     top: -5px;
+    cursor: ew-resize;
+    border-radius: 100%;
+    transition: all 0.2s ease-out;
+    border: 1px solid;
+}
+.noUi-vertical .noUi-handle {
+    margin-left: 5px;
+    cursor: ns-resize;
 }
 .noUi-horizontal.noUi-extended {
     padding: 0 15px;
@@ -70,18 +80,18 @@
 .noUi-target {
     border-radius: 2px;
 }
-.noUi-handle {
-    border-radius: 100%;
-    cursor: default;
-    transition: all 0.2s ease-out;
-    border: 1px solid;
-}
 .noUi-horizontal {
     height: 2px;
     margin: 15px 0;
 }
-.noUi-horizontal .noUi-handle.noUi-active {
-    transform: scale(2.5);
+.noUi-vertical {
+    height: 100%;
+    width: 2px;
+    margin: 0 15px;
+    display: inline-block;
+}
+.noUi-handle.noUi-active {
+    transform: scale3d(2.5, 2.5, 1);
 }
 [disabled].noUi-slider{
     opacity: 0.5;
@@ -95,8 +105,8 @@
 }
 
 .slider {
-    //.variations(#{".noUi-connect"}, background-color, $primary);
-    //.variations(#{" .noUi-connect"}, background-color, $primary);
-    //.variations(#{" .noUi-handle"}, background-color, $primary);
-    //.variations(#{" .noUi-handle"}, border-color, $primary);
+    @include variations(unquote(".noUi-connect"), background-color, $primary);
+    @include variations(unquote(" .noUi-connect"), background-color, $primary);
+    @include variations(unquote(" .noUi-handle"), background-color, $primary);
+    @include variations(unquote(" .noUi-handle"), border-color, $primary);
 }

sass/_plugin-selectize.scss

@@ -0,0 +1,93 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+// Support for Selectize plugin
+// http://brianreavis.github.io/selectize.js/
+
+.selectize-control.single, .selectize-control.multi {
+    padding: 0;
+    .selectize-input, .selectize-input.input-active {
+
+        cursor: text;
+        background: transparent;
+        box-shadow: none;
+        border: 0;
+        padding: 0;
+        height: 100%;
+        font-size: 14px;
+        line-height: 30px;
+        .has-items {
+            padding: 0;
+        }
+        &:after {
+            right: 5px;
+            position: absolute;
+            font-size: 7px;
+            content: "\e894";
+            font-family: "Material-Design-Icons";
+            speak: none;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 4;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        input {
+            font-size: 14px;
+            outline: 0px;
+            border: 0px;
+            background: transparent;
+        }
+        &.label-floating-fix input {
+            opacity: 0;
+        }
+        > div, > .item {
+            display: inline-block;
+            margin: 0 8px 3px 0;
+            padding: 0;
+            background: transparent;
+            border: 0;
+            &:after {
+                content: ",";
+            }
+            &:last-of-type:after {
+                content: "";
+            }
+            &.active {
+                font-weight: bold;
+                background: transparent;
+                border: 0;
+            }
+        }
+    }
+    .selectize-dropdown {
+        position: absolute;
+        z-index: 1000;
+        border: 0;
+        width: 100% !important;
+        left: 0 !important;
+        height: auto;
+        background-color: #FFF;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        border-radius: 2px;
+        padding: 0;
+        margin-top: 3px;
+        .active {
+            background-color: inherit;
+        }
+        .highlight {
+            background-color: #d5d8ff;
+        }
+        .selected, .selected.active {
+            background-color: #EEEEEE;
+        }
+        [data-selectable], .optgroup-header {
+            padding: 10px 20px;
+            cursor: pointer;
+        }
+    }
+    .dropdown-active ~ .selectize-dropdown {
+        display: block;
+    }
+}

sass/_plugin-snackbarjs.scss

@@ -1,3 +1,5 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 // Support for SnackbarJS plugin
 // https://github.com/FezVrasta/snackbarjs
 
@@ -7,7 +9,7 @@
     color: $darkbg-text;
     font-size: 14px;
     border-radius: 2px;
-    @extend .shadow-z-1;
+    @include shadow-z-1;
 
     // Animation
     height: 0;

sass/_popups.scss

@@ -1,25 +1,20 @@
-.popover, .tooltip-inner {
-    background: #323232;
-    color: #FFF;
-    border-radius: 2px;
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
+.popover, .tooltip-inner {
+  color: $popover-color;
+  line-height: 1em;
+  background: $popover-background;
+  border: none;
+  border-radius: $material-border-radius;
+  @include shadow-z-1();
 }
 
 .tooltip, .tooltip.in {
-    opacity: 1;
+  opacity: 1;
 }
 
 .popover, .tooltip {
-    &.left .arrow:after, &.left .tooltip-arrow {
-        border-left-color: #323232;
-    }
-    &.right .arrow:after, &.right .tooltip-arrow {
-        border-right-color: #323232;
-    }
-    &.top .arrow:after, &.top .tooltip-arrow {
-        border-top-color: #323232;
-    }
-    &.bottom .arrow:after, &.bottom .tooltip-arrow {
-        border-bottom-color: #323232;
-    }
+  .arrow, .tooltip-arrow {
+    display: none;
+  }
 }

sass/_progress.scss

@@ -1,3 +1,5 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .progress {
     height: 4px;
     border-radius: 0;
@@ -5,85 +7,6 @@
     background: #c8c8c8;
     .progress-bar {
         box-shadow: none;
+        @include variations(unquote(""), background-color, $primary);
     }
-
-    // Alert buttons
-    // --------------------------------------------------
-
-    .progress-bar-default {
-      @include progress-bar-variant($primary);
-    }
-    .progress-bar-primary {
-      @include progress-bar-variant($primary);
-    }
-    // Success appears as green
-    .progress-bar-success {
-      @include progress-bar-variant($success);
-    }
-    // Info appears as blue-green
-    .progress-bar-info {
-      @include progress-bar-variant($info);
-    }
-    // Warning appears as orange
-    .progress-bar-warning {
-      @include progress-bar-variant($warning);
-    }
-    // Danger and error appear as red
-    .progress-bar-danger {
-      @include progress-bar-variant($danger);
-    }
-
-    // Material shades
-    .progress-bar-material-red {
-        @include progress-bar-variant($red)
-    }
-    .progress-bar-material-pink {
-        @include progress-bar-variant($pink);
-    }
-    .progress-bar-material-purple {
-        @include progress-bar-variant($purple);
-    }
-    .progress-bar-material-deeppurple {
-        @include progress-bar-variant($deeppurple);
-    }
-    .progress-bar-material-indigo {
-        @include progress-bar-variant($indigo);
-    }
-    .progress-bar-material-lightblue {
-        @include progress-bar-variant($lightblue);
-    }
-    .progress-bar-material-cyan {
-        @include progress-bar-variant($cyan);
-    }
-    .progress-bar-material-teal {
-        @include progress-bar-variant($teal);
-    }
-    .progress-bar-material-lightgreen {
-        @include progress-bar-variant($lightgreen);
-    }
-    .progress-bar-material-lime {
-        @include progress-bar-variant($lime);
-    }
-    .progress-bar-material-lightyellow {
-        @include progress-bar-variant($lightyellow);
-    }
-    .progress-bar-material-orange {
-        @include progress-bar-variant($orange);
-    }
-    .progress-bar-material-deeporange {
-        @include progress-bar-variant($deeporange);
-    }
-    .progress-bar-material-grey {
-        @include progress-bar-variant($grey);
-    }
-    .progress-bar-material-bluegrey {
-        @include progress-bar-variant($bluegrey);
-    }
-    .progress-bar-material-brown {
-        @include progress-bar-variant($brown);
-    }
-    .progress-bar-material-lightgrey {
-        @include progress-bar-variant($lightgrey);
-    }
-
 }

sass/_radios.scss

@@ -1,95 +1,130 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .form-horizontal .radio {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
-.radio {
+
+@mixin form-group-radio-variant($placeholder-font-size, $line-height){
+  .radio {
     label {
-        cursor: pointer;
-        padding-left: 45px;
-        position: relative;
-        span {
-            display: block;
-            position: absolute;
-            left: 10px;
-            top: 2px;
-            transition-duration: 0.2s;
-        }
-        .circle {
-            border: 2px solid $lightbg-text;
-            height: 15px;
-            width: 15px;
-            border-radius: 100%;
-        }
-        .check {
-            height: 15px;
-            width: 15px;
-            border-radius: 100%;
-            background-color: $radio-default;
-            transform: scale(0);
-        }
-        .check:after {
-            display: block;
-            position: absolute;
-            content: "";
-            background-color: $lightbg-text;
-            left: -18px;
-            top: -18px;
-            height: 50px;
-            width: 50px;
-            border-radius: 100%;
-            z-index: 1;
-            opacity: 0;
-            margin: 0;
-            transform: scale(1.5);
-        }
-        input[type=radio]:not(:checked) ~ .check:after {
-            animation: rippleOff 500ms;
-        }
-        input[type=radio]:checked ~ .check:after {
-            animation: rippleOn 500ms;
-        }
-
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
     }
-    //.variations(#{" input[type=radio]:checked ~ .check"}, background-color, $radio-default);
-    //.variations(#{" input[type=radio]:checked ~ .circle"}, border-color, $radio-default);
+  }
+}
 
-    input[type=radio][disabled] ~ .check,
-    input[type=radio][disabled] ~ .circle {
-        opacity: 0.5;
+.form-group {
+
+  // default label size/location
+  @include form-group-radio-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-radio-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large);
+  }     
+}
+
+.radio {
+  label {
+    cursor: pointer;
+    padding-left: 45px;
+    position: relative;
+    color: $radio-label-color;
+
+    span {
+      display: block;
+      position: absolute;
+      left: 10px;
+      top: 2px;
+      transition-duration: 0.2s;
+    }
+    .circle {
+      border: 2px solid $radio-border-color;
+      height: 15px;
+      width: 15px;
+      border-radius: 100%;
+    }
+    .check {
+      height: 15px;
+      width: 15px;
+      border-radius: 100%;
+      background-color: $radio-default;
+      transform: scale3d(0, 0, 0);
+    }
+    .check:after {
+      display: block;
+      position: absolute;
+      content: "";
+      background-color: $lightbg-text;
+      left: -18px;
+      top: -18px;
+      height: 50px;
+      width: 50px;
+      border-radius: 100%;
+      z-index: 1;
+      opacity: 0;
+      margin: 0;
+      transform: scale3d(1.5, 1.5, 1);
+    }
+    input[type=radio]:not(:checked) ~ .check:after {
+      animation: rippleOff 500ms;
+    }
+    input[type=radio]:checked ~ .check:after {
+      animation: rippleOn 500ms;
     }
 
-    input[type=radio] { display: none; }
-    input[type=radio]:checked ~ .check {
-        transform: scale(0.55);
-    }
-    input[type=radio][disabled] ~ .circle {
-        border-color: $lightbg-text;
-    }
-    input[type=radio][disabled] ~ .check {
-        background-color: $lightbg-text;
-    }
+  }
+  @include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $radio-default);
+  @include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $radio-default);
 
+  input[type=radio][disabled] ~ .check,
+  input[type=radio][disabled] ~ .circle {
+    opacity: 0.5;
+  }
+
+  input[type=radio] {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+  }
+  input[type=radio]:checked ~ .check {
+    transform: scale3d(0.55, 0.55, 1);
+  }
+  input[type=radio][disabled] ~ .circle {
+    border-color: $lightbg-text;
+  }
+  input[type=radio][disabled] ~ .check {
+    background-color: $lightbg-text;
+  }
 }
 
 @keyframes rippleOn {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes rippleOff {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }

sass/_shadows.scss

@@ -1,28 +1,37 @@
-.shadow-z-1 {
-    box-shadow: 0 1px 3px rgba(0,0,0, .12),
-        0 1px 2px rgba(0,0,0, .24) ;
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@mixin shadow-z-1 {
+  box-shadow:
+    0 1px 6px 0 rgba(0, 0, 0, 0.12),
+    0 1px  6px 0 rgba(0, 0, 0, 0.12);
 }
 
-.shadow-z-2 {
-    box-shadow: 0 3px 6px rgba(0,0,0, .16),
-        0 3px 6px rgba(0,0,0, .23) ;
-}
-.shadow-z-2-hover {
-    box-shadow: 0 3px 6px rgba(0,0,0, .20),
-        0 3px 6px rgba(0,0,0, .28) ;
+@mixin shadow-z-1-hover {
+  box-shadow:
+    0 5px 11px 0 rgba(0, 0, 0, 0.18),
+    0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 
-.shadow-z-3 {
-    box-shadow: 0 10px 20px rgba(0,0,0, .19),
-        0 6px 6px rgba(0,0,0, .23) ;
+@mixin shadow-z-2 {
+  box-shadow:
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.shadow-z-4 {
-    box-shadow: 0 14px 28px rgba(0,0,0, .25),
-        0 10px 10px rgba(0,0,0, .22) ;
+@mixin shadow-z-3 {
+  box-shadow:
+    0 12px 15px 0 rgba(0, 0, 0, 0.24),
+    0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }
 
-.shadow-z-5 {
-    box-shadow: 0 19px 38px rgba(0,0,0, .30),
-        0 15px 12px rgba(0,0,0, .22) ;
+@mixin shadow-z-4 {
+  box-shadow:
+    0 16px 28px 0 rgba(0, 0, 0, 0.22),
+    0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+
+@mixin shadow-z-5 {
+  box-shadow:
+    0 27px 24px 0 rgba(0, 0, 0, 0.2),
+    0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }

sass/_tabs.scss

@@ -1,17 +1,19 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .nav-tabs {
-    background: $navbar-default-bg;
+    background: $primary;
     > li {
         > a {
             color: #FFFFFF;
             border: 0;
             margin: 0;
             &:hover {
-                background: transparent;
+                background-color: transparent;
                 border: 0;
             }
         }
-        &.active > a, &.active > a:hover, &.open > a, &.open > a:hover {
-            background: transparent !important;
+        & > a, & > a:hover, & > a:focus {
+            background-color: transparent !important;
             border: 0 !important;
             color: #FFFFFF !important;
             font-weight: 500;

sass/_togglebutton.scss

@@ -0,0 +1,94 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
+  .togglebutton {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-toggle-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-toggle-variant($md-input-font-size-large, $md-input-line-height-large);
+  }
+
+  .togglebutton {
+    vertical-align: middle;
+    &, label, input, .toggle {
+      user-select: none;
+    }
+    label {
+      cursor: pointer;
+      color: $togglebutton-label-color;
+
+      // Hide original checkbox
+      input[type=checkbox] {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+      // Switch bg off and disabled
+      .toggle,
+      input[type=checkbox][disabled] + .toggle {
+        content: "";
+        display: inline-block;
+        width: 30px;
+        height: 15px;
+        background-color: rgba(80, 80, 80, 0.7);
+        border-radius: 15px;
+        margin-right: 10px;
+        transition: background 0.3s ease;
+        vertical-align: middle;
+      }
+      // Handle off
+      .toggle:after {
+        content: "";
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-color: #F1F1F1;
+        border-radius: 20px;
+        position: relative;
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+        left: -5px;
+        top: -2px;
+        transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+      }
+      // Handle disabled
+      input[type=checkbox][disabled] + .toggle:after,
+      input[type=checkbox][disabled]:checked + .toggle:after {
+        background-color: #BDBDBD;
+      }
+      // Ripple off and disabled
+      input[type=checkbox] + .toggle:active:after,
+      input[type=checkbox][disabled] + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+      }
+      input[type=checkbox]:checked + .toggle:after {
+        left: 15px;
+      }
+    }
+
+    // Switch bg on
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
+    @include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
+    // Handle on
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
+    @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
+    // Ripple on
+    @include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
+  }
+}

sass/_variables.scss

@@ -1,100 +1,172 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+// Material Global vars
+$zero: 0 !default;
+
 // material icons path
 $material-font-path: "../fonts" !default;
 
-// Material colors palette
-$red: #F44336 !default;
-$pink: #E91E63 !default;
-$purple: #9C27B0 !default;
-$deeppurple: #673AB7 !default;
-$indigo: #3F51B5 !default;
-$lightblue: #03A9F4 !default;
-$cyan: #00BCD4 !default;
-$teal: #009688 !default;
-$lightgreen: #8BC34A !default;
-$lime: #CDDC39 !default;
-$lightyellow: #FFEB3B !default;
-$orange: #FF9800 !default;
-$deeporange: #FF5722 !default;
-$grey: #9E9E9E !default;
-$bluegrey: #607D8B !default;
-$brown: #795548 !default;
-$lightgrey: #ECECEC !default;
-
 // Bootstrap shades
-$primary: #4285F4 !default;
-$success: #0F9D58 !default;
-$info: $lightblue !default;
-$warning: $deeporange !default;
+$primary: $teal !default;
+$success: $green !default;
+$info: $light-blue !default;
+$warning: $deep-orange !default;
 $danger: $red !default;
 
+$brand-primary: $primary !default;
+$brand-success: $success !default;
+$brand-danger: $danger !default;
+$brand-warning: $warning !default;
+$brand-info: $info !default;
+
 // Typography elements for Material
-$darkbg-text: rgba(255,255,255,0.84);
-$lightbg-text: rgba(0,0,0,0.84);
-$icon-color: rgba(0,0,0,0.5);
+$darkbg-text: rgba(255,255,255,0.84) !default;
+$lightbg-text: rgba(0,0,0,0.84) !default;
+$icon-color: rgba(0,0,0,0.5) !default;
 
 
 // Bootstrap variables
-$btn-default: #FFF;
-$btn-default-text: $lightbg-text;
+$body-bg: #EEEEEE !default;
 
-$btn-primary: $primary;
-$btn-primary-text: $darkbg-text;
+$btn-default: transparent !default;
+$btn-default-text: $lightbg-text !default;
 
-$btn-success: $success;
-$btn-success-text: $darkbg-text;
+$btn-primary: $primary !default;
+$btn-primary-text: $darkbg-text !default;
 
-$btn-info: $info;
-$btn-info-text: $darkbg-text;
+$btn-success: $success !default;
+$btn-success-text: $darkbg-text !default;
 
-$btn-warning: $warning;
-$btn-warning-text: $darkbg-text;
+$btn-info: $info !default;
+$btn-info-text: $darkbg-text !default;
 
-$btn-danger: $danger;
-$btn-danger-text: $darkbg-text;
+$btn-warning: $warning !default;
+$btn-warning-text: $darkbg-text !default;
 
-$input-unchecked: rgba(137, 137, 137, 0.3);
-$input-checked: rgba(15, 157, 88, 0.3);
+$btn-danger: $danger !default;
+$btn-danger-text: $darkbg-text !default;
 
-$radio-default: $lightbg-text;
-$radio-primary: $primary;
-$radio-success: $success;
-$radio-info:    $info;
-$radio-warning: $warning;
-$radio-danger:  $danger;
+$input-unchecked: rgba(137, 137, 137, 0.3) !default;
+$input-checked: rgba(15, 157, 88, 0.3) !default;
 
-$input-danger: $danger;
-$input-default: $primary;
-$input-warning: $warning;
-$input-success: $success;
-$input-info:    $info;
+$radio-default: $lightbg-text !default;
+$radio-primary: $primary !default;
+$radio-success: $success !default;
+$radio-info:    $info !default;
+$radio-warning: $warning !default;
+$radio-danger:  $danger !default;
 
-$navbar-danger-bg: $danger;
-$navbar-inverse-bg: #5264AE;
-$navbar-warning-bg: $warning;
-$navbar-success-bg: $success;
-$navbar-info-bg:    $info;
-$navbar-default-bg: $primary;
-$navbar-color: $darkbg-text;
-$navbar-link-color: $darkbg-text;
-$navbar-link-hover-color: $darkbg-text;
-$navbar-link-hover-bg: transparent;
-$navbar-link-active-color: $darkbg-text;
-$navbar-link-active-bg: rgba(0,0,0,0.05);
-$navbar-link-disabled-color: #E5E5E5;
-$navbar-link-disabled-bg: transparent;
-$navbar-brand-color: $darkbg-text;
-$navbar-toggle-border-color: $darkbg-text;
-$navbar-toggle-hover-bg: transparent;
-$navbar-toggle-icon-bar-bg: $darkbg-text;
-$navbar-border: $darkbg-text;
+$input-danger: $danger !default;
+$input-default: $primary !default;
+$input-warning: $warning !default;
+$input-success: $success !default;
+$input-info:    $info !default;
 
-$alert-success: $success;
-$alert-info: $info;
-$alert-warning: $warning;
-$alert-danger: $danger;
+$alert-success: $success !default;
+$alert-info: $info !default;
+$alert-warning: $warning !default;
+$alert-danger: $danger !default;
 
-$progress-success: $success;
-$progress-info: $info;
-$progress-warning: $warning;
-$progress-danger: $danger;
+$progress-success: $success !default;
+$progress-info: $info !default;
+$progress-warning: $warning !default;
+$progress-danger: $danger !default;
 
+$font-size-base: 14px !default;
+$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+
+
+// Global Material variables
+$material-border-radius: 2px !default;
+
+// --------------------
+// inputs
+$input-placeholder-color: #BDBDBD !default;
+$label-floating-size-ratio: 75 / 100 !default;
+$help-block-size-ratio: 75 / 100 !default;
+$input-underline-color: #D2D2D2 !default;
+
+$md-input-font-size-base: 16px !default;
+$md-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
+$md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
+
+// size when static or floating with focus i.e. 16px
+//$md-input-label-font-size-base: ceil(($label-floating-size-ratio * $md-input-font-size-base)) !default;
+//$md-input-label-font-size-small:ceil(( $label-floating-size-ratio * $md-input-font-size-small)) !default;
+//$md-input-label-font-size-large: ceil(($label-floating-size-ratio * $md-input-font-size-large)) !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$md-input-line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$md-input-line-height-computed:    floor(($md-input-font-size-base * $md-input-line-height-base)) !default; // ~20px
+$md-input-line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$md-input-line-height-small:         1.5 !default;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$md-input-padding-base-vertical:     8px - 1px !default; // was 6.
+$md-input-padding-base-horizontal:   0px !default; // was 12.
+$md-label-as-placeholder-shim-base:  0px !default; // manual adjustment of label top when positioned as placeholder
+$md-label-top-margin-base:           16px !default;
+
+$md-input-padding-large-vertical:    10px - 1px !default; // 10
+$md-input-padding-large-horizontal:  0px !default;  // 16
+$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
+$md-label-top-margin-large:          16px !default;
+
+$md-input-padding-small-vertical:    4px - 1px !default; // 5
+$md-input-padding-small-horizontal:  0px !default; // 10
+$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
+$md-label-top-margin-small:          12px !default;
+
+$md-input-padding-xs-vertical:       2px !default; // 1
+$md-input-padding-xs-horizontal:     0px !default; // 5
+
+$md-input-border-radius-base:        4px !default;
+$md-input-border-radius-large:       6px !default;
+$md-input-border-radius-small:       3px !default;
+
+
+//** Default `.form-control` height
+$md-input-height-base:              ($md-input-line-height-computed + ($md-input-padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$md-input-height-large:             (ceil($md-input-font-size-large * $md-input-line-height-large) + ($md-input-padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$md-input-height-small:             (floor($md-input-font-size-small * $md-input-line-height-small) + ($md-input-padding-small-vertical * 2) + 2) !default;
+
+
+
+
+// Card
+$card-body-text: $lightbg-text !default;
+$card-body-background: #fff !default;
+$card-image-headline: #fff !default;
+
+$text-disabled: #a8a8a8 !default;
+$background-disabled: #eaeaea !default;
+
+// Checkboxes
+$checkbox-size: 20px !default;
+$checkbox-animation-ripple: 500ms !default;
+$checkbox-animation-check: 0.3s !default;
+$checkbox-checked-color: #4caf50 !default;
+$checkbox-label-color: rgba(0, 0, 0, .54) !default;
+$checkbox-border-color: $checkbox-label-color !default;
+
+// Popovers and Popups
+$popover-background: rgba(101, 101, 101, 0.9) !default;
+$popover-color: #ececec !default;
+
+// Dropdown Menu
+$dropdown-radius: 2px !default;
+$dropdown-font-size: 16px !default;
+
+// Toggle
+$togglebutton-label-color: $checkbox-label-color !default;
+
+// Radio:
+$radio-label-color: $checkbox-label-color !default;
+$radio-border-color: $checkbox-border-color !default;

sass/_welljumbo.scss

@@ -1,66 +1,24 @@
-// main: _material.scss
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 body, .container, .container-fluid {
 
-    .well, .well:not([class^="well well-material-"]) {
-        &, .form-control {
-            color: $lightbg-text;
-        }
-        .floating-label {
-            color: #7e7e7e;
-        }
-        .form-control {
-            border-bottom-color: #7e7e7e;
-            &::-webkit-input-placeholder {
-                color: #7e7e7e;
-            }
-            &::-moz-placeholder {
-                color: #7e7e7e;
-                opacity: 1;
-            }
-            &:-ms-input-placeholder {
-                color: #7e7e7e;
-            }
-        }
-        .option, .create {
-            color: $lightbg-text;
-        }
-    }
-
-    [class^="well well-material-"] {
-        &, .form-control, .floating-label {
-            color: $darkbg-text;
-        }
-       .form-control {
-            border-bottom-color: $darkbg-text;
-            &::-webkit-input-placeholder {
-                color: $darkbg-text;
-            }
-            &::-moz-placeholder {
-                color: $darkbg-text;
-                opacity: 1;
-            }
-            &:-ms-input-placeholder {
-                color: $darkbg-text;
-            }
-        }
-        // Rule to fix selectize plugin
-        .option, .create {
-            color: $lightbg-text;
-        }
-    }
-
-    .well, .jumbotron {
-
-        background-color: #fff;
-        padding: 19px;
-        margin-bottom: 20px;
-        @extend .shadow-z-2;
-        border-radius: 2px;
-        border: 0;
-        p {
-            font-weight: 300;
-        }
-
-//        .variations(#{""}, background-color, #FFF);
+  .well.well-sm {
+    padding: 10px;
+  }
+  .well.well-lg {
+    padding: 26px;
+  }
+  .well, .jumbotron {
+
+    background-color: #fff;
+    padding: 19px;
+    margin-bottom: 20px;
+    @include shadow-z-2();
+    border-radius: 2px;
+    border: 0;
+    p {
+      font-weight: 300;
     }
+    @include variations(unquote(""), background-color, #FFF);
+  }
 }

sass/material-fullpalette.scss

@@ -0,0 +1,8 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@import '_colors';
+@import '_variables';
+@import '_mixins-fullpalette';
+@import '_icons-material-design';
+@import '_shadows';  // these are mixins only, and must be placed at the top before use (sass requiremnt)
+@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

sass/material-wfont.scss

@@ -1,8 +0,0 @@
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 100;
-  src: local('RobotoDraft Thin'), local('RobotoDraft-Thin'), url(https://fonts.gstatic.com/s/robotodraft/v2/hope9NW9iJ5hh8P5PM_EA2zZpt1Zv2lgqhgSPQ2HnUo.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-@import "material.scss";

sass/material.scss

@@ -1,113 +1,8 @@
-// Material Theme 0.0.1
-// -----------------------------------------------------
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
-@import "_variables.scss";
-@import "_mixins.scss";
-@import "_shadows.scss";
-@import "_icons-material-design.scss";
-
-body {
-    background-color: #EEEEEE;
-    &.inverse {
-        background: #333333;
-        &, .form-control {
-            color: $darkbg-text;
-        }
-    }
-}
-
-body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-// Well and Jumbotrons
-@import "_welljumbo.scss";
-
-// Buttons
-@import "_buttons.scss";
-
-// Checkboxes
-@import "_checkboxes.scss";
-
-// Radios
-@import "_radios.scss";
-
-// Text inputs
-@import "_inputs.scss";
-
-legend {
-    border-bottom: 0;
-}
-
-.modal-content {
-    @extend .shadow-z-2;
-    border-radius: 0;
-    border: 0;
-    .modal-header {
-        border-bottom: 0;
-    }
-    .modal-footer {
-        border-top: 0;
-        .btn+.btn {
-            margin-bottom: 10px;
-        }
-    }
-}
-
-// Lists
-@import "_lists.scss";
-
-// Navbar
-@import "_navbar.scss";
-
-.dropdown-menu {
-    border: 0;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-    .divider {
-        background-color: rgba(229, 229, 229, 0.12);
-    }
-    li {
-        overflow: hidden;
-        position: relative;
-        a:hover {
-            background: rgba(0,0,0,0.08);
-        }
-    }
-}
-
-// Alerts
-@import "_alerts.scss";
-
-// Progress bar
-@import "_progress.scss";
-
-// Panels
-@import "_cards.scss";
-
-// Typography
-.text-warning {
-    color: $btn-warning;
-}
-.text-primary {
-    color: $btn-primary;
-}
-.text-danger {
-    color: $btn-danger;
-}
-.text-success {
-    color: $btn-success;
-}
-.text-info {
-    color: $btn-info;
-}
-
-@import "_tabs.scss";
-
-@import "_popups.scss";
-
-@import "_icons.scss";
-
-
-// External plugins
-@import "_plugin-snackbarjs.scss";
-@import "_plugin-nouislider.scss";
+@import '_colors';
+@import '_variables';
+@import '_mixins';
+@import '_icons-material-design';
+@import '_shadows';  // these are mixins only, and must be placed at the top before use (sass requiremnt)
+@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

sass/ripples.scss

@@ -1,3 +1,5 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
 .withripple {
     position: relative;
 }
@@ -9,7 +11,8 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    border-radius: 2px;
+    border-radius: inherit;
+    pointer-events: none;
 }
 .ripple {
     position: absolute;
@@ -26,7 +29,7 @@
 }
 .ripple.ripple-on {
     transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    opacity: 1;
+    opacity: 0.1;
 }
 .ripple.ripple-out {
     transition: opacity 0.1s linear 0s !important;