From 828fd32669f8c8c478724fed6d86580faae3bcab Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Sun, 22 Nov 2015 10:23:34 -0600 Subject: [PATCH] #740 remove color variations --- Gruntfile.js | 56 ++-- custom-color-palette.sh | 102 ------ .../css/material.css | 0 .../css/material.css.map | 0 dist-remove-me-post-050/css/ripples.css | 47 +++ dist-remove-me-post-050/css/ripples.css.map | 1 + dist-remove-me-post-050/css/roboto.css | 62 ++++ dist-remove-me-post-050/css/roboto.css.map | 1 + ...l.less => _bootstrap-material-design.less} | 2 +- less/_buttons.less | 23 +- less/_mixins-fullpalette.less | 137 -------- less/_mixins-shared.less | 31 -- less/_mixins.less | 172 ++++++---- less/_variables.less | 3 + ...al.less => bootstrap-material-design.less} | 2 +- less/material-fullpalette.less | 5 - less/ripples.less | 1 + less/roboto.less | 8 +- ...l.scss => _bootstrap-material-design.scss} | 2 +- sass/_buttons.scss | 23 +- sass/_colors-map.scss | 311 ++++++++++++++++++ sass/_mixins-fullpalette.scss | 307 ----------------- sass/_mixins-shared.scss | 292 ---------------- sass/_mixins-utilities.scss | 2 + sass/_mixins.scss | 298 +++++++++++++++-- sass/_variables.scss | 3 + ...al.scss => bootstrap-material-design.scss} | 2 +- sass/material-fullpalette.scss | 7 - sass/ripples.scss | 1 + sass/roboto.scss | 8 +- 30 files changed, 864 insertions(+), 1045 deletions(-) delete mode 100644 custom-color-palette.sh rename {dist => dist-remove-me-post-050}/css/material.css (100%) rename {dist => dist-remove-me-post-050}/css/material.css.map (100%) create mode 100644 dist-remove-me-post-050/css/ripples.css create mode 100644 dist-remove-me-post-050/css/ripples.css.map create mode 100644 dist-remove-me-post-050/css/roboto.css create mode 100644 dist-remove-me-post-050/css/roboto.css.map rename less/{_material.less => _bootstrap-material-design.less} (95%) delete mode 100755 less/_mixins-fullpalette.less delete mode 100755 less/_mixins-shared.less rename less/{material.less => bootstrap-material-design.less} (57%) delete mode 100644 less/material-fullpalette.less rename sass/{_material.scss => _bootstrap-material-design.scss} (95%) create mode 100644 sass/_colors-map.scss delete mode 100644 sass/_mixins-fullpalette.scss delete mode 100644 sass/_mixins-shared.scss rename sass/{material.scss => bootstrap-material-design.scss} (66%) delete mode 100644 sass/material-fullpalette.scss diff --git a/Gruntfile.js b/Gruntfile.js index cb50e92e..ab6de551 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -88,7 +88,7 @@ module.exports = function (grunt) { files: [{ expand: true, cwd: "less", - src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less", "!_import-bs*"], + src: ["*.less", "!_mixins.less", "!_import-bs*"], ext: ".scss", dest: "sass" }], @@ -218,7 +218,7 @@ module.exports = function (grunt) { expand: true, cwd: "sass", //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 ext: ".css" }] @@ -234,24 +234,11 @@ module.exports = function (grunt) { paths: ["less"], sourceMap: true, sourceMapRootpath: "/", - sourceMapFilename: "dist/css/material.css.map", - sourceMapURL: "material.css.map" + sourceMapFilename: "dist/css/bootstrap-material-design.css.map", + sourceMapURL: "bootstrap-material-design.css.map" }, files: { - "dist/css/material.css": "less/material.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", + "dist/css/bootstrap-material-design.css": "less/bootstrap-material-design.less", } }, roboto: { @@ -303,12 +290,7 @@ module.exports = function (grunt) { }, material: { files: { - "dist/css/material.css": "dist/css/material.css" - } - }, - materialfullpalette: { - files: { - "dist/css/material-fullpalette.css": "dist/css/material-fullpalette.css" + "dist/css/bootstrap-material-design.css": "dist/css/bootstrap-material-design.css" } }, roboto: { @@ -337,8 +319,14 @@ module.exports = function (grunt) { csslintrc: 'less/.csslintrc' }, dist: [ - 'dist/css/material.css', - 'dist/css/material-fullpalette.css' + 'dist/css/bootstrap-material-design.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: [ 'docs/examples/**/*.css' @@ -363,12 +351,8 @@ module.exports = function (grunt) { advanced: false }, material: { - src: "dist/css/material.css", - dest: "dist/css/material.min.css" - }, - materialfullpalette: { - src: "dist/css/material-fullpalette.css", - dest: "dist/css/material-fullpalette.min.css" + src: "dist/css/bootstrap-material-design.css", + dest: "dist/css/bootstrap-material-design.min.css" }, roboto: { src: "dist/css/roboto.css", @@ -624,7 +608,6 @@ module.exports = function (grunt) { grunt.registerTask('less-compile', [ "less:material", - "less:materialfullpalette", "less:roboto", "less:ripples" ]); @@ -633,14 +616,13 @@ module.exports = function (grunt) { "less-compile", "autoprefixer:material", - "autoprefixer:materialfullpalette", "autoprefixer:roboto", "autoprefixer:ripples", - + //"csslint:dist", "cssmin:material", - "cssmin:materialfullpalette", "cssmin:roboto", - "cssmin:ripples" + "cssmin:ripples", + //"csslint:distmin" ]); grunt.registerTask("dist-js", [ diff --git a/custom-color-palette.sh b/custom-color-palette.sh deleted file mode 100644 index 227c1330..00000000 --- a/custom-color-palette.sh +++ /dev/null @@ -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 - ${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" diff --git a/dist/css/material.css b/dist-remove-me-post-050/css/material.css similarity index 100% rename from dist/css/material.css rename to dist-remove-me-post-050/css/material.css diff --git a/dist/css/material.css.map b/dist-remove-me-post-050/css/material.css.map similarity index 100% rename from dist/css/material.css.map rename to dist-remove-me-post-050/css/material.css.map diff --git a/dist-remove-me-post-050/css/ripples.css b/dist-remove-me-post-050/css/ripples.css new file mode 100644 index 00000000..1e6f852f --- /dev/null +++ b/dist-remove-me-post-050/css/ripples.css @@ -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 */ \ No newline at end of file diff --git a/dist-remove-me-post-050/css/ripples.css.map b/dist-remove-me-post-050/css/ripples.css.map new file mode 100644 index 00000000..e313b3b8 --- /dev/null +++ b/dist-remove-me-post-050/css/ripples.css.map @@ -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 */"]} \ No newline at end of file diff --git a/dist-remove-me-post-050/css/roboto.css b/dist-remove-me-post-050/css/roboto.css new file mode 100644 index 00000000..2e4a968a --- /dev/null +++ b/dist-remove-me-post-050/css/roboto.css @@ -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 */ \ No newline at end of file diff --git a/dist-remove-me-post-050/css/roboto.css.map b/dist-remove-me-post-050/css/roboto.css.map new file mode 100644 index 00000000..cf70e2d8 --- /dev/null +++ b/dist-remove-me-post-050/css/roboto.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["roboto.css","/less/roboto.less"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;ACjCF;EACE,2BAAA;EACA,mBAAA;EACA,iBAAA;EAEA,0MAAA;CDkCD;AC3BD;EACE,2BAAA;EACA,mBAAA;EACA,iBAAA;EAEA,6MAAA;CD4BD;ACrBD;EACE,2BAAA;EACA,mBAAA;EACA,iBAAA;EAEA,mMAAA;CDsBD;ACfD;EACE,2BAAA;EACA,mBAAA;EACA,iBAAA;EAEA,6MAAA;CDgBD","file":"roboto.css","sourcesContent":["/*\n\nTo get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette\n\nThen, run this script to get the list.\n\n\n(function() {\n var colors = {}, main = {};\n $(\".color-group\").each(function() {\n var color = $(this).find(\".name\").text().trim().toLowerCase().replace(\" \", \"-\");\n colors[color] = {};\n\n $(this).find(\".color\").not(\".main-color\").each(function() {\n var shade = $(this).find(\".shade\").text().trim(),\n hex = $(this).find(\".hex\").text().trim();\n\n colors[color][shade] = hex;\n });\n main[color] = color + \"-\" + $(this).find(\".main-color .shade\").text().trim();\n\n });\n var LESS = \"\";\n $.each(colors, function(name, shades) {\n LESS += \"\\n\\n\";\n $.each(shades, function(shade, hex) {\n LESS += \"@\" + name + \"-\" + shade + \": \" + hex + \";\\n\";\n });\n if (main[name]) {\n LESS += \"@\" + name + \": \" + main[name] + \";\\n\";\n }\n });\n console.log(LESS);\n})();\n\n\n*/\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 400;\n src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url('../fonts/RobotoDraftRegular.woff2?#iefix') format('woff2'), url('../fonts/RobotoDraftRegular.woff') format('woff');\n}\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 500;\n src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url('../fonts/RobotoDraftMedium.woff2?#iefix') format('woff2'), url('../fonts/RobotoDraftMedium.woff') format('woff');\n}\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 700;\n src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url('../fonts/RobotoDraftBold.woff2?#iefix') format('woff2'), url('../fonts/RobotoDraftBold.woff') format('woff');\n}\n@font-face {\n font-family: 'RobotoDraft';\n font-style: italic;\n font-weight: 400;\n src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url('../fonts/RobotoDraftItalic.woff2?#iefix') format('woff2'), url('../fonts/RobotoDraftItalic.woff') format('woff');\n}\n/*# sourceMappingURL=roboto.css.map */","@import \"_colors.less\";\n@import \"_variables.less\";\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 400;\n //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n src: local('RobotoDraft'),\n local('RobotoDraft-Regular'),\n local('Roboto-Regular'),\n url('@{mdb-font-path}/RobotoDraftRegular.woff2?#iefix') format('woff2'),\n url('@{mdb-font-path}/RobotoDraftRegular.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 500;\n //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n src: local('RobotoDraft Medium'),\n local('RobotoDraft-Medium'),\n local('Roboto-Medium'),\n url('@{mdb-font-path}/RobotoDraftMedium.woff2?#iefix') format('woff2'),\n url('@{mdb-font-path}/RobotoDraftMedium.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 700;\n //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n src: local('RobotoDraft Bold'),\n local('RobotoDraft-Bold'),\n local('Roboto-Bold'),\n url('@{mdb-font-path}/RobotoDraftBold.woff2?#iefix') format('woff2'),\n url('@{mdb-font-path}/RobotoDraftBold.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: italic;\n font-weight: 400;\n //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n src: local('RobotoDraft Italic'),\n local('RobotoDraft-Italic'),\n local('Roboto-Italic'),\n url('@{mdb-font-path}/RobotoDraftItalic.woff2?#iefix') format('woff2'),\n url('@{mdb-font-path}/RobotoDraftItalic.woff') format('woff');\n}\n"]} \ No newline at end of file diff --git a/less/_material.less b/less/_bootstrap-material-design.less similarity index 95% rename from less/_material.less rename to less/_bootstrap-material-design.less index 03d28036..bf54693a 100644 --- a/less/_material.less +++ b/less/_bootstrap-material-design.less @@ -20,7 +20,7 @@ body { 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; } diff --git a/less/_buttons.less b/less/_buttons.less index 7fe52892..8a9364d0 100644 --- a/less/_buttons.less +++ b/less/_buttons.less @@ -17,17 +17,26 @@ text-decoration: none; color: @darkbg-text; - &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) { - .shadow-z-1(); - } - &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) { - .shadow-z-1-hover(); + &:not(.btn-link):not(.btn-flat) { + background-color: @btn-default; + color: @lightbg-text; + + &:not(.btn-fab) { + &:hover { + .shadow-z-1(); + } + &:active { + .shadow-z-1-hover(); + } + } } + transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); outline: none !important; - - .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text); + .btn-flat:not(.btn-link){ + color: @lightbg-text; + } .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default); diff --git a/less/_mixins-fullpalette.less b/less/_mixins-fullpalette.less deleted file mode 100755 index e36c3155..00000000 --- a/less/_mixins-fullpalette.less +++ /dev/null @@ -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"; diff --git a/less/_mixins-shared.less b/less/_mixins-shared.less deleted file mode 100755 index 5a9b1fd8..00000000 --- a/less/_mixins-shared.less +++ /dev/null @@ -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; - }); -} diff --git a/less/_mixins.less b/less/_mixins.less index 32baff37..0fa0ad0b 100755 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -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 @@ -16,109 +51,110 @@ @contrast-factor: 40%; // bootstrap styles - &@{extra}, &-default@{extra} { - @mdb-color-name: "default"; - @mdb-color-full-name: @mdb-color-name; + &@{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(); - } + //&-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-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-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-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-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-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-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(~"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"); + //// 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(~"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"; +//@all-variations: ~"-default, -primary, -info, -success, -warning, -danger"; diff --git a/less/_variables.less b/less/_variables.less index 0eb73b17..46c829a8 100644 --- a/less/_variables.less +++ b/less/_variables.less @@ -3,6 +3,8 @@ // Material Global vars @zero: 0; +@mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; + // material icons path @mdb-font-path: "../fonts"; @@ -33,6 +35,7 @@ //--- // 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 +@contrast-factor: 40%; @btn-default: transparent; @btn-default-text: @lightbg-text; //--- diff --git a/less/material.less b/less/bootstrap-material-design.less similarity index 57% rename from less/material.less rename to less/bootstrap-material-design.less index f166d626..5370a5fc 100644 --- a/less/material.less +++ b/less/bootstrap-material-design.less @@ -2,4 +2,4 @@ @import "_mixins.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) +@import '_bootstrap-material-design.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins) diff --git a/less/material-fullpalette.less b/less/material-fullpalette.less deleted file mode 100644 index 6f55437f..00000000 --- a/less/material-fullpalette.less +++ /dev/null @@ -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) diff --git a/less/ripples.less b/less/ripples.less index 874cdc57..8e3a6bbb 100644 --- a/less/ripples.less +++ b/less/ripples.less @@ -19,6 +19,7 @@ margin-left: -10px; margin-top: -10px; border-radius: 100%; + background-color: #000; // fallback color background-color: rgba(0,0,0,0.05); transform: scale(1); transform-origin: 50%; diff --git a/less/roboto.less b/less/roboto.less index 3fe57fb1..428b762c 100644 --- a/less/roboto.less +++ b/less/roboto.less @@ -9,7 +9,7 @@ src: local('RobotoDraft'), local('RobotoDraft-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'); } @@ -21,7 +21,7 @@ src: local('RobotoDraft Medium'), local('RobotoDraft-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'); } @@ -33,7 +33,7 @@ src: local('RobotoDraft Bold'), local('RobotoDraft-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'); } @@ -45,6 +45,6 @@ src: local('RobotoDraft Italic'), local('RobotoDraft-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'); } diff --git a/sass/_material.scss b/sass/_bootstrap-material-design.scss similarity index 95% rename from sass/_material.scss rename to sass/_bootstrap-material-design.scss index 2f3a9e45..847e49d1 100644 --- a/sass/_material.scss +++ b/sass/_bootstrap-material-design.scss @@ -22,7 +22,7 @@ body { 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; } diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 41de4517..2ab30565 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -19,17 +19,26 @@ text-decoration: none; color: $darkbg-text; - &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) { - @include shadow-z-1(); - } - &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) { - @include shadow-z-1-hover(); + &:not(.btn-link):not(.btn-flat) { + background-color: $btn-default; + color: $lightbg-text; + + &:not(.btn-fab) { + &:hover { + @include shadow-z-1(); + } + &:active { + @include shadow-z-1-hover(); + } + } } + transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); outline: none !important; - - @include variations(unquote(".btn-flat:not(.btn-link)"), color, $lightbg-text); + .btn-flat:not(.btn-link){ + color: $lightbg-text; + } @include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default); diff --git a/sass/_colors-map.scss b/sass/_colors-map.scss new file mode 100644 index 00000000..747a8cb4 --- /dev/null +++ b/sass/_colors-map.scss @@ -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: "") +//); diff --git a/sass/_mixins-fullpalette.scss b/sass/_mixins-fullpalette.scss deleted file mode 100644 index f07547ba..00000000 --- a/sass/_mixins-fullpalette.scss +++ /dev/null @@ -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) - } -} diff --git a/sass/_mixins-shared.scss b/sass/_mixins-shared.scss deleted file mode 100644 index 26dc822f..00000000 --- a/sass/_mixins-shared.scss +++ /dev/null @@ -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"); diff --git a/sass/_mixins-utilities.scss b/sass/_mixins-utilities.scss index 233c34d7..6463812c 100644 --- a/sass/_mixins-utilities.scss +++ b/sass/_mixins-utilities.scss @@ -1,5 +1,7 @@ // 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 // Copyright (c) 2009-2014 Christopher M. Eppstein // Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 38ed0a6b..0567403d 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -1,41 +1,273 @@ // 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, - "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 - ); - @each $mdb-color-name, $mdb-color in $mdb-colors { - // build a single depth color palette - $args-variation-color: map-merge($args, ( - material-color-name: $mdb-color-name, - material-color: $mdb-color, - material-color-number: "" - )); +// variations(unquote(""), background-color, #FFF); +@mixin variations($extra, $mdb-param-1, $default) { + @include generic-variations($extra, $default, "variations-content", $mdb-param-1); +} - @include generic-variations-color($args-variation-color) +@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); } } -// http://hugogiraudel.com/2014/01/27/casting-types-in-sass/ -// https://github.com/HugoGiraudel/SassyJSON/blob/master/stylesheets/decode/helpers/color/_color.scss +@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); + } +} + +//$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger"); diff --git a/sass/_variables.scss b/sass/_variables.scss index 00b5d315..6db18084 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -5,6 +5,8 @@ // Material Global vars $zero: 0 !default; +$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; + // material icons path $mdb-font-path: "../fonts" !default; @@ -35,6 +37,7 @@ $body-bg: #EEEEEE !default; //--- // 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 +$contrast-factor: 40% !default; $btn-default: transparent !default; $btn-default-text: $lightbg-text !default; //--- diff --git a/sass/material.scss b/sass/bootstrap-material-design.scss similarity index 66% rename from sass/material.scss rename to sass/bootstrap-material-design.scss index c94cbfe5..20fd457a 100644 --- a/sass/material.scss +++ b/sass/bootstrap-material-design.scss @@ -4,4 +4,4 @@ @import '_mixins'; @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) +@import '_bootstrap-material-design'; // include the material content given the mixins above (sass requirement for inclusion order of mixins) diff --git a/sass/material-fullpalette.scss b/sass/material-fullpalette.scss deleted file mode 100644 index 6e3a7ee9..00000000 --- a/sass/material-fullpalette.scss +++ /dev/null @@ -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) diff --git a/sass/ripples.scss b/sass/ripples.scss index 7ddd4cae..3534bae9 100644 --- a/sass/ripples.scss +++ b/sass/ripples.scss @@ -21,6 +21,7 @@ margin-left: -10px; margin-top: -10px; border-radius: 100%; + background-color: #000; // fallback color background-color: rgba(0,0,0,0.05); transform: scale(1); transform-origin: 50%; diff --git a/sass/roboto.scss b/sass/roboto.scss index cac3408c..2d6936e2 100644 --- a/sass/roboto.scss +++ b/sass/roboto.scss @@ -11,7 +11,7 @@ src: local('RobotoDraft'), local('RobotoDraft-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'); } @@ -23,7 +23,7 @@ src: local('RobotoDraft Medium'), local('RobotoDraft-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'); } @@ -35,7 +35,7 @@ src: local('RobotoDraft Bold'), local('RobotoDraft-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'); } @@ -47,6 +47,6 @@ src: local('RobotoDraft Italic'), local('RobotoDraft-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'); }