navbar variations converted

This commit is contained in:
Kevin Ross 2015-11-04 14:49:03 -06:00
parent cf4cc11a6a
commit 8dca1cb0c4
5 changed files with 63 additions and 40 deletions

View File

@ -1,4 +1,4 @@
module.exports = function(grunt) {
module.exports = function (grunt) {
"use strict";
require("load-grunt-tasks")(grunt);
@ -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: {
@ -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"
]);

View File

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

View File

@ -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}"
}

View File

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

View File

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