Merge pull request #2 from FezVrasta/master

Update Fork

CHANGELOG.md

@@ -3,9 +3,16 @@
 ## v 0.3.0 dev
 
 - Implemented full color palette from Material Design specifications (thanks @korgan00)
-- Reformat of ripples.js (thanks @grvcoelho)
+- Reformat of `ripples.js` (thanks @grvcoelho)
-- Autofill option of Material.js is now set to false by default
+- Autofill option of `material.js` is now set to false by default
-
+- Deprecated `material-wfont.css`, now to include web fonts you should include roboto.css
+- Now `material.css` supports only the primary shades of the material color palette (lightweight! about 200KB)
+- `material-fullpalette.css` supports every shade of the material color palette (huge size! ~ 2MB)
+- Adjusted padding on dialog(modal) to be more inline with standards (thanks @GradyD)
+- Added jQuery 1.9.1 and Bootstrap 3.0 as dependencies (thanks @GradyD)
+- fixed #468 (thanks @MatrixZ)
+- Added :hover, :focus, :active and .active states on buttons
+- Added color variations on toggles
 
 ## v 0.2.1
 

Gruntfile.js

@@ -22,17 +22,30 @@ module.exports = function(grunt) {
           "dist/css/material.css": "less/material.less",
         }
       },
-      materialwfont: {
+      materialfullpalette: {
         options: {
           paths: ["less"],
           sourceMap: true,
           sourceMapRootpath: "/",
-          sourceMapFilename: "dist/css/material-wfont.css.map",
+          sourceMapFilename: "dist/css/material-fullpalette.css.map",
-          sourceMapURL: "material-wfont.css.map",
+          sourceMapURL: "material-fullpalette.css.map",
           outputSourceFiles: true
         },
         files: {
-          "dist/css/material-wfont.css": "less/material-wfont.less",
+          "dist/css/material-fullpalette.css": "less/material-fullpalette.less",
+        }
+      },
+      roboto: {
+        options: {
+          paths: ["less"],
+          sourceMap: true,
+          sourceMapRootpath: "/",
+          sourceMapFilename: "dist/css/roboto.css.map",
+          sourceMapURL: "roboto.css.map",
+          outputSourceFiles: true
+        },
+        files: {
+          "dist/css/roboto.css": "less/roboto.less",
         }
       },
       ripples: {
@@ -63,10 +76,16 @@ module.exports = function(grunt) {
           "dist/css/material.min.css": "dist/css/material.min.css"
         }
       },
-      materialwfont: {
+      materialfullpalette: {
         files: {
-          "dist/css/material-wfont.css": "dist/css/material-wfont.css",
+          "dist/css/material-fullpalette.css": "dist/css/material-fullpalette.css",
-          "dist/css/material-wfont.min.css": "dist/css/material-wfont.min.css"
+          "dist/css/material-fullpalette.min.css": "dist/css/material-fullpalette.min.css"
+        }
+      },
+      roboto: {
+        files: {
+          "dist/css/roboto.css": "dist/css/roboto.css",
+          "dist/css/roboto.min.css": "dist/css/roboto.min.css"
         }
       },
       ripples: {
@@ -83,9 +102,13 @@ module.exports = function(grunt) {
         src: "dist/css/material.css",
         dest: "dist/css/material.min.css"
       },
-      materialwfont: {
+      materialfullpalette: {
-        src: "dist/css/material-wfont.css",
+        src: "dist/css/material-fullpalette.css",
-        dest: "dist/css/material-wfont.min.css"
+        dest: "dist/css/material-fullpalette.min.css"
+      },
+      roboto: {
+        src: "dist/css/roboto.css",
+        dest: "dist/css/roboto.min.css"
       },
       ripples: {
         src: "dist/css/ripples.css",
@@ -201,7 +224,7 @@ module.exports = function(grunt) {
         files: [
           "index.html",
           "dist/css/**/*.css",
-          "**/*.{png,jpg,jpeg,gif,webp,svg}"
+          "demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
         ]
       }
     },
@@ -243,11 +266,14 @@ module.exports = function(grunt) {
   ]);
   grunt.registerTask("material:less", [
     "less:material",
-    "less:materialwfont",
+    "less:materialfullpalette",
+    "less:roboto",
     "csswring:material",
-    "csswring:materialwfont",
+    "csswring:materialfullpalette",
+    "csswring:roboto",
     "autoprefixer:material",
-    "autoprefixer:materialwfont"
+    "autoprefixer:materialfullpalette",
+    "autoprefixer:roboto"
   ]);
   grunt.registerTask("material:js", [
     "copy:material",

README.md

@@ -29,9 +29,9 @@ 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-wfont.css or material.css?
+#### material-fullpalette.css or material.css?
 
-The only difference is that `material-wfont.css` has the Google web fonts included.
+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
 
@@ -91,6 +91,8 @@ These colors are taken from the Material Design color palette and are reported b
 
 ![palette](demo/imgs/palette.jpg)
 
+To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
+
 ### Buttons
 
 Add `.btn-flat` to a button to make it flat, without shadows.

bootstrap-elements.html

@@ -5,8 +5,9 @@
         <meta charset="utf-8">
         <title>Bootstrap Material</title>
         <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="dist/css/roboto.min.css" rel="stylesheet">
+        <link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
         <link href="dist/css/ripples.min.css" rel="stylesheet">
-        <link href="dist/css/material-wfont.min.css" rel="stylesheet">
         <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>

dist/css/roboto.css

@@ -0,0 +1,25 @@
+@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');
+}
+@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');
+}
+@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');
+}
+@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');
+}
+/*# sourceMappingURL=roboto.css.map */

dist/css/roboto.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/less/roboto.less","roboto.css"],"names":[],"mappings":"AAAA;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,gMAAA;ECAD;ADOD;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,mMAAA;ECND;ADaD;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,yLAAA;ECZD;ADmBD;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,mMAAA;EClBD","file":"roboto.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","@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(../fonts/RobotoDraftRegular.woff2) format('woff2'), url(../fonts/RobotoDraftRegular.woff) format('woff');\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(../fonts/RobotoDraftMedium.woff2) format('woff2'), url(../fonts/RobotoDraftMedium.woff) format('woff');\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(../fonts/RobotoDraftBold.woff2) format('woff2'), url(../fonts/RobotoDraftBold.woff) format('woff');\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(../fonts/RobotoDraftItalic.woff2) format('woff2'), url(../fonts/RobotoDraftItalic.woff) format('woff');\n}\n/*# sourceMappingURL=roboto.css.map */"]}

dist/css/roboto.min.css

@@ -0,0 +1,2 @@
+@font-face{font-family:RobotoDraft;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-weight:500;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-weight:700;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;src:local('RobotoDraft Italic'),local('RobotoDraft-Italic'),local('Roboto-Italic'),url(../fonts/RobotoDraftItalic.woff2) format('woff2'),url(../fonts/RobotoDraftItalic.woff) format('woff')}
+/*# sourceMappingURL=roboto.min.css.map */

dist/css/roboto.min.css.map

@@ -0,0 +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"]}

dist/test.html

@@ -3,8 +3,10 @@
     <head>
 
         <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
-        <link href="css/ripples.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="css/material-wfont.min.css" rel="stylesheet">
+        <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>
 
@@ -38,6 +40,7 @@
         <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>

index.html

@@ -11,7 +11,8 @@
     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Material Design for Bootstrap -->
-    <link href="dist/css/material-wfont.min.css" rel="stylesheet">
+    <link href="dist/css/roboto.min.css" rel="stylesheet">
+    <link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
     <link href="dist/css/ripples.min.css" rel="stylesheet">
 
     <!-- Dropdown.js -->
@@ -406,6 +407,20 @@
                 </label>
               </div>
 
+              <h1 class="header">Toggle Button Variations</h1>
+              <div class="togglebutton togglebutton-material-pink">
+                <label>
+                  Wi-Fi
+                  <input type="checkbox" checked>
+                </label>
+              </div>
+              <div class="togglebutton togglebutton-material-deep-orange">
+                <label>
+                  Bluetooth
+                  <input type="checkbox" checked>
+                </label>
+              </div>
+
               <style>
                 #toggle-button h2 {
                   font-size: 18.7199993133545px;
@@ -755,12 +770,11 @@
             </div>
             <div class="well page" id="material-colors">
               <h1 class="header">Material Color Samples</h1>
-              <p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.
+              <p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
-              </p>
+
-              <pre><code>.btn-material-{{color}}
+              <pre>.btn-material-{{color}}<br>.navbar-material-{{color}}<br>.well-material-{{color}}<br>etc...</pre>
-              .navbar-material-{{color}}
+
-              .well-material-{{color}}
+              <p><b>material.css</b> includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use <b>material-fullpalette.css</b></p>
-              etc...</code></pre>
               <div class="sampleOthers">
                 <button class="btn btn-black btn-lg">Black</button>
                 <button class="btn btn-white btn-lg">White</button>
@@ -1186,11 +1200,14 @@
                   <option value="Sfogliatelle">Sfogliatelle</option>
                 </select>
 
+                <br>
 
                 <select class="form-control" disabled placeholder="Your favorite pastry">
                   <option value="disabled">Disabled</option>
                 </select>
               </div>
+              <br>
+              <p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
 
             </div>
             <div class="well page" id="dialog">

less/_buttons.less

@@ -18,10 +18,31 @@
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 
+
   .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
 
   .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
 
+  // BTN hover effect
+  .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
+  .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
+  .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, {
+    background-color: fade(@material-color, 20%);
+  });
+
+}
+
+.btn {
   &.btn-flat {
     background: none;
     box-shadow: none;

less/_dialogs.less

@@ -1,18 +1,32 @@
+//
+// Modals
+// Material Design element Dialogs
+// --------------------------------------------------
 .modal-content {
   .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: 24px;
+    padding-top:    24px;
-    padding-bottom: 0;
+    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: 24px;
+    padding-top:    0px;
+    padding-right:  24px;
+    padding-bottom: 16px;
+    padding-left:   24px;
   }
+  // Footer (for actions)
   .modal-footer {
     border-top: none;
-    padding: 24px;
+    padding: 7px;
     button {
       margin: 0;
       padding-left: 16px;
@@ -33,7 +47,6 @@
     padding-top: 0;
   }
 }
-
 .modal-backdrop {
   background: rgba(0,0,0,0.3);
 }

less/_dividers.less

@@ -1,71 +1,71 @@
 hr {
-        &.on-dark {
+  &.on-dark {
-            color: lighten(@black, 10%);
+    color: lighten(@black, 10%);
-        }
+  }
 
-        &.on-light {
+  &.on-light {
-            color: lighten(@white, 10%);
+    color: lighten(@white, 10%);
-        }
+  }
 
-        @media  (-webkit-min-device-pixel-ratio: 0.75),
+  @media  (-webkit-min-device-pixel-ratio: 0.75),
-                (min--moz-device-pixel-ratio: 0.75),
+    (min--moz-device-pixel-ratio: 0.75),
-                (-o-device-pixel-ratio: 3/4),
+    (-o-device-pixel-ratio: 3/4),
-                (min-device-pixel-ratio: 0.75),
+    (min-device-pixel-ratio: 0.75),
-                (min-resolution: 0.75dppx),
+    (min-resolution: 0.75dppx),
-                (min-resolution: 120dpi), {
+    (min-resolution: 120dpi), {
-                  height:0.75px;
+      height:0.75px;
-        }
+    }
 
-        @media  (-webkit-min-device-pixel-ratio: 1),
+  @media  (-webkit-min-device-pixel-ratio: 1),
-                (min--moz-device-pixel-ratio: 1),
+    (min--moz-device-pixel-ratio: 1),
-                (-o-device-pixel-ratio: 1),
+    (-o-device-pixel-ratio: 1),
-                (min-device-pixel-ratio: 1),
+    (min-device-pixel-ratio: 1),
-                (min-resolution: 1dppx),
+    (min-resolution: 1dppx),
-                (min-resolution: 160dpi) {
+    (min-resolution: 160dpi) {
-                  height:1px;
+      height:1px;
-        }
+    }
-        @media  (-webkit-min-device-pixel-ratio: 1.33),
+  @media  (-webkit-min-device-pixel-ratio: 1.33),
-                (min--moz-device-pixel-ratio: 1.33),
+    (min--moz-device-pixel-ratio: 1.33),
-                (-o-device-pixel-ratio: 133/100),
+    (-o-device-pixel-ratio: 133/100),
-                (min-device-pixel-ratio: 1.33),
+    (min-device-pixel-ratio: 1.33),
-                (min-resolution: 1.33dppx),
+    (min-resolution: 1.33dppx),
-                (min-resolution: 213dpi) {
+    (min-resolution: 213dpi) {
-                  height:1.333px;
+      height:1.333px;
-       }
+    }
-       @media  (-webkit-min-device-pixel-ratio: 1.5),
+  @media  (-webkit-min-device-pixel-ratio: 1.5),
-                (min--moz-device-pixel-ratio: 1.5),
+    (min--moz-device-pixel-ratio: 1.5),
-                (-o-device-pixel-ratio: 3/2),
+    (-o-device-pixel-ratio: 3/2),
-                (min-device-pixel-ratio: 1.5),
+    (min-device-pixel-ratio: 1.5),
-                (min-resolution: 1.5dppx),
+    (min-resolution: 1.5dppx),
-                (min-resolution: 240dpi) {
+    (min-resolution: 240dpi) {
-                  height:1.5px;
+      height:1.5px;
-        }
+    }
 
-        @media  (-webkit-min-device-pixel-ratio: 2),
+  @media  (-webkit-min-device-pixel-ratio: 2),
-                (min--moz-device-pixel-ratio: 2),
+    (min--moz-device-pixel-ratio: 2),
-                (-o-device-pixel-ratio: 2/1),
+    (-o-device-pixel-ratio: 2/1),
-                (min-device-pixel-ratio: 2),
+    (min-device-pixel-ratio: 2),
-                (min-resolution: 2dppx),
+    (min-resolution: 2dppx),
-                (min-resolution: 380dpi) {
+    (min-resolution: 380dpi) {
-                  height:2px;
+      height:2px;
-        }
+    }
 
-        @media  (-webkit-min-device-pixel-ratio: 3),
+  @media  (-webkit-min-device-pixel-ratio: 3),
-                (min--moz-device-pixel-ratio: 3),
+    (min--moz-device-pixel-ratio: 3),
-                (-o-device-pixel-ratio: 3/1),
+    (-o-device-pixel-ratio: 3/1),
-                (min-device-pixel-ratio: 3),
+    (min-device-pixel-ratio: 3),
-                (min-resolution: 3dppx),
+    (min-resolution: 3dppx),
-                (min-resolution: 480dpi) {
+    (min-resolution: 480dpi) {
-                  height:3px;
+      height:3px;
-        }
+    }
 
-        @media  (-webkit-min-device-pixel-ratio: 4),
+  @media  (-webkit-min-device-pixel-ratio: 4),
-                (min--moz-device-pixel-ratio: 4),
+    (min--moz-device-pixel-ratio: 4),
-                (-o-device-pixel-ratio: 4/1),
+    (-o-device-pixel-ratio: 4/1),
-                (min-device-pixel-ratio: 3),
+    (min-device-pixel-ratio: 3),
-                (min-resolution: 4dppx),
+    (min-resolution: 4dppx),
-                (min-resolution: 640dpi) {
+    (min-resolution: 640dpi) {
-                  height:4px;
+      height:4px;
-        }
+    }
 
 }

less/_mixins-fullpalette.less

@@ -0,0 +1,158 @@
+// 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;
+    });
+}
+
+//
+// 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 ...
+// @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) {
+
+  @contrast-factor: 40%;
+
+  // bootstrap styles
+  &@{extra}, &-default@{extra} {
+    @material-color-name: "default";
+    @material-color-full-name: @material-color-name;
+    @material-color: @default;
+    @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;
+    @func();
+  }
+  &-white@{extra} {
+    @material-color-name: "white";
+    @material-color-full-name: @material-color-name;
+    @material-color: @white;
+    @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);
+    @func();
+  }
+  &-primary@{extra} {
+    @material-color-name: "primary";
+    @material-color-full-name: @material-color-name;
+    @material-color: @primary;
+    @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;
+    @func();
+  }
+  &-info@{extra} {
+    @material-color-name: "info";
+    @material-color-full-name: @material-color-name;
+    @material-color: @info;
+    @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;
+    @func();
+  }
+  &-danger@{extra} {
+    @material-color-name: "danger";
+    @material-color-full-name: @material-color-name;
+    @material-color: @danger;
+    @text-color: @darkbg-text;
+    @func();
+  }
+
+  // given a color build multiples dephs
+  .generic-variations-factory(@material-color-name) {
+
+    // given a color and its deph build css
+    .generic-variations-factory-deep(@material-color-number) {
+
+      &-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);
+        @func();
+      }
+
+    }
+
+    .generic-variations-factory-deep(~"");
+    .generic-variations-factory-deep(~"-50");
+    .generic-variations-factory-deep(~"-100");
+    .generic-variations-factory-deep(~"-200");
+    .generic-variations-factory-deep(~"-300");
+    .generic-variations-factory-deep(~"-400");
+    .generic-variations-factory-deep(~"-500");
+    .generic-variations-factory-deep(~"-600");
+    .generic-variations-factory-deep(~"-700");
+    .generic-variations-factory-deep(~"-800");
+    .generic-variations-factory-deep(~"-900");
+    .generic-variations-factory-deep(~"-A100");
+    .generic-variations-factory-deep(~"-A200");
+    .generic-variations-factory-deep(~"-A400");
+    .generic-variations-factory-deep(~"-A700");
+  }
+
+  .generic-variations-factory(~"red");
+  .generic-variations-factory(~"pink");
+  .generic-variations-factory(~"purple");
+  .generic-variations-factory(~"deep-purple");
+  .generic-variations-factory(~"indigo");
+  .generic-variations-factory(~"blue");
+  .generic-variations-factory(~"light-blue");
+  .generic-variations-factory(~"cyan");
+  .generic-variations-factory(~"teal");
+  .generic-variations-factory(~"green");
+  .generic-variations-factory(~"light-green");
+  .generic-variations-factory(~"lime");
+  .generic-variations-factory(~"yellow");
+  .generic-variations-factory(~"amber");
+  .generic-variations-factory(~"orange");
+  .generic-variations-factory(~"deep-orange");
+  .generic-variations-factory(~"brown");
+  .generic-variations-factory(~"grey");
+  .generic-variations-factory(~"blue-grey");
+
+}
+
+
+@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

less/_mixins.less

@@ -21,16 +21,16 @@
     });
 }
 
-/**
+//
- *  To use this mixin u should pass a function as final parameter to define
+// To use this mixin you should pass a function as final parameter to define
- *  the style. In that definition u can use the following variables to define it.
+// the style. In that definition you can use the following variables to define it.
- *
+//
- *  @material-color-name ---> "red", "green", "indigo" ...
+// @material-color-name ---> "red", "green", "indigo" ...
- *  @material-color-full-name ---> "red", "green-50", "indigo-400" ...
+// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
- *  @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
+// @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) ...
+// @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) {
 
@@ -117,20 +117,6 @@
     }
 
     .generic-variations-factory-deep(~"");
-    .generic-variations-factory-deep(~"-50");
-    .generic-variations-factory-deep(~"-100");
-    .generic-variations-factory-deep(~"-200");
-    .generic-variations-factory-deep(~"-300");
-    .generic-variations-factory-deep(~"-400");
-    .generic-variations-factory-deep(~"-500");
-    .generic-variations-factory-deep(~"-600");
-    .generic-variations-factory-deep(~"-700");
-    .generic-variations-factory-deep(~"-800");
-    .generic-variations-factory-deep(~"-900");
-    .generic-variations-factory-deep(~"-A100");
-    .generic-variations-factory-deep(~"-A200");
-    .generic-variations-factory-deep(~"-A400");
-    .generic-variations-factory-deep(~"-A700");
   }
 
   .generic-variations-factory(~"red");

less/_radios.less

@@ -1,95 +1,100 @@
 .form-horizontal .radio {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .radio {
-    label {
+  label {
-        cursor: pointer;
+    cursor: pointer;
-        padding-left: 45px;
+    padding-left: 45px;
-        position: relative;
+    position: relative;
-        span {
+    span {
-            display: block;
+      display: block;
-            position: absolute;
+      position: absolute;
-            left: 10px;
+      left: 10px;
-            top: 2px;
+      top: 2px;
-            transition-duration: 0.2s;
+      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;
-        }
-
     }
-    .variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
+    .circle {
-    .variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
+      border: 2px solid @lightbg-text;
-
+      height: 15px;
-    input[type=radio][disabled] ~ .check,
+      width: 15px;
-    input[type=radio][disabled] ~ .circle {
+      border-radius: 100%;
-        opacity: 0.5;
+    }
+    .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;
     }
 
-    input[type=radio] { display: none; }
+  }
-    input[type=radio]:checked ~ .check {
+  .variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
-        transform: scale(0.55);
+  .variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
-    }
+
-    input[type=radio][disabled] ~ .circle {
+  input[type=radio][disabled] ~ .check,
-        border-color: @lightbg-text;
+  input[type=radio][disabled] ~ .circle {
-    }
+    opacity: 0.5;
-    input[type=radio][disabled] ~ .check {
+  }
-        background-color: @lightbg-text;
+
-    }
+  input[type=radio] {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+  }
+  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;
+  }
 
 }
 
 @keyframes rippleOn {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-    }
+  }
-    50% {
+  50% {
-        opacity: 0.2;
+    opacity: 0.2;
-    }
+  }
-    100% {
+  100% {
-        opacity: 0;
+    opacity: 0;
-    }
+  }
 }
 
 @keyframes rippleOff {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-    }
+  }
-    50% {
+  50% {
-        opacity: 0.2;
+    opacity: 0.2;
-    }
+  }
-    100% {
+  100% {
-        opacity: 0;
+    opacity: 0;
-    }
+  }
 }

less/_togglebutton.less

@@ -1,25 +1,17 @@
 .togglebutton {
   vertical-align: middle;
-  &, * {
+  &, label, input, .toggle {
     user-select: none;
   }
   label {
-      font-weight: 400;
+    font-weight: 400;
-      cursor: pointer;
+    cursor: pointer;
     // Hide original checkbox
     input[type=checkbox]:first-of-type {
       opacity: 0;
       width: 0;
       height:0;
     }
-    // Switch bg on
-    input[type=checkbox]:first-of-type:checked + .toggle {
-      background-color: rgba(0, 149, 135, 0.5);
-      // Handle on
-      &:after {
-        background-color: #009587;
-      }
-    }
     // Switch bg off and disabled
     .toggle,
     input[type=checkbox][disabled]:first-of-type + .toggle {
@@ -65,4 +57,11 @@
       left: 15px;
     }
   }
+
+  // Switch bg on
+  .generic-variations(~" label input[type=checkbox]:first-of-type:checked + .toggle", @primary, {
+    background-color: fade(@material-color, 50%);
+  });
+  // Handle on
+  .variations(~" label input[type=checkbox]:first-of-type:checked + .toggle:after", background-color, @primary);
 }

less/material-fullpalette.less

@@ -0,0 +1,2 @@
+@import "material.less";
+@import "_mixins-fullpalette.less";

less/material-wfont.less

@@ -1,28 +0,0 @@
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 400;
-  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');
-}
-
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 500;
-  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');
-}
-
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 700;
-  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');
-}
-
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: italic;
-  font-weight: 400;
-  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');
-}
-@import "material.less";

less/roboto.less

@@ -0,0 +1,47 @@
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 400;
+  //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');
+  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(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');
+  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(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');
+  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(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');
+  src: local('RobotoDraft Italic'),
+       local('RobotoDraft-Italic'),
+       local('Roboto-Italic'),
+       url(../fonts/RobotoDraftItalic.woff2) format('woff2'),
+       url(../fonts/RobotoDraftItalic.woff) format('woff');
+}