mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 10:04:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

#740 remove color variations

Browse Source
This commit is contained in:
Kevin Ross 2015-11-22 10:23:34 -06:00
parent bb4a16657f
commit 828fd32669
30 changed files with 864 additions and 1045 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
Gruntfile.js
View File

@ -88,7 +88,7 @@ module.exports = function (grunt) {
files: [{ files: [{
expand: true, expand: true,
cwd: "less", cwd: "less",
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less", "!_import-bs*"], src: ["*.less", "!_mixins.less", "!_import-bs*"],
ext: ".scss", ext: ".scss",
dest: "sass" dest: "sass"
}], }],
@ -218,7 +218,7 @@ module.exports = function (grunt) {
expand: true, expand: true,
cwd: "sass", cwd: "sass",
//src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'], //src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'],
src: ["material.scss", "material-fullpalette.scss", "roboto.scss", "ripples.scss"], src: ["bootstrap-material-design.scss", "roboto.scss", "ripples.scss"],
dest: "dist/sassc", // added to gitignore, only used for local testing dest: "dist/sassc", // added to gitignore, only used for local testing
ext: ".css" ext: ".css"
}] }]
@ -234,24 +234,11 @@ module.exports = function (grunt) {
paths: ["less"], paths: ["less"],
sourceMap: true, sourceMap: true,
sourceMapRootpath: "/", sourceMapRootpath: "/",
sourceMapFilename: "dist/css/material.css.map", sourceMapFilename: "dist/css/bootstrap-material-design.css.map",
sourceMapURL: "material.css.map" sourceMapURL: "bootstrap-material-design.css.map"
}, },
files: { files: {
"dist/css/material.css": "less/material.less", "dist/css/bootstrap-material-design.css": "less/bootstrap-material-design.less",
}
},
materialfullpalette: {
options: {
paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/material-fullpalette.css.map",
sourceMapURL: "material-fullpalette.css.map",
outputSourceFiles: true
},
files: {
"dist/css/material-fullpalette.css": "less/material-fullpalette.less",
} }
}, },
roboto: { roboto: {
@ -303,12 +290,7 @@ module.exports = function (grunt) {
}, },
material: { material: {
files: { files: {
"dist/css/material.css": "dist/css/material.css" "dist/css/bootstrap-material-design.css": "dist/css/bootstrap-material-design.css"
}
},
materialfullpalette: {
files: {
"dist/css/material-fullpalette.css": "dist/css/material-fullpalette.css"
} }
}, },
roboto: { roboto: {
@ -337,8 +319,14 @@ module.exports = function (grunt) {
csslintrc: 'less/.csslintrc' csslintrc: 'less/.csslintrc'
}, },
dist: [ dist: [
'dist/css/material.css', 'dist/css/bootstrap-material-design.css',
'dist/css/material-fullpalette.css' 'dist/css/ripples.css',
'dist/css/roboto.css'
],
distmin: [
'dist/css/bootstrap-material-design.min.css',
'dist/css/ripples.min.css',
'dist/css/roboto.min.css'
], ],
examples: [ examples: [
'docs/examples/**/*.css' 'docs/examples/**/*.css'
@ -363,12 +351,8 @@ module.exports = function (grunt) {
advanced: false advanced: false
}, },
material: { material: {
src: "dist/css/material.css", src: "dist/css/bootstrap-material-design.css",
dest: "dist/css/material.min.css" dest: "dist/css/bootstrap-material-design.min.css"
},
materialfullpalette: {
src: "dist/css/material-fullpalette.css",
dest: "dist/css/material-fullpalette.min.css"
}, },
roboto: { roboto: {
src: "dist/css/roboto.css", src: "dist/css/roboto.css",
@ -624,7 +608,6 @@ module.exports = function (grunt) {
grunt.registerTask('less-compile', [ grunt.registerTask('less-compile', [
"less:material", "less:material",
"less:materialfullpalette",
"less:roboto", "less:roboto",
"less:ripples" "less:ripples"
]); ]);
@ -633,14 +616,13 @@ module.exports = function (grunt) {
"less-compile", "less-compile",
"autoprefixer:material", "autoprefixer:material",
"autoprefixer:materialfullpalette",
"autoprefixer:roboto", "autoprefixer:roboto",
"autoprefixer:ripples", "autoprefixer:ripples",
//"csslint:dist",
"cssmin:material", "cssmin:material",
"cssmin:materialfullpalette",
"cssmin:roboto", "cssmin:roboto",
"cssmin:ripples" "cssmin:ripples",
//"csslint:distmin"
]); ]);
grunt.registerTask("dist-js", [ grunt.registerTask("dist-js", [

102
custom-color-palette.sh
View File

@ -1,102 +0,0 @@
#!/bin/bash
# This script automates color customization bootstrap material design
# This script use "lessc", install first:
# npm install -g less
# author: @arturu
# author name: Pietro Arturo Panetta
# email: arturu@arturu.it
# license GLP3
# This program is free software: you can redistribute it and/or modify it under
# the terms of the GNU General Public License as published by the Free Software
# Foundation, either version 3 of the License, or (at your option) any later
# version.
# This program is distributed in the hope that it will be useful, but WITHOUT
# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
# FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
# You should have received a copy of the GNU General Public License along with
# this program. If not, see http://www.gnu.org/licenses/gpl-3.0.html.
color=$1
tempFile="custom-color-palette.less"
pathOut="dist/custom"
# script settings
text_color_red="\e[0;31m"
text_color_green="\e[0;32m"
text_color_blue="\e[0;34m"
text_bold=`tput bold`
text_reset=`tput sgr0`
text_tag_error=$(echo -e ${text_color_red}${text_bold}[Error]${text_reset})
text_tag_success=$(echo -e ${text_color_green}${text_bold}[Success]${text_reset})
# end script settings
# check param
if [[ $color == "" ]]
then
echo -e "$text_tag_error missing param. Use:
./custom-color-palette.sh <color>
${text_color_green}./custom-color-palette.sd deep-purple${text_reset}
for color follow: http://www.google.com/design/spec/style/color.html#color-color-palette
Run the script in the root of material design packange"
exit
fi
# check if they are in the root of material design packange
if [ ! -f 'bower.json' ]
then
echo -e "$text_tag_error Run the script in the root of material design packange. Exit."
exit
fi
# read line packange name
linePackName=$(sed -n '2p' 'bower.json' | awk '{split($0,array,":")} END{print array[2]}' | sed -r 's/[", ]+//g')
if [[ $linePackName != 'bootstrap-material-design' ]]
then
echo -e "$text_tag_error It is not the right package. Exit."
exit
fi
# generate $tempFile
echo "@import \"less/material.less\";
// Override @primary color with one took from _colors.less
// http://www.google.com/design/spec/style/color.html#color-color-palette
@primary: @$color;
" > $tempFile
# check $tempFile
if [ ! -f $tempFile ]
then
echo -e "$text_tag_error $tempFile not writed. Exit."
exit
fi
echo -e "$text_color_green Compiling material design... $text_reset"
# check $pathOut
if [ ! -d $pathOut ]
then
mkdir $pathOut
fi
# compiling
lessc -x $tempFile > $pathOut/$color.css
# check file $color.css
if [ ! -f $pathOut/$color.css ]
then
echo -e "$text_tag_error ${text_color_blue}$pathOut/$color.css${text_reset} not writed"
exit
fi
# remove temp file
yes | rm $tempFile
#end message
echo -e "$text_tag_success Use ${text_color_blue}$pathOut/$color.css${text_reset} instead of dist/css/material.css"

0
dist/css/material.css → dist-remove-me-post-050/css/material.css
View File

0
dist/css/material.css.map → dist-remove-me-post-050/css/material.css.map
View File

47
dist-remove-me-post-050/css/ripples.css Normal file
View File

@ -0,0 +1,47 @@
.withripple {
position: relative;
}
.ripple-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.ripple {
position: absolute;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 100%;
background-color: #000;
background-color: rgba(0, 0, 0, 0.05);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
-o-transform-origin: 50%;
transform-origin: 50%;
opacity: 0;
pointer-events: none;
}
.ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-o-transition: opacity 0.15s ease-in 0s, -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 0.1;
}
.ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important;
-o-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}
/*# sourceMappingURL=ripples.css.map */

1
dist-remove-me-post-050/css/ripples.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;CCCH;ADCD;EACI,mBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;CCCH;ADCD;EACI,mBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,uBAAA;EACA,sCAAA;EACA,4BAAA;MAAA,wBAAA;OAAA,uBAAA;UAAA,oBAAA;EACA,8BAAA;MAAA,0BAAA;OAAA,yBAAA;UAAA,sBAAA;EACA,WAAA;EACA,qBAAA;CCCH;ADCD;EACI,uGAAA;OAAA,6FAAA;UAAA,uFAAA;EACA,aAAA;CCCH;ADCD;EACI,sDAAA;OAAA,iDAAA;UAAA,8CAAA;EACA,WAAA;CCCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000; // fallback color\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}

62
dist-remove-me-post-050/css/roboto.css Normal file
View File

@ -0,0 +1,62 @@
/*
To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
Then, run this script to get the list.
(function() {
var colors = {}, main = {};
$(".color-group").each(function() {
var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
colors[color] = {};
$(this).find(".color").not(".main-color").each(function() {
var shade = $(this).find(".shade").text().trim(),
hex = $(this).find(".hex").text().trim();
colors[color][shade] = hex;
});
main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
});
var LESS = "";
$.each(colors, function(name, shades) {
LESS += "\n\n";
$.each(shades, function(shade, hex) {
LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
});
if (main[name]) {
LESS += "@" + name + ": " + main[name] + ";\n";
}
});
console.log(LESS);
})();
*/
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 400;
src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url('../fonts/RobotoDraftRegular.woff2?#iefix') 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?#iefix') 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?#iefix') 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?#iefix') format('woff2'), url('../fonts/RobotoDraftItalic.woff') format('woff');
}
/*# sourceMappingURL=roboto.css.map */

1
dist-remove-me-post-050/css/roboto.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
less/_material.less → less/_bootstrap-material-design.less
View File

@ -20,7 +20,7 @@ body {
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: @mdb-font-family;
font-weight: 300; font-weight: 300;
} }

17
less/_buttons.less
View File

@ -17,17 +17,26 @@
text-decoration: none; text-decoration: none;
color: @darkbg-text; color: @darkbg-text;
&:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) { &:not(.btn-link):not(.btn-flat) {
background-color: @btn-default;
color: @lightbg-text;
&:not(.btn-fab) {
&:hover {
.shadow-z-1(); .shadow-z-1();
} }
&:active:not(.btn-link):not(.btn-flat):not(.btn-fab) { &:active {
.shadow-z-1-hover(); .shadow-z-1-hover();
} }
}
}
transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
.btn-flat:not(.btn-link){
.variations(~".btn-flat:not(.btn-link)", color, @lightbg-text); color: @lightbg-text;
}
.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default); .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);

137
less/_mixins-fullpalette.less
View File

@ -1,137 +0,0 @@
@import '_mixins-shared.less';
//
// 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.
//
// @mdb-color-name ---> "red", "green", "indigo" ...
// @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// @mdb-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} {
@mdb-color-name: "default";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @default;
@mdb-text-color: @darkbg-text;
@func();
}
&-black@{extra} {
@mdb-color-name: "black";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @black;
@mdb-text-color: @darkbg-text;
@func();
}
&-white@{extra} {
@mdb-color-name: "white";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @white;
@mdb-text-color: @lightbg-text;
@func();
}
&-inverse@{extra} {
@mdb-color-name: "inverse";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @inverse;
@mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@func();
}
&-primary@{extra} {
@mdb-color-name: "primary";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-primary;
@mdb-text-color: @darkbg-text;
@func();
}
&-success@{extra} {
@mdb-color-name: "success";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-success;
@mdb-text-color: @darkbg-text;
@func();
}
&-info@{extra} {
@mdb-color-name: "info";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-info;
@mdb-text-color: @darkbg-text;
@func();
}
&-warning@{extra} {
@mdb-color-name: "warning";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-warning;
@mdb-text-color: @darkbg-text;
@func();
}
&-danger@{extra} {
@mdb-color-name: "danger";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-danger;
@mdb-text-color: @darkbg-text;
@func();
}
// given a color build multiples dephs
.generic-variations-factory(@mdb-color-name) {
// given a color and its deph build css
.generic-variations-factory-deep(@mdb-color-number) {
&-material-@{mdb-color-name}@{mdb-color-number}@{extra} {
@mdb-color-full-name: "@{mdb-color-name}@{mdb-color-number}";
@mdb-color: @@mdb-color-full-name;
@mdb-text-color: contrast(@mdb-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";

31
less/_mixins-shared.less
View File

@ -1,31 +0,0 @@
// Placeholder text
.material-placeholder(@rules) {
&::-moz-placeholder { @rules(); } // Firefox
&:-ms-input-placeholder { @rules(); } // Internet Explorer 10+
&::-webkit-input-placeholder { @rules(); } // Safari and Chrome
}
// usage: .variations(~" .check", color, transparent);
.variations(@extra, @property, @default) {
.generic-variations(@extra, @default, {
@{property}: @mdb-color;
});
}
.background-variations(@extra, @default) {
.generic-variations(@extra, @default, {
background-color: @mdb-color;
& when (@mdb-color = @btn-default) {
color: @lightbg-text;
}
& when not (@mdb-color = @btn-default) {
color: @mdb-text-color;
}
});
}
.text-variations(@extra, @default) {
.generic-variations(@extra, @default, {
color: @mdb-color;
});
}

172
less/_mixins.less
View File

@ -1,4 +1,39 @@
@import '_mixins-shared.less'; // Placeholder text
.material-placeholder(@rules) {
&::-moz-placeholder { @rules(); } // Firefox
&:-ms-input-placeholder { @rules(); } // Internet Explorer 10+
&::-webkit-input-placeholder { @rules(); } // Safari and Chrome
}
// usage: .variations(~" .check", color, transparent);
.variations(@extra, @property, @default) {
.generic-variations(@extra, @default, {
@{property}: @mdb-color;
});
}
.background-variations(@extra, @default) {
.generic-variations(@extra, @default, {
background-color: @mdb-color;
& when (@mdb-color = @btn-default) {
color: @lightbg-text;
}
& when not (@mdb-color = @btn-default) {
color: @mdb-text-color;
}
});
}
.text-variations(@extra, @default) {
.generic-variations(@extra, @default, {
color: @mdb-color;
});
}
// //
// To use this mixin you should pass a function as final parameter to define // To use this mixin you should pass a function as final parameter to define
@ -16,109 +51,110 @@
@contrast-factor: 40%; @contrast-factor: 40%;
// bootstrap styles // bootstrap styles
&@{extra}, &-default@{extra} { &@{extra},
@mdb-color-name: "default"; &-default@{extra} {
@mdb-color-full-name: @mdb-color-name; //@mdb-color-name: "default";
//@mdb-color-full-name: @mdb-color-name;
@mdb-color: @default; @mdb-color: @default;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-black@{extra} { //&-black@{extra} {
@mdb-color-name: "black"; // //@mdb-color-name: "black";
@mdb-color-full-name: @mdb-color-name; // //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @black; // @mdb-color: @black;
@mdb-text-color: @darkbg-text; // @mdb-text-color: @darkbg-text;
@func(); // @func();
} //}
&-white@{extra} { //&-white@{extra} {
@mdb-color-name: "white"; // //@mdb-color-name: "white";
@mdb-color-full-name: @mdb-color-name; // //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @white; // @mdb-color: @white;
@mdb-text-color: @lightbg-text; // @mdb-text-color: @lightbg-text;
@func(); // @func();
} //}
&-inverse@{extra} { &-inverse@{extra} {
@mdb-color-name: "inverse"; //@mdb-color-name: "inverse";
@mdb-color-full-name: @mdb-color-name; //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @inverse; @mdb-color: @inverse;
@mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }
&-primary@{extra} { &-primary@{extra} {
@mdb-color-name: "primary"; //@mdb-color-name: "primary";
@mdb-color-full-name: @mdb-color-name; //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-primary; @mdb-color: @brand-primary;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-success@{extra} { &-success@{extra} {
@mdb-color-name: "success"; //@mdb-color-name: "success";
@mdb-color-full-name: @mdb-color-name; //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-success; @mdb-color: @brand-success;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-info@{extra} { &-info@{extra} {
@mdb-color-name: "info"; //@mdb-color-name: "info";
@mdb-color-full-name: @mdb-color-name; //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-info; @mdb-color: @brand-info;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-warning@{extra} { &-warning@{extra} {
@mdb-color-name: "warning"; //@mdb-color-name: "warning";
@mdb-color-full-name: @mdb-color-name; //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-warning; @mdb-color: @brand-warning;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-danger@{extra} { &-danger@{extra} {
@mdb-color-name: "danger"; //@mdb-color-name: "danger";
@mdb-color-full-name: @mdb-color-name; //@mdb-color-full-name: @mdb-color-name;
@mdb-color: @brand-danger; @mdb-color: @brand-danger;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
// given a color build multiples dephs //// given a color build multiples dephs
.generic-variations-factory(@mdb-color-name) { //.generic-variations-factory(@mdb-color-name) {
//
// given a color and its deph build css // // given a color and its deph build css
.generic-variations-factory-deep(@mdb-color-number) { // .generic-variations-factory-deep(@mdb-color-number) {
//
&-material-@{mdb-color-name}@{mdb-color-number}@{extra} { // &-material-@{mdb-color-name}@{mdb-color-number}@{extra} {
@mdb-color-full-name: "@{mdb-color-name}@{mdb-color-number}"; // @mdb-color-full-name: "@{mdb-color-name}@{mdb-color-number}";
@mdb-color: @@mdb-color-full-name; // @mdb-color: @@mdb-color-full-name;
@mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor); // @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); // @func();
} // }
//
} // }
//
.generic-variations-factory-deep(~""); // .generic-variations-factory-deep(~"");
} //}
//
.generic-variations-factory(~"red"); //.generic-variations-factory(~"red");
.generic-variations-factory(~"pink"); //.generic-variations-factory(~"pink");
.generic-variations-factory(~"purple"); //.generic-variations-factory(~"purple");
.generic-variations-factory(~"deep-purple"); //.generic-variations-factory(~"deep-purple");
.generic-variations-factory(~"indigo"); //.generic-variations-factory(~"indigo");
.generic-variations-factory(~"blue"); //.generic-variations-factory(~"blue");
.generic-variations-factory(~"light-blue"); //.generic-variations-factory(~"light-blue");
.generic-variations-factory(~"cyan"); //.generic-variations-factory(~"cyan");
.generic-variations-factory(~"teal"); //.generic-variations-factory(~"teal");
.generic-variations-factory(~"green"); //.generic-variations-factory(~"green");
.generic-variations-factory(~"light-green"); //.generic-variations-factory(~"light-green");
.generic-variations-factory(~"lime"); //.generic-variations-factory(~"lime");
.generic-variations-factory(~"yellow"); //.generic-variations-factory(~"yellow");
.generic-variations-factory(~"amber"); //.generic-variations-factory(~"amber");
.generic-variations-factory(~"orange"); //.generic-variations-factory(~"orange");
.generic-variations-factory(~"deep-orange"); //.generic-variations-factory(~"deep-orange");
.generic-variations-factory(~"brown"); //.generic-variations-factory(~"brown");
.generic-variations-factory(~"grey"); //.generic-variations-factory(~"grey");
.generic-variations-factory(~"blue-grey"); //.generic-variations-factory(~"blue-grey");
} }
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger"; //@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

3
less/_variables.less
View File

@ -3,6 +3,8 @@
// Material Global vars // Material Global vars
@zero: 0; @zero: 0;
@mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
// material icons path // material icons path
@mdb-font-path: "../fonts"; @mdb-font-path: "../fonts";
@ -33,6 +35,7 @@
//--- //---
// FIXME: Similar but not quite the same as Bootstrap variables // FIXME: Similar but not quite the same as Bootstrap variables
// FIXME: these need to either a) be converted to @mdb- or b) converted to bs variables // FIXME: these need to either a) be converted to @mdb- or b) converted to bs variables
@contrast-factor: 40%;
@btn-default: transparent; @btn-default: transparent;
@btn-default-text: @lightbg-text; @btn-default-text: @lightbg-text;
//--- //---

2
less/material.less → less/bootstrap-material-design.less vendored
View File

@ -2,4 +2,4 @@
@import "_mixins.less"; @import "_mixins.less";
@import "_icons-material-design.less"; @import "_icons-material-design.less";
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt) @import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins) @import '_bootstrap-material-design.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

5
less/material-fullpalette.less
View File

@ -1,5 +0,0 @@
@import "_variables.less";
@import "_mixins-fullpalette.less";
@import "_icons-material-design.less";
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

1
less/ripples.less
View File

@ -19,6 +19,7 @@
margin-left: -10px; margin-left: -10px;
margin-top: -10px; margin-top: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #000; // fallback color
background-color: rgba(0,0,0,0.05); background-color: rgba(0,0,0,0.05);
transform: scale(1); transform: scale(1);
transform-origin: 50%; transform-origin: 50%;

8
less/roboto.less
View File

@ -9,7 +9,7 @@
src: local('RobotoDraft'), src: local('RobotoDraft'),
local('RobotoDraft-Regular'), local('RobotoDraft-Regular'),
local('Roboto-Regular'), local('Roboto-Regular'),
url('@{mdb-font-path}/RobotoDraftRegular.woff2') format('woff2'), url('@{mdb-font-path}/RobotoDraftRegular.woff2?#iefix') format('woff2'),
url('@{mdb-font-path}/RobotoDraftRegular.woff') format('woff'); url('@{mdb-font-path}/RobotoDraftRegular.woff') format('woff');
} }
@ -21,7 +21,7 @@
src: local('RobotoDraft Medium'), src: local('RobotoDraft Medium'),
local('RobotoDraft-Medium'), local('RobotoDraft-Medium'),
local('Roboto-Medium'), local('Roboto-Medium'),
url('@{mdb-font-path}/RobotoDraftMedium.woff2') format('woff2'), url('@{mdb-font-path}/RobotoDraftMedium.woff2?#iefix') format('woff2'),
url('@{mdb-font-path}/RobotoDraftMedium.woff') format('woff'); url('@{mdb-font-path}/RobotoDraftMedium.woff') format('woff');
} }
@ -33,7 +33,7 @@
src: local('RobotoDraft Bold'), src: local('RobotoDraft Bold'),
local('RobotoDraft-Bold'), local('RobotoDraft-Bold'),
local('Roboto-Bold'), local('Roboto-Bold'),
url('@{mdb-font-path}/RobotoDraftBold.woff2') format('woff2'), url('@{mdb-font-path}/RobotoDraftBold.woff2?#iefix') format('woff2'),
url('@{mdb-font-path}/RobotoDraftBold.woff') format('woff'); url('@{mdb-font-path}/RobotoDraftBold.woff') format('woff');
} }
@ -45,6 +45,6 @@
src: local('RobotoDraft Italic'), src: local('RobotoDraft Italic'),
local('RobotoDraft-Italic'), local('RobotoDraft-Italic'),
local('Roboto-Italic'), local('Roboto-Italic'),
url('@{mdb-font-path}/RobotoDraftItalic.woff2') format('woff2'), url('@{mdb-font-path}/RobotoDraftItalic.woff2?#iefix') format('woff2'),
url('@{mdb-font-path}/RobotoDraftItalic.woff') format('woff'); url('@{mdb-font-path}/RobotoDraftItalic.woff') format('woff');
} }

2
sass/_material.scss → sass/_bootstrap-material-design.scss
View File

@ -22,7 +22,7 @@ body {
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: $mdb-font-family;
font-weight: 300; font-weight: 300;
} }

17
sass/_buttons.scss
View File

@ -19,17 +19,26 @@
text-decoration: none; text-decoration: none;
color: $darkbg-text; color: $darkbg-text;
&:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) { &:not(.btn-link):not(.btn-flat) {
background-color: $btn-default;
color: $lightbg-text;
&:not(.btn-fab) {
&:hover {
@include shadow-z-1(); @include shadow-z-1();
} }
&:active:not(.btn-link):not(.btn-flat):not(.btn-fab) { &:active {
@include shadow-z-1-hover(); @include shadow-z-1-hover();
} }
}
}
transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
.btn-flat:not(.btn-link){
@include variations(unquote(".btn-flat:not(.btn-link)"), color, $lightbg-text); color: $lightbg-text;
}
@include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default); @include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default);

311
sass/_colors-map.scss Normal file
View File

@ -0,0 +1,311 @@
// these might be useful in a switch to sass...at some point.
//$mdb-colors: (
// "red": $red,
// "pink": $pink,
// "purple": $purple,
// "deep-purple": $deep-purple,
// "indigo": $indigo,
// "blue": $blue,
// "light-blue": $light-blue,
// "cyan": $cyan,
// "teal": $teal,
// "green": $green,
// "light-green": $light-green,
// "lime": $lime,
// "yellow": $yellow,
// "amber": $amber,
// "orange": $orange,
// "deep-orange": $deep-orange,
// "brown": $brown,
// "grey": $grey,
// "blue-grey": $blue-grey
//);
//
//$mdb-colors-map: (
// "red-50": (name: "red", color: $red-50, number: "-50"),
// "red-100": (name: "red", color: $red-100, number: "-100"),
// "red-200": (name: "red", color: $red-200, number: "-200"),
// "red-300": (name: "red", color: $red-300, number: "-300"),
// "red-400": (name: "red", color: $red-400, number: "-400"),
// "red-500": (name: "red", color: $red-500, number: "-500"),
// "red-600": (name: "red", color: $red-600, number: "-600"),
// "red-700": (name: "red", color: $red-700, number: "-700"),
// "red-800": (name: "red", color: $red-800, number: "-800"),
// "red-900": (name: "red", color: $red-900, number: "-900"),
// "red-A100": (name: "red", color: $red-A100, number: "-A100"),
// "red-A200": (name: "red", color: $red-A200, number: "-A200"),
// "red-A400": (name: "red", color: $red-A400, number: "-A400"),
// "red-A700": (name: "red", color: $red-A700, number: "-A700"),
// "red": (name: "red", color: $red, number: ""),
// "pink-50": (name: "pink", color: $pink-50, number: "-50"),
// "pink-100": (name: "pink", color: $pink-100, number: "-100"),
// "pink-200": (name: "pink", color: $pink-200, number: "-200"),
// "pink-300": (name: "pink", color: $pink-300, number: "-300"),
// "pink-400": (name: "pink", color: $pink-400, number: "-400"),
// "pink-500": (name: "pink", color: $pink-500, number: "-500"),
// "pink-600": (name: "pink", color: $pink-600, number: "-600"),
// "pink-700": (name: "pink", color: $pink-700, number: "-700"),
// "pink-800": (name: "pink", color: $pink-800, number: "-800"),
// "pink-900": (name: "pink", color: $pink-900, number: "-900"),
// "pink-A100": (name: "pink", color: $pink-A100, number: "-A100"),
// "pink-A200": (name: "pink", color: $pink-A200, number: "-A200"),
// "pink-A400": (name: "pink", color: $pink-A400, number: "-A400"),
// "pink-A700": (name: "pink", color: $pink-A700, number: "-A700"),
// "pink": (name: "pink", color: $pink, number: ""),
// "purple-50": (name: "purple", color: $purple-50, number: "-50"),
// "purple-100": (name: "purple", color: $purple-100, number: "-100"),
// "purple-200": (name: "purple", color: $purple-200, number: "-200"),
// "purple-300": (name: "purple", color: $purple-300, number: "-300"),
// "purple-400": (name: "purple", color: $purple-400, number: "-400"),
// "purple-500": (name: "purple", color: $purple-500, number: "-500"),
// "purple-600": (name: "purple", color: $purple-600, number: "-600"),
// "purple-700": (name: "purple", color: $purple-700, number: "-700"),
// "purple-800": (name: "purple", color: $purple-800, number: "-800"),
// "purple-900": (name: "purple", color: $purple-900, number: "-900"),
// "purple-A100": (name: "purple", color: $purple-A100, number: "-A100"),
// "purple-A200": (name: "purple", color: $purple-A200, number: "-A200"),
// "purple-A400": (name: "purple", color: $purple-A400, number: "-A400"),
// "purple-A700": (name: "purple", color: $purple-A700, number: "-A700"),
// "purple": (name: "purple", color: $purple, number: ""),
// "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
// "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"),
// "deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"),
// "deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"),
// "deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"),
// "deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"),
// "deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"),
// "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
// "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"),
// "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
// "deep-purple-A100": (name: "deep-purple", color: $deep-purple-A100, number: "-A100"),
// "deep-purple-A200": (name: "deep-purple", color: $deep-purple-A200, number: "-A200"),
// "deep-purple-A400": (name: "deep-purple", color: $deep-purple-A400, number: "-A400"),
// "deep-purple-A700": (name: "deep-purple", color: $deep-purple-A700, number: "-A700"),
// "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
// "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
// "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
// "indigo-200": (name: "indigo", color: $indigo-200, number: "-200"),
// "indigo-300": (name: "indigo", color: $indigo-300, number: "-300"),
// "indigo-400": (name: "indigo", color: $indigo-400, number: "-400"),
// "indigo-500": (name: "indigo", color: $indigo-500, number: "-500"),
// "indigo-600": (name: "indigo", color: $indigo-600, number: "-600"),
// "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
// "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
// "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
// "indigo-A100": (name: "indigo", color: $indigo-A100, number: "-A100"),
// "indigo-A200": (name: "indigo", color: $indigo-A200, number: "-A200"),
// "indigo-A400": (name: "indigo", color: $indigo-A400, number: "-A400"),
// "indigo-A700": (name: "indigo", color: $indigo-A700, number: "-A700"),
// "indigo": (name: "indigo", color: $indigo, number: ""),
// "blue-50": (name: "blue", color: $blue-50, number: "-50"),
// "blue-100": (name: "blue", color: $blue-100, number: "-100"),
// "blue-200": (name: "blue", color: $blue-200, number: "-200"),
// "blue-300": (name: "blue", color: $blue-300, number: "-300"),
// "blue-400": (name: "blue", color: $blue-400, number: "-400"),
// "blue-500": (name: "blue", color: $blue-500, number: "-500"),
// "blue-600": (name: "blue", color: $blue-600, number: "-600"),
// "blue-700": (name: "blue", color: $blue-700, number: "-700"),
// "blue-800": (name: "blue", color: $blue-800, number: "-800"),
// "blue-900": (name: "blue", color: $blue-900, number: "-900"),
// "blue-A100": (name: "blue", color: $blue-A100, number: "-A100"),
// "blue-A200": (name: "blue", color: $blue-A200, number: "-A200"),
// "blue-A400": (name: "blue", color: $blue-A400, number: "-A400"),
// "blue-A700": (name: "blue", color: $blue-A700, number: "-A700"),
// "blue": (name: "blue", color: $blue, number: ""),
// "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
// "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"),
// "light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"),
// "light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"),
// "light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"),
// "light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"),
// "light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"),
// "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
// "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"),
// "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
// "light-blue-A100": (name: "light-blue", color: $light-blue-A100, number: "-A100"),
// "light-blue-A200": (name: "light-blue", color: $light-blue-A200, number: "-A200"),
// "light-blue-A400": (name: "light-blue", color: $light-blue-A400, number: "-A400"),
// "light-blue-A700": (name: "light-blue", color: $light-blue-A700, number: "-A700"),
// "light-blue": (name: "light-blue", color: $light-blue, number: ""),
// "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
// "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
// "cyan-200": (name: "cyan", color: $cyan-200, number: "-200"),
// "cyan-300": (name: "cyan", color: $cyan-300, number: "-300"),
// "cyan-400": (name: "cyan", color: $cyan-400, number: "-400"),
// "cyan-500": (name: "cyan", color: $cyan-500, number: "-500"),
// "cyan-600": (name: "cyan", color: $cyan-600, number: "-600"),
// "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
// "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
// "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
// "cyan-A100": (name: "cyan", color: $cyan-A100, number: "-A100"),
// "cyan-A200": (name: "cyan", color: $cyan-A200, number: "-A200"),
// "cyan-A400": (name: "cyan", color: $cyan-A400, number: "-A400"),
// "cyan-A700": (name: "cyan", color: $cyan-A700, number: "-A700"),
// "cyan": (name: "cyan", color: $cyan, number: ""),
// "teal-50": (name: "teal", color: $teal-50, number: "-50"),
// "teal-100": (name: "teal", color: $teal-100, number: "-100"),
// "teal-200": (name: "teal", color: $teal-200, number: "-200"),
// "teal-300": (name: "teal", color: $teal-300, number: "-300"),
// "teal-400": (name: "teal", color: $teal-400, number: "-400"),
// "teal-500": (name: "teal", color: $teal-500, number: "-500"),
// "teal-600": (name: "teal", color: $teal-600, number: "-600"),
// "teal-700": (name: "teal", color: $teal-700, number: "-700"),
// "teal-800": (name: "teal", color: $teal-800, number: "-800"),
// "teal-900": (name: "teal", color: $teal-900, number: "-900"),
// "teal-A100": (name: "teal", color: $teal-A100, number: "-A100"),
// "teal-A200": (name: "teal", color: $teal-A200, number: "-A200"),
// "teal-A400": (name: "teal", color: $teal-A400, number: "-A400"),
// "teal-A700": (name: "teal", color: $teal-A700, number: "-A700"),
// "teal": (name: "teal", color: $teal, number: ""),
// "green-50": (name: "green", color: $green-50, number: "-50"),
// "green-100": (name: "green", color: $green-100, number: "-100"),
// "green-200": (name: "green", color: $green-200, number: "-200"),
// "green-300": (name: "green", color: $green-300, number: "-300"),
// "green-400": (name: "green", color: $green-400, number: "-400"),
// "green-500": (name: "green", color: $green-500, number: "-500"),
// "green-600": (name: "green", color: $green-600, number: "-600"),
// "green-700": (name: "green", color: $green-700, number: "-700"),
// "green-800": (name: "green", color: $green-800, number: "-800"),
// "green-900": (name: "green", color: $green-900, number: "-900"),
// "green-A100": (name: "green", color: $green-A100, number: "-A100"),
// "green-A200": (name: "green", color: $green-A200, number: "-A200"),
// "green-A400": (name: "green", color: $green-A400, number: "-A400"),
// "green-A700": (name: "green", color: $green-A700, number: "-A700"),
// "green": (name: "green", color: $green, number: ""),
// "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
// "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"),
// "light-green-200": (name: "light-green", color: $light-green-200, number: "-200"),
// "light-green-300": (name: "light-green", color: $light-green-300, number: "-300"),
// "light-green-400": (name: "light-green", color: $light-green-400, number: "-400"),
// "light-green-500": (name: "light-green", color: $light-green-500, number: "-500"),
// "light-green-600": (name: "light-green", color: $light-green-600, number: "-600"),
// "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"),
// "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"),
// "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"),
// "light-green-A100": (name: "light-green", color: $light-green-A100, number: "-A100"),
// "light-green-A200": (name: "light-green", color: $light-green-A200, number: "-A200"),
// "light-green-A400": (name: "light-green", color: $light-green-A400, number: "-A400"),
// "light-green-A700": (name: "light-green", color: $light-green-A700, number: "-A700"),
// "light-green": (name: "light-green", color: $light-green, number: ""),
// "lime-50": (name: "lime", color: $lime-50, number: "-50"),
// "lime-100": (name: "lime", color: $lime-100, number: "-100"),
// "lime-200": (name: "lime", color: $lime-200, number: "-200"),
// "lime-300": (name: "lime", color: $lime-300, number: "-300"),
// "lime-400": (name: "lime", color: $lime-400, number: "-400"),
// "lime-500": (name: "lime", color: $lime-500, number: "-500"),
// "lime-600": (name: "lime", color: $lime-600, number: "-600"),
// "lime-700": (name: "lime", color: $lime-700, number: "-700"),
// "lime-800": (name: "lime", color: $lime-800, number: "-800"),
// "lime-900": (name: "lime", color: $lime-900, number: "-900"),
// "lime-A100": (name: "lime", color: $lime-A100, number: "-A100"),
// "lime-A200": (name: "lime", color: $lime-A200, number: "-A200"),
// "lime-A400": (name: "lime", color: $lime-A400, number: "-A400"),
// "lime-A700": (name: "lime", color: $lime-A700, number: "-A700"),
// "lime": (name: "lime", color: $lime, number: ""),
// "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
// "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
// "yellow-200": (name: "yellow", color: $yellow-200, number: "-200"),
// "yellow-300": (name: "yellow", color: $yellow-300, number: "-300"),
// "yellow-400": (name: "yellow", color: $yellow-400, number: "-400"),
// "yellow-500": (name: "yellow", color: $yellow-500, number: "-500"),
// "yellow-600": (name: "yellow", color: $yellow-600, number: "-600"),
// "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
// "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
// "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
// "yellow-A100": (name: "yellow", color: $yellow-A100, number: "-A100"),
// "yellow-A200": (name: "yellow", color: $yellow-A200, number: "-A200"),
// "yellow-A400": (name: "yellow", color: $yellow-A400, number: "-A400"),
// "yellow-A700": (name: "yellow", color: $yellow-A700, number: "-A700"),
// "yellow": (name: "yellow", color: $yellow, number: ""),
// "amber-50": (name: "amber", color: $amber-50, number: "-50"),
// "amber-100": (name: "amber", color: $amber-100, number: "-100"),
// "amber-200": (name: "amber", color: $amber-200, number: "-200"),
// "amber-300": (name: "amber", color: $amber-300, number: "-300"),
// "amber-400": (name: "amber", color: $amber-400, number: "-400"),
// "amber-500": (name: "amber", color: $amber-500, number: "-500"),
// "amber-600": (name: "amber", color: $amber-600, number: "-600"),
// "amber-700": (name: "amber", color: $amber-700, number: "-700"),
// "amber-800": (name: "amber", color: $amber-800, number: "-800"),
// "amber-900": (name: "amber", color: $amber-900, number: "-900"),
// "amber-A100": (name: "amber", color: $amber-A100, number: "-A100"),
// "amber-A200": (name: "amber", color: $amber-A200, number: "-A200"),
// "amber-A400": (name: "amber", color: $amber-A400, number: "-A400"),
// "amber-A700": (name: "amber", color: $amber-A700, number: "-A700"),
// "amber": (name: "amber", color: $amber, number: ""),
// "orange-50": (name: "orange", color: $orange-50, number: "-50"),
// "orange-100": (name: "orange", color: $orange-100, number: "-100"),
// "orange-200": (name: "orange", color: $orange-200, number: "-200"),
// "orange-300": (name: "orange", color: $orange-300, number: "-300"),
// "orange-400": (name: "orange", color: $orange-400, number: "-400"),
// "orange-500": (name: "orange", color: $orange-500, number: "-500"),
// "orange-600": (name: "orange", color: $orange-600, number: "-600"),
// "orange-700": (name: "orange", color: $orange-700, number: "-700"),
// "orange-800": (name: "orange", color: $orange-800, number: "-800"),
// "orange-900": (name: "orange", color: $orange-900, number: "-900"),
// "orange-A100": (name: "orange", color: $orange-A100, number: "-A100"),
// "orange-A200": (name: "orange", color: $orange-A200, number: "-A200"),
// "orange-A400": (name: "orange", color: $orange-A400, number: "-A400"),
// "orange-A700": (name: "orange", color: $orange-A700, number: "-A700"),
// "orange": (name: "orange", color: $orange, number: ""),
// "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
// "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"),
// "deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"),
// "deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"),
// "deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"),
// "deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"),
// "deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"),
// "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
// "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"),
// "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
// "deep-orange-A100": (name: "deep-orange", color: $deep-orange-A100, number: "-A100"),
// "deep-orange-A200": (name: "deep-orange", color: $deep-orange-A200, number: "-A200"),
// "deep-orange-A400": (name: "deep-orange", color: $deep-orange-A400, number: "-A400"),
// "deep-orange-A700": (name: "deep-orange", color: $deep-orange-A700, number: "-A700"),
// "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
// "brown-50": (name: "brown", color: $brown-50, number: "-50"),
// "brown-100": (name: "brown", color: $brown-100, number: "-100"),
// "brown-200": (name: "brown", color: $brown-200, number: "-200"),
// "brown-300": (name: "brown", color: $brown-300, number: "-300"),
// "brown-400": (name: "brown", color: $brown-400, number: "-400"),
// "brown-500": (name: "brown", color: $brown-500, number: "-500"),
// "brown-600": (name: "brown", color: $brown-600, number: "-600"),
// "brown-700": (name: "brown", color: $brown-700, number: "-700"),
// "brown-800": (name: "brown", color: $brown-800, number: "-800"),
// "brown-900": (name: "brown", color: $brown-900, number: "-900"),
// "brown-A100": (name: "brown", color: $brown-A100, number: "-A100"),
// "brown-A200": (name: "brown", color: $brown-A200, number: "-A200"),
// "brown-A400": (name: "brown", color: $brown-A400, number: "-A400"),
// "brown-A700": (name: "brown", color: $brown-A700, number: "-A700"),
// "brown": (name: "brown", color: $brown, number: ""),
// "grey-50": (name: "grey", color: $grey-50, number: "-50"),
// "grey-100": (name: "grey", color: $grey-100, number: "-100"),
// "grey-200": (name: "grey", color: $grey-200, number: "-200"),
// "grey-300": (name: "grey", color: $grey-300, number: "-300"),
// "grey-400": (name: "grey", color: $grey-400, number: "-400"),
// "grey-500": (name: "grey", color: $grey-500, number: "-500"),
// "grey-600": (name: "grey", color: $grey-600, number: "-600"),
// "grey-700": (name: "grey", color: $grey-700, number: "-700"),
// "grey-800": (name: "grey", color: $grey-800, number: "-800"),
// "grey-900": (name: "grey", color: $grey-900, number: "-900"),
// "grey-A100": (name: "grey", color: $grey-A100, number: "-A100"),
// "grey-A200": (name: "grey", color: $grey-A200, number: "-A200"),
// "grey-A400": (name: "grey", color: $grey-A400, number: "-A400"),
// "grey-A700": (name: "grey", color: $grey-A700, number: "-A700"),
// "grey": (name: "grey", color: $grey, number: ""),
// "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
// "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"),
// "blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"),
// "blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"),
// "blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"),
// "blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"),
// "blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"),
// "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
// "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"),
// "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
// "blue-grey-A100": (name: "blue-grey", color: $blue-grey-A100, number: "-A100"),
// "blue-grey-A200": (name: "blue-grey", color: $blue-grey-A200, number: "-A200"),
// "blue-grey-A400": (name: "blue-grey", color: $blue-grey-A400, number: "-A400"),
// "blue-grey-A700": (name: "blue-grey", color: $blue-grey-A700, number: "-A700"),
// "blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
//);

307
sass/_mixins-fullpalette.scss
View File

@ -1,307 +0,0 @@
// This file is NOT automatically converted and must be manually merged
@import 'mixins-shared';
@mixin generic-variations-colors($args) {
//@debug "multi-palette generic-variations-colors called with #{inspect($args)}";
$mdb-colors: (
"red-50": (name: "red", color: $red-50, number: "-50"),
"red-100": (name: "red", color: $red-100, number: "-100"),
"red-200": (name: "red", color: $red-200, number: "-200"),
"red-300": (name: "red", color: $red-300, number: "-300"),
"red-400": (name: "red", color: $red-400, number: "-400"),
"red-500": (name: "red", color: $red-500, number: "-500"),
"red-600": (name: "red", color: $red-600, number: "-600"),
"red-700": (name: "red", color: $red-700, number: "-700"),
"red-800": (name: "red", color: $red-800, number: "-800"),
"red-900": (name: "red", color: $red-900, number: "-900"),
"red-A100": (name: "red", color: $red-A100, number: "-A100"),
"red-A200": (name: "red", color: $red-A200, number: "-A200"),
"red-A400": (name: "red", color: $red-A400, number: "-A400"),
"red-A700": (name: "red", color: $red-A700, number: "-A700"),
"red": (name: "red", color: $red, number: ""),
"pink-50": (name: "pink", color: $pink-50, number: "-50"),
"pink-100": (name: "pink", color: $pink-100, number: "-100"),
"pink-200": (name: "pink", color: $pink-200, number: "-200"),
"pink-300": (name: "pink", color: $pink-300, number: "-300"),
"pink-400": (name: "pink", color: $pink-400, number: "-400"),
"pink-500": (name: "pink", color: $pink-500, number: "-500"),
"pink-600": (name: "pink", color: $pink-600, number: "-600"),
"pink-700": (name: "pink", color: $pink-700, number: "-700"),
"pink-800": (name: "pink", color: $pink-800, number: "-800"),
"pink-900": (name: "pink", color: $pink-900, number: "-900"),
"pink-A100": (name: "pink", color: $pink-A100, number: "-A100"),
"pink-A200": (name: "pink", color: $pink-A200, number: "-A200"),
"pink-A400": (name: "pink", color: $pink-A400, number: "-A400"),
"pink-A700": (name: "pink", color: $pink-A700, number: "-A700"),
"pink": (name: "pink", color: $pink, number: ""),
"purple-50": (name: "purple", color: $purple-50, number: "-50"),
"purple-100": (name: "purple", color: $purple-100, number: "-100"),
"purple-200": (name: "purple", color: $purple-200, number: "-200"),
"purple-300": (name: "purple", color: $purple-300, number: "-300"),
"purple-400": (name: "purple", color: $purple-400, number: "-400"),
"purple-500": (name: "purple", color: $purple-500, number: "-500"),
"purple-600": (name: "purple", color: $purple-600, number: "-600"),
"purple-700": (name: "purple", color: $purple-700, number: "-700"),
"purple-800": (name: "purple", color: $purple-800, number: "-800"),
"purple-900": (name: "purple", color: $purple-900, number: "-900"),
"purple-A100": (name: "purple", color: $purple-A100, number: "-A100"),
"purple-A200": (name: "purple", color: $purple-A200, number: "-A200"),
"purple-A400": (name: "purple", color: $purple-A400, number: "-A400"),
"purple-A700": (name: "purple", color: $purple-A700, number: "-A700"),
"purple": (name: "purple", color: $purple, number: ""),
"deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
"deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"),
"deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"),
"deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"),
"deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"),
"deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"),
"deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"),
"deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
"deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"),
"deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
"deep-purple-A100": (name: "deep-purple", color: $deep-purple-A100, number: "-A100"),
"deep-purple-A200": (name: "deep-purple", color: $deep-purple-A200, number: "-A200"),
"deep-purple-A400": (name: "deep-purple", color: $deep-purple-A400, number: "-A400"),
"deep-purple-A700": (name: "deep-purple", color: $deep-purple-A700, number: "-A700"),
"deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
"indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
"indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
"indigo-200": (name: "indigo", color: $indigo-200, number: "-200"),
"indigo-300": (name: "indigo", color: $indigo-300, number: "-300"),
"indigo-400": (name: "indigo", color: $indigo-400, number: "-400"),
"indigo-500": (name: "indigo", color: $indigo-500, number: "-500"),
"indigo-600": (name: "indigo", color: $indigo-600, number: "-600"),
"indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
"indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
"indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
"indigo-A100": (name: "indigo", color: $indigo-A100, number: "-A100"),
"indigo-A200": (name: "indigo", color: $indigo-A200, number: "-A200"),
"indigo-A400": (name: "indigo", color: $indigo-A400, number: "-A400"),
"indigo-A700": (name: "indigo", color: $indigo-A700, number: "-A700"),
"indigo": (name: "indigo", color: $indigo, number: ""),
"blue-50": (name: "blue", color: $blue-50, number: "-50"),
"blue-100": (name: "blue", color: $blue-100, number: "-100"),
"blue-200": (name: "blue", color: $blue-200, number: "-200"),
"blue-300": (name: "blue", color: $blue-300, number: "-300"),
"blue-400": (name: "blue", color: $blue-400, number: "-400"),
"blue-500": (name: "blue", color: $blue-500, number: "-500"),
"blue-600": (name: "blue", color: $blue-600, number: "-600"),
"blue-700": (name: "blue", color: $blue-700, number: "-700"),
"blue-800": (name: "blue", color: $blue-800, number: "-800"),
"blue-900": (name: "blue", color: $blue-900, number: "-900"),
"blue-A100": (name: "blue", color: $blue-A100, number: "-A100"),
"blue-A200": (name: "blue", color: $blue-A200, number: "-A200"),
"blue-A400": (name: "blue", color: $blue-A400, number: "-A400"),
"blue-A700": (name: "blue", color: $blue-A700, number: "-A700"),
"blue": (name: "blue", color: $blue, number: ""),
"light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
"light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"),
"light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"),
"light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"),
"light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"),
"light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"),
"light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"),
"light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
"light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"),
"light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
"light-blue-A100": (name: "light-blue", color: $light-blue-A100, number: "-A100"),
"light-blue-A200": (name: "light-blue", color: $light-blue-A200, number: "-A200"),
"light-blue-A400": (name: "light-blue", color: $light-blue-A400, number: "-A400"),
"light-blue-A700": (name: "light-blue", color: $light-blue-A700, number: "-A700"),
"light-blue": (name: "light-blue", color: $light-blue, number: ""),
"cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
"cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
"cyan-200": (name: "cyan", color: $cyan-200, number: "-200"),
"cyan-300": (name: "cyan", color: $cyan-300, number: "-300"),
"cyan-400": (name: "cyan", color: $cyan-400, number: "-400"),
"cyan-500": (name: "cyan", color: $cyan-500, number: "-500"),
"cyan-600": (name: "cyan", color: $cyan-600, number: "-600"),
"cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
"cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
"cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
"cyan-A100": (name: "cyan", color: $cyan-A100, number: "-A100"),
"cyan-A200": (name: "cyan", color: $cyan-A200, number: "-A200"),
"cyan-A400": (name: "cyan", color: $cyan-A400, number: "-A400"),
"cyan-A700": (name: "cyan", color: $cyan-A700, number: "-A700"),
"cyan": (name: "cyan", color: $cyan, number: ""),
"teal-50": (name: "teal", color: $teal-50, number: "-50"),
"teal-100": (name: "teal", color: $teal-100, number: "-100"),
"teal-200": (name: "teal", color: $teal-200, number: "-200"),
"teal-300": (name: "teal", color: $teal-300, number: "-300"),
"teal-400": (name: "teal", color: $teal-400, number: "-400"),
"teal-500": (name: "teal", color: $teal-500, number: "-500"),
"teal-600": (name: "teal", color: $teal-600, number: "-600"),
"teal-700": (name: "teal", color: $teal-700, number: "-700"),
"teal-800": (name: "teal", color: $teal-800, number: "-800"),
"teal-900": (name: "teal", color: $teal-900, number: "-900"),
"teal-A100": (name: "teal", color: $teal-A100, number: "-A100"),
"teal-A200": (name: "teal", color: $teal-A200, number: "-A200"),
"teal-A400": (name: "teal", color: $teal-A400, number: "-A400"),
"teal-A700": (name: "teal", color: $teal-A700, number: "-A700"),
"teal": (name: "teal", color: $teal, number: ""),
"green-50": (name: "green", color: $green-50, number: "-50"),
"green-100": (name: "green", color: $green-100, number: "-100"),
"green-200": (name: "green", color: $green-200, number: "-200"),
"green-300": (name: "green", color: $green-300, number: "-300"),
"green-400": (name: "green", color: $green-400, number: "-400"),
"green-500": (name: "green", color: $green-500, number: "-500"),
"green-600": (name: "green", color: $green-600, number: "-600"),
"green-700": (name: "green", color: $green-700, number: "-700"),
"green-800": (name: "green", color: $green-800, number: "-800"),
"green-900": (name: "green", color: $green-900, number: "-900"),
"green-A100": (name: "green", color: $green-A100, number: "-A100"),
"green-A200": (name: "green", color: $green-A200, number: "-A200"),
"green-A400": (name: "green", color: $green-A400, number: "-A400"),
"green-A700": (name: "green", color: $green-A700, number: "-A700"),
"green": (name: "green", color: $green, number: ""),
"light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
"light-green-100": (name: "light-green", color: $light-green-100, number: "-100"),
"light-green-200": (name: "light-green", color: $light-green-200, number: "-200"),
"light-green-300": (name: "light-green", color: $light-green-300, number: "-300"),
"light-green-400": (name: "light-green", color: $light-green-400, number: "-400"),
"light-green-500": (name: "light-green", color: $light-green-500, number: "-500"),
"light-green-600": (name: "light-green", color: $light-green-600, number: "-600"),
"light-green-700": (name: "light-green", color: $light-green-700, number: "-700"),
"light-green-800": (name: "light-green", color: $light-green-800, number: "-800"),
"light-green-900": (name: "light-green", color: $light-green-900, number: "-900"),
"light-green-A100": (name: "light-green", color: $light-green-A100, number: "-A100"),
"light-green-A200": (name: "light-green", color: $light-green-A200, number: "-A200"),
"light-green-A400": (name: "light-green", color: $light-green-A400, number: "-A400"),
"light-green-A700": (name: "light-green", color: $light-green-A700, number: "-A700"),
"light-green": (name: "light-green", color: $light-green, number: ""),
"lime-50": (name: "lime", color: $lime-50, number: "-50"),
"lime-100": (name: "lime", color: $lime-100, number: "-100"),
"lime-200": (name: "lime", color: $lime-200, number: "-200"),
"lime-300": (name: "lime", color: $lime-300, number: "-300"),
"lime-400": (name: "lime", color: $lime-400, number: "-400"),
"lime-500": (name: "lime", color: $lime-500, number: "-500"),
"lime-600": (name: "lime", color: $lime-600, number: "-600"),
"lime-700": (name: "lime", color: $lime-700, number: "-700"),
"lime-800": (name: "lime", color: $lime-800, number: "-800"),
"lime-900": (name: "lime", color: $lime-900, number: "-900"),
"lime-A100": (name: "lime", color: $lime-A100, number: "-A100"),
"lime-A200": (name: "lime", color: $lime-A200, number: "-A200"),
"lime-A400": (name: "lime", color: $lime-A400, number: "-A400"),
"lime-A700": (name: "lime", color: $lime-A700, number: "-A700"),
"lime": (name: "lime", color: $lime, number: ""),
"yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
"yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
"yellow-200": (name: "yellow", color: $yellow-200, number: "-200"),
"yellow-300": (name: "yellow", color: $yellow-300, number: "-300"),
"yellow-400": (name: "yellow", color: $yellow-400, number: "-400"),
"yellow-500": (name: "yellow", color: $yellow-500, number: "-500"),
"yellow-600": (name: "yellow", color: $yellow-600, number: "-600"),
"yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
"yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
"yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
"yellow-A100": (name: "yellow", color: $yellow-A100, number: "-A100"),
"yellow-A200": (name: "yellow", color: $yellow-A200, number: "-A200"),
"yellow-A400": (name: "yellow", color: $yellow-A400, number: "-A400"),
"yellow-A700": (name: "yellow", color: $yellow-A700, number: "-A700"),
"yellow": (name: "yellow", color: $yellow, number: ""),
"amber-50": (name: "amber", color: $amber-50, number: "-50"),
"amber-100": (name: "amber", color: $amber-100, number: "-100"),
"amber-200": (name: "amber", color: $amber-200, number: "-200"),
"amber-300": (name: "amber", color: $amber-300, number: "-300"),
"amber-400": (name: "amber", color: $amber-400, number: "-400"),
"amber-500": (name: "amber", color: $amber-500, number: "-500"),
"amber-600": (name: "amber", color: $amber-600, number: "-600"),
"amber-700": (name: "amber", color: $amber-700, number: "-700"),
"amber-800": (name: "amber", color: $amber-800, number: "-800"),
"amber-900": (name: "amber", color: $amber-900, number: "-900"),
"amber-A100": (name: "amber", color: $amber-A100, number: "-A100"),
"amber-A200": (name: "amber", color: $amber-A200, number: "-A200"),
"amber-A400": (name: "amber", color: $amber-A400, number: "-A400"),
"amber-A700": (name: "amber", color: $amber-A700, number: "-A700"),
"amber": (name: "amber", color: $amber, number: ""),
"orange-50": (name: "orange", color: $orange-50, number: "-50"),
"orange-100": (name: "orange", color: $orange-100, number: "-100"),
"orange-200": (name: "orange", color: $orange-200, number: "-200"),
"orange-300": (name: "orange", color: $orange-300, number: "-300"),
"orange-400": (name: "orange", color: $orange-400, number: "-400"),
"orange-500": (name: "orange", color: $orange-500, number: "-500"),
"orange-600": (name: "orange", color: $orange-600, number: "-600"),
"orange-700": (name: "orange", color: $orange-700, number: "-700"),
"orange-800": (name: "orange", color: $orange-800, number: "-800"),
"orange-900": (name: "orange", color: $orange-900, number: "-900"),
"orange-A100": (name: "orange", color: $orange-A100, number: "-A100"),
"orange-A200": (name: "orange", color: $orange-A200, number: "-A200"),
"orange-A400": (name: "orange", color: $orange-A400, number: "-A400"),
"orange-A700": (name: "orange", color: $orange-A700, number: "-A700"),
"orange": (name: "orange", color: $orange, number: ""),
"deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
"deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"),
"deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"),
"deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"),
"deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"),
"deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"),
"deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"),
"deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
"deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"),
"deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
"deep-orange-A100": (name: "deep-orange", color: $deep-orange-A100, number: "-A100"),
"deep-orange-A200": (name: "deep-orange", color: $deep-orange-A200, number: "-A200"),
"deep-orange-A400": (name: "deep-orange", color: $deep-orange-A400, number: "-A400"),
"deep-orange-A700": (name: "deep-orange", color: $deep-orange-A700, number: "-A700"),
"deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
"brown-50": (name: "brown", color: $brown-50, number: "-50"),
"brown-100": (name: "brown", color: $brown-100, number: "-100"),
"brown-200": (name: "brown", color: $brown-200, number: "-200"),
"brown-300": (name: "brown", color: $brown-300, number: "-300"),
"brown-400": (name: "brown", color: $brown-400, number: "-400"),
"brown-500": (name: "brown", color: $brown-500, number: "-500"),
"brown-600": (name: "brown", color: $brown-600, number: "-600"),
"brown-700": (name: "brown", color: $brown-700, number: "-700"),
"brown-800": (name: "brown", color: $brown-800, number: "-800"),
"brown-900": (name: "brown", color: $brown-900, number: "-900"),
"brown-A100": (name: "brown", color: $brown-A100, number: "-A100"),
"brown-A200": (name: "brown", color: $brown-A200, number: "-A200"),
"brown-A400": (name: "brown", color: $brown-A400, number: "-A400"),
"brown-A700": (name: "brown", color: $brown-A700, number: "-A700"),
"brown": (name: "brown", color: $brown, number: ""),
"grey-50": (name: "grey", color: $grey-50, number: "-50"),
"grey-100": (name: "grey", color: $grey-100, number: "-100"),
"grey-200": (name: "grey", color: $grey-200, number: "-200"),
"grey-300": (name: "grey", color: $grey-300, number: "-300"),
"grey-400": (name: "grey", color: $grey-400, number: "-400"),
"grey-500": (name: "grey", color: $grey-500, number: "-500"),
"grey-600": (name: "grey", color: $grey-600, number: "-600"),
"grey-700": (name: "grey", color: $grey-700, number: "-700"),
"grey-800": (name: "grey", color: $grey-800, number: "-800"),
"grey-900": (name: "grey", color: $grey-900, number: "-900"),
"grey-A100": (name: "grey", color: $grey-A100, number: "-A100"),
"grey-A200": (name: "grey", color: $grey-A200, number: "-A200"),
"grey-A400": (name: "grey", color: $grey-A400, number: "-A400"),
"grey-A700": (name: "grey", color: $grey-A700, number: "-A700"),
"grey": (name: "grey", color: $grey, number: ""),
"blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
"blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"),
"blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"),
"blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"),
"blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"),
"blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"),
"blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"),
"blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
"blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"),
"blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
"blue-grey-A100": (name: "blue-grey", color: $blue-grey-A100, number: "-A100"),
"blue-grey-A200": (name: "blue-grey", color: $blue-grey-A200, number: "-A200"),
"blue-grey-A400": (name: "blue-grey", color: $blue-grey-A400, number: "-A400"),
"blue-grey-A700": (name: "blue-grey", color: $blue-grey-A700, number: "-A700"),
"blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
);
@each $mdb-color-combination, $color-attributes in $mdb-colors {
// build a single depth color palette
$args-variation-color: map-merge($args, (
material-color-name: map-get($color-attributes, name),
material-color: map-get($color-attributes, color),
material-color-number: map-get($color-attributes, number)
));
//@debug "generic-variations-color #{map-get($color-attributes, name)} #{map-get($color-attributes, color)} #{map-get($color-attributes, number)}";
@include generic-variations-color($args-variation-color)
}
}

292
sass/_mixins-shared.scss
View File

@ -1,292 +0,0 @@
// This file is NOT automatically converted and must be manually merged
@import "mixins-utilities";
// Placeholder text
@mixin material-placeholder() {
&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder {@content; } // Safari and Chrome
}
// variations(unquote(""), background-color, #FFF);
@mixin variations($extra, $mdb-param-1, $default) {
@include generic-variations($extra, $default, "variations-content", $mdb-param-1);
}
@mixin variations-content($args) {
//@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, material-color)}; }";
//@debug "#{inspect($args)}";
//@error "break here";
#{map-get($args, material-param-1)}: map-get($args, material-color);
}
@mixin background-variations($extra, $default) {
@include generic-variations($extra, $default, "background-variations-content", null);
}
@mixin background-variations-content($args) {
background-color: map-get($args, material-color);
@if (map-get($args, material-color) == $btn-default) {
color: $lightbg-text;
} @else {
color: map-get($args, material-text-color);
}
}
@mixin text-variations($extra, $default) {
@include generic-variations($extra, $default, "text-variations-content", null);
}
@mixin text-variations-content($args) {
color: map-get($args, material-color);
}
@mixin button-variations($extra, $default, $mdb-param-1) {
@include generic-variations($extra, $default, "button-variations-content", $mdb-param-1);
}
@mixin button-variations-content($args) {
//@debug "#{inspect($args)}";
$mdb-color: map-get($args, material-color);
$mdb-param-1: map-get($args, material-param-1);
background-color: contrast-color($mdb-color,
darken($mdb-color, $mdb-param-1),
lighten($mdb-color, $mdb-param-1));
}
@mixin bg-color-variations($extra, $default, $mdb-param-1) {
@include generic-variations($extra, $default, "bg-color-variations-content", $mdb-param-1);
}
@mixin bg-color-variations-content($args) {
background-color: rgba(map-get($args, material-color), map-get($args, material-param-1));
}
// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin bg-box-shadow-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-box-shadow-variations-content", null);
}
@mixin bg-box-shadow-variations-content($args){
$mdb-color: map-get($args, material-color);
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($mdb-color, (10/100));
}
// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin bg-img-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-img-variations-content", null);
}
@mixin bg-img-variations-content($args){
$mdb-color: map-get($args, material-color);
//@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, material-color-name)} #{map-get($args, material-color)}"; //#{inspect($args)}";
background-image: linear-gradient($mdb-color, $mdb-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
}
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin navbar-variations($extra, $default) {
@include generic-variations($extra, $default, "navbar-variations-content", null);
}
@mixin navbar-variations-content($args){
$mdb-color: map-get($args, material-color);
$mdb-text-color: map-get($args, material-text-color);
background-color: $mdb-color;
color: $mdb-text-color;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: $mdb-text-color;
}
.dropdown-menu {
border-radius: $mdb-dropdown-radius;
li > a {
font-size: $mdb-dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
color: $mdb-color;
background-color: $grey-200;
}
}
.active > a {
&:hover,
&:focus {
color: $mdb-text-color;
}
background-color: $mdb-color;
color: $mdb-text-color;
}
}
}
// alert-variations("", $brand-primary)
@mixin alert-variations($extra, $default) {
@include generic-variations($extra, $default, "alert-variations-content", null);
}
@mixin alert-variations-content($args){
$mdb-color: map-get($args, material-color);
$mdb-text-color: map-get($args, material-text-color);
background-color: $mdb-color;
color: $mdb-text-color;
a, .alert-link {
color: $mdb-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) {
$mixin-name: map-get($args, mixin-name);
@if $mixin-name == variations-content {
@include variations-content($args);
} @else if $mixin-name == background-variations-content {
@include background-variations-content($args);
} @else if $mixin-name == text-variations-content {
@include text-variations-content($args);
} @else if $mixin-name == button-variations-content {
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@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 if $mixin-name == alert-variations-content {
@include alert-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}
}
//
// 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.
//
// $mdb-color-name ---> "red", "green", "indigo" ...
// $mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// $mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($extra, $default, $mixin-name, $mdb-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
extra: $extra,
default: $default,
mixin-name: $mixin-name,
material-param-1: $mdb-param-1
);
// bootstrap styles
&#{$extra}, &-default#{$extra} {
$args-extra: map-merge($args, (
material-color-name: "default",
material-color-full-name: "default",
material-color: $default,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-extra);
}
&-black#{$extra} {
$args-black: map-merge($args, (
material-color-name: "black",
material-color-full-name: "black",
material-color: $black,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-black);
}
&-white#{$extra} {
$args-white: map-merge($args, (
material-color-name: "white",
material-color-full-name: "white",
material-color: $white,
material-text-color: $lightbg-text
));
@include call-variations-content-mixin($args-white);
}
&-inverse#{$extra} {
$args-inverse: map-merge($args, (
material-color-name: "inverse",
material-color-full-name: "inverse",
material-color: $inverse,
material-text-color: contrast-color($inverse, $lightbg-text, $darkbg-text)
));
@include call-variations-content-mixin($args-inverse);
}
&-primary#{$extra} {
$args-primary: map-merge($args, (
material-color-name: "primary",
material-color-full-name: "primary",
material-color: $brand-primary,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-primary);
}
&-success#{$extra} {
$args-success: map-merge($args, (
material-color-name: "success",
material-color-full-name: "success",
material-color: $brand-success,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-success);
}
&-info#{$extra} {
$args-info: map-merge($args, (
material-color-name: "info",
material-color-full-name: "info",
material-color: $brand-info,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-info);
}
&-warning#{$extra} {
$args-warning: map-merge($args, (
material-color-name: "warning",
material-color-full-name: "warning",
material-color: $brand-warning,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-warning);
}
&-danger#{$extra} {
$args-danger: map-merge($args, (
material-color-name: "danger",
material-color-full-name: "danger",
material-color: $brand-danger,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-danger);
}
@include generic-variations-colors($args)
}
@mixin generic-variations-color($args) {
$mdb-color-name: map-get($args, material-color-name);
$mdb-color-number: map-get($args, material-color-number);
$mdb-color-full-name: "#{$mdb-color-name}#{$mdb-color-number}";
$mdb-color: map-get($args, material-color); // $mdb-color-full-name;
$mdb-text-color: contrast-color($mdb-color, $lightbg-text, $darkbg-text);
&-material-#{$mdb-color-name}#{unquote($mdb-color-number)}#{map-get($args, extra)} {
$args-color: map-merge($args, (
material-color-full-name: $mdb-color-full-name,
material-color: $mdb-color,
material-text-color: $mdb-text-color,
));
@include call-variations-content-mixin($args-color);
}
}
$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");

2
sass/_mixins-utilities.scss
View File

@ -1,5 +1,7 @@
// This file is here to emulate the less #contrast function // This file is here to emulate the less #contrast function
// TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of fullpalette)
// contrast-color and brightness borrowed from compass // contrast-color and brightness borrowed from compass
// Copyright (c) 2009-2014 Christopher M. Eppstein // Copyright (c) 2009-2014 Christopher M. Eppstein
// Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown // Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown

296
sass/_mixins.scss
View File

@ -1,41 +1,273 @@
// This file is NOT automatically converted and must be manually merged // This file is NOT automatically converted and must be manually merged
@import 'mixins-shared'; @import "mixins-utilities";
@mixin generic-variations-colors($args) { // Placeholder text
@mixin material-placeholder() {
&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder {@content; } // Safari and Chrome
}
$mdb-colors: (
"red": $red, // variations(unquote(""), background-color, #FFF);
"pink": $pink, @mixin variations($extra, $mdb-param-1, $default) {
"purple": $purple, @include generic-variations($extra, $default, "variations-content", $mdb-param-1);
"deep-purple": $deep-purple, }
"indigo": $indigo,
"blue": $blue, @mixin variations-content($args) {
"light-blue": $light-blue, //@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, material-color)}; }";
"cyan": $cyan, //@debug "#{inspect($args)}";
"teal": $teal, //@error "break here";
"green": $green, #{map-get($args, material-param-1)}: map-get($args, material-color);
"light-green": $light-green, }
"lime": $lime,
"yellow": $yellow, @mixin background-variations($extra, $default) {
"amber": $amber, @include generic-variations($extra, $default, "background-variations-content", null);
"orange": $orange, }
"deep-orange": $deep-orange,
"brown": $brown, @mixin background-variations-content($args) {
"grey": $grey, background-color: map-get($args, material-color);
"blue-grey": $blue-grey @if (map-get($args, material-color) == $btn-default) {
color: $lightbg-text;
} @else {
color: map-get($args, material-text-color);
}
}
@mixin text-variations($extra, $default) {
@include generic-variations($extra, $default, "text-variations-content", null);
}
@mixin text-variations-content($args) {
color: map-get($args, material-color);
}
@mixin button-variations($extra, $default, $mdb-param-1) {
@include generic-variations($extra, $default, "button-variations-content", $mdb-param-1);
}
@mixin button-variations-content($args) {
//@debug "#{inspect($args)}";
$mdb-color: map-get($args, material-color);
$mdb-param-1: map-get($args, material-param-1);
background-color: contrast-color($mdb-color,
darken($mdb-color, $mdb-param-1),
lighten($mdb-color, $mdb-param-1));
}
@mixin bg-color-variations($extra, $default, $mdb-param-1) {
@include generic-variations($extra, $default, "bg-color-variations-content", $mdb-param-1);
}
@mixin bg-color-variations-content($args) {
background-color: rgba(map-get($args, material-color), map-get($args, material-param-1));
}
// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin bg-box-shadow-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-box-shadow-variations-content", null);
}
@mixin bg-box-shadow-variations-content($args){
$mdb-color: map-get($args, material-color);
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($mdb-color, (10/100));
}
// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin bg-img-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-img-variations-content", null);
}
@mixin bg-img-variations-content($args){
$mdb-color: map-get($args, material-color);
//@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, material-color-name)} #{map-get($args, material-color)}"; //#{inspect($args)}";
background-image: linear-gradient($mdb-color, $mdb-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
}
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin navbar-variations($extra, $default) {
@include generic-variations($extra, $default, "navbar-variations-content", null);
}
@mixin navbar-variations-content($args){
$mdb-color: map-get($args, material-color);
$mdb-text-color: map-get($args, material-text-color);
background-color: $mdb-color;
color: $mdb-text-color;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: $mdb-text-color;
}
.dropdown-menu {
border-radius: $mdb-dropdown-radius;
li > a {
font-size: $mdb-dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
color: $mdb-color;
background-color: $grey-200;
}
}
.active > a {
&:hover,
&:focus {
color: $mdb-text-color;
}
background-color: $mdb-color;
color: $mdb-text-color;
}
}
}
// alert-variations("", $brand-primary)
@mixin alert-variations($extra, $default) {
@include generic-variations($extra, $default, "alert-variations-content", null);
}
@mixin alert-variations-content($args){
$mdb-color: map-get($args, material-color);
$mdb-text-color: map-get($args, material-text-color);
background-color: $mdb-color;
color: $mdb-text-color;
a, .alert-link {
color: $mdb-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) {
$mixin-name: map-get($args, mixin-name);
@if $mixin-name == variations-content {
@include variations-content($args);
} @else if $mixin-name == background-variations-content {
@include background-variations-content($args);
} @else if $mixin-name == text-variations-content {
@include text-variations-content($args);
} @else if $mixin-name == button-variations-content {
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@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 if $mixin-name == alert-variations-content {
@include alert-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}
}
//
// 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.
//
// $mdb-color-name ---> "red", "green", "indigo" ...
// $mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// $mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($extra, $default, $mixin-name, $mdb-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
//extra: $extra,
//default: $default,
mixin-name: $mixin-name,
material-param-1: $mdb-param-1
); );
@each $mdb-color-name, $mdb-color in $mdb-colors { // bootstrap styles
// build a single depth color palette &#{$extra},
$args-variation-color: map-merge($args, ( &-default#{$extra} {
material-color-name: $mdb-color-name,
material-color: $mdb-color, $args-extra: map-merge($args, (
material-color-number: "" //material-color-name: "default",
//material-color-full-name: "default",
material-color: $default,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-extra);
@include generic-variations-color($args-variation-color) }
//&-black#{$extra} {
// $args-black: map-merge($args, (
// //material-color-name: "black",
// //material-color-full-name: "black",
// material-color: $black,
// material-text-color: $darkbg-text
// ));
// @include call-variations-content-mixin($args-black);
//}
//&-white#{$extra} {
// $args-white: map-merge($args, (
// //material-color-name: "white",
// //material-color-full-name: "white",
// material-color: $white,
// material-text-color: $lightbg-text
// ));
// @include call-variations-content-mixin($args-white);
//}
&-inverse#{$extra} {
$args-inverse: map-merge($args, (
//material-color-name: "inverse",
//material-color-full-name: "inverse",
material-color: $inverse,
material-text-color: contrast-color($inverse, $lightbg-text, $darkbg-text)
));
@include call-variations-content-mixin($args-inverse);
}
&-primary#{$extra} {
$args-primary: map-merge($args, (
//material-color-name: "primary",
//material-color-full-name: "primary",
material-color: $brand-primary,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-primary);
}
&-success#{$extra} {
$args-success: map-merge($args, (
//material-color-name: "success",
//material-color-full-name: "success",
material-color: $brand-success,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-success);
}
&-info#{$extra} {
$args-info: map-merge($args, (
//material-color-name: "info",
//material-color-full-name: "info",
material-color: $brand-info,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-info);
}
&-warning#{$extra} {
$args-warning: map-merge($args, (
//material-color-name: "warning",
//material-color-full-name: "warning",
material-color: $brand-warning,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-warning);
}
&-danger#{$extra} {
$args-danger: map-merge($args, (
//material-color-name: "danger",
//material-color-full-name: "danger",
material-color: $brand-danger,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-danger);
} }
} }
// http://hugogiraudel.com/2014/01/27/casting-types-in-sass/ //$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");
// https://github.com/HugoGiraudel/SassyJSON/blob/master/stylesheets/decode/helpers/color/_color.scss

3
sass/_variables.scss
View File

@ -5,6 +5,8 @@
// Material Global vars // Material Global vars
$zero: 0 !default; $zero: 0 !default;
$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
// material icons path // material icons path
$mdb-font-path: "../fonts" !default; $mdb-font-path: "../fonts" !default;
@ -35,6 +37,7 @@ $body-bg: #EEEEEE !default;
//--- //---
// FIXME: Similar but not quite the same as Bootstrap variables // FIXME: Similar but not quite the same as Bootstrap variables
// FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables // FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
$contrast-factor: 40% !default;
$btn-default: transparent !default; $btn-default: transparent !default;
$btn-default-text: $lightbg-text !default; $btn-default-text: $lightbg-text !default;
//--- //---

2
sass/material.scss → sass/bootstrap-material-design.scss vendored
View File

@ -4,4 +4,4 @@
@import '_mixins'; @import '_mixins';
@import '_icons-material-design'; @import '_icons-material-design';
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt) @import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins) @import '_bootstrap-material-design'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

7
sass/material-fullpalette.scss
View File

@ -1,7 +0,0 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@import '_variables';
@import '_mixins-fullpalette';
@import '_icons-material-design';
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

1
sass/ripples.scss
View File

@ -21,6 +21,7 @@
margin-left: -10px; margin-left: -10px;
margin-top: -10px; margin-top: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #000; // fallback color
background-color: rgba(0,0,0,0.05); background-color: rgba(0,0,0,0.05);
transform: scale(1); transform: scale(1);
transform-origin: 50%; transform-origin: 50%;

8
sass/roboto.scss
View File

@ -11,7 +11,7 @@
src: local('RobotoDraft'), src: local('RobotoDraft'),
local('RobotoDraft-Regular'), local('RobotoDraft-Regular'),
local('Roboto-Regular'), local('Roboto-Regular'),
url('#{$mdb-font-path}/RobotoDraftRegular.woff2') format('woff2'), url('#{$mdb-font-path}/RobotoDraftRegular.woff2?#iefix') format('woff2'),
url('#{$mdb-font-path}/RobotoDraftRegular.woff') format('woff'); url('#{$mdb-font-path}/RobotoDraftRegular.woff') format('woff');
} }
@ -23,7 +23,7 @@
src: local('RobotoDraft Medium'), src: local('RobotoDraft Medium'),
local('RobotoDraft-Medium'), local('RobotoDraft-Medium'),
local('Roboto-Medium'), local('Roboto-Medium'),
url('#{$mdb-font-path}/RobotoDraftMedium.woff2') format('woff2'), url('#{$mdb-font-path}/RobotoDraftMedium.woff2?#iefix') format('woff2'),
url('#{$mdb-font-path}/RobotoDraftMedium.woff') format('woff'); url('#{$mdb-font-path}/RobotoDraftMedium.woff') format('woff');
} }
@ -35,7 +35,7 @@
src: local('RobotoDraft Bold'), src: local('RobotoDraft Bold'),
local('RobotoDraft-Bold'), local('RobotoDraft-Bold'),
local('Roboto-Bold'), local('Roboto-Bold'),
url('#{$mdb-font-path}/RobotoDraftBold.woff2') format('woff2'), url('#{$mdb-font-path}/RobotoDraftBold.woff2?#iefix') format('woff2'),
url('#{$mdb-font-path}/RobotoDraftBold.woff') format('woff'); url('#{$mdb-font-path}/RobotoDraftBold.woff') format('woff');
} }
@ -47,6 +47,6 @@
src: local('RobotoDraft Italic'), src: local('RobotoDraft Italic'),
local('RobotoDraft-Italic'), local('RobotoDraft-Italic'),
local('Roboto-Italic'), local('Roboto-Italic'),
url('#{$mdb-font-path}/RobotoDraftItalic.woff2') format('woff2'), url('#{$mdb-font-path}/RobotoDraftItalic.woff2?#iefix') format('woff2'),
url('#{$mdb-font-path}/RobotoDraftItalic.woff') format('woff'); url('#{$mdb-font-path}/RobotoDraftItalic.woff') format('woff');
} }