mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-10-31 16:07:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

navbar variations converted

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Gruntfile.js
View File

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

1
sass/_mixins-fullpalette.scss
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) {

40
sass/_mixins-shared.scss
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}"
}

1
sass/_mixins.scss
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) {

29
sass/_navbar.scss
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;