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/_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

@@ -57,7 +57,12 @@
     opacity: 0.5;
   }
 
-    input[type=radio] { display: none; }
+  input[type=radio] {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+  }
   input[type=radio]:checked ~ .check {
     transform: scale(0.55);
   }

less/_togglebutton.less

@@ -1,6 +1,6 @@
 .togglebutton {
   vertical-align: middle;
-  &, * {
+  &, label, input, .toggle {
     user-select: none;
   }
   label {
@@ -12,14 +12,6 @@
       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');
+}