navbar variations converted

Gruntfile.js

@@ -1,4 +1,4 @@
-module.exports = function(grunt) {
+module.exports = function (grunt) {
   "use strict";
 
   require("load-grunt-tasks")(grunt);
@@ -19,9 +19,9 @@ module.exports = function(grunt) {
           replacements: [
             // bad conversions of shadow-z-* to @include instead of @extend
             { // https://regex101.com/r/bF2iJ2/1
-            pattern: /@include shadow-z-(\d+)((?:-hover)?)\(\);/gi,
+              pattern: /@include shadow-z-(\d+)((?:-hover)?)\(\);/gi,
-            replacement: '@extend .shadow-z-$1$2;',
+              replacement: '@extend .shadow-z-$1$2;',
-            order: 2
+              order: 2
             },
             // bad conversions to @include instead of @extend
             {
@@ -56,7 +56,15 @@ module.exports = function(grunt) {
               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
+            },
+          ]
         }
       }
     },
@@ -283,7 +291,7 @@ module.exports = function(grunt) {
         tasks: ["newer:jshint:test", "jasmine"]
       },
       less: {
-        files:["less/**/*.less"],
+        files: ["less/**/*.less"],
         tasks: ["material:less"]
       },
       livereload: {
@@ -318,8 +326,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 $@",
+          "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
-            "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
+          "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
           "exit $ALL_EXIT_CODE"
         ].join(";")
       }
@@ -371,7 +379,7 @@ module.exports = function(grunt) {
     "uglify:ripples"
   ]);
 
-  grunt.registerTask("build", function() {
+  grunt.registerTask("build", function () {
     grunt.task.run(["newer:jshint", "default"]);
   });
 
@@ -380,13 +388,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"
     ]);

sass/_mixins-fullpalette.scss

@@ -1,3 +1,4 @@
+// This file is NOT automatically converted and must be manually merged
 @import 'mixins-shared';
 
 @mixin generic-variations-colors($args) {

sass/_mixins-shared.scss

@@ -1,3 +1,5 @@
+// This file is NOT automatically converted and must be manually merged
+
 // variations(unquote(""), background-color, #FFF);
 @mixin variations($extra, $material-param-1, $default) {
   @include generic-variations($extra, $default, "variations-content", $material-param-1);
@@ -74,6 +76,42 @@
   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-control-wrapper 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;
+    }
+  }
+}
 
 // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
 @mixin call-variations-content-mixin($args) {
@@ -92,6 +130,8 @@
     @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 {
     @error "Unknown mixin: #{$mixin-name}"
   }

sass/_mixins.scss

@@ -1,3 +1,4 @@
+// This file is NOT automatically converted and must be manually merged
 @import 'mixins-shared';
 
 @mixin generic-variations-colors($args) {

sass/_navbar.scss

@@ -166,34 +166,7 @@
     }
   }
 
-  .generic-variations(unquote(".navbar"), $primary, {
+  @include navbar-variations(unquote(".navbar"), $primary);
-    background-color: $material-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: $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;
-      }
-    }
-  });
 
   &-inverse {
     background-color: $indigo;