mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-12-01 22:13:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

#727 checkpoint - added specific import order for less vs sass, normalized more variables.

Browse Source
This commit is contained in:
Kevin Ross 2015-11-21 10:37:35 -06:00
parent f64ff8a142
commit b05c95b190
49 changed files with 2754 additions and 916 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Gruntfile.js
View File

@ -88,7 +88,7 @@ module.exports = function (grunt) {
files: [{ files: [{
expand: true, expand: true,
cwd: "less", cwd: "less",
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less"], src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less", "!_import-bs*"],
ext: ".scss", ext: ".scss",
dest: "sass" dest: "sass"
}], }],
@ -471,9 +471,9 @@ module.exports = function (grunt) {
}, },
src: ['Gruntfile.js', 'package.js'] src: ['Gruntfile.js', 'package.js']
}, },
core: [ core: {
"scripts/**/*.js", src: ["scripts/**/*.js"]
], },
test: { test: {
src: ["test/**/*.js"] src: ["test/**/*.js"]
}, },
@ -511,10 +511,10 @@ module.exports = function (grunt) {
files: ["index.html", "bootstrap-elements.html", "test.html"], files: ["index.html", "bootstrap-elements.html", "test.html"],
tasks: ["htmllint", "bootlint"] tasks: ["htmllint", "bootlint"]
}, },
src: { //src: {
files: '<%= jshint.core.src %>', // files: '<%= jshint.core.src %>',
tasks: ['jshint:core', 'dist-js'] // add tests when working again // tasks: ['jshint:core', 'dist-js'] // add tests when working again
}, //},
test: { test: {
files: ["test/**/*.js"], files: ["test/**/*.js"],
tasks: ["jshint:test", "jasmine"] tasks: ["jshint:test", "jasmine"]

1464
dist/css/material-fullpalette.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

400
dist/css/material.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/roboto.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
less/_checkboxes.less
View File

@ -136,7 +136,7 @@
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success); .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @brand-success);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @mdb-checkbox-checked-color); .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @mdb-checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @mdb-checkbox-checked-color); .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @mdb-checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color); .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color);

10
less/_icons-material-design.less
View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: 'Material-Design-Icons'; font-family: 'Material-Design-Icons';
src:url('@{material-font-path}/Material-Design-Icons.eot?3ocs8m'); src:url('@{mdb-font-path}/Material-Design-Icons.eot?3ocs8m');
src:url('@{material-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'), src:url('@{mdb-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
url('@{material-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'), url('@{mdb-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
url('@{material-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'), url('@{mdb-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
url('@{material-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg'); url('@{mdb-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

2
less/_import-bs-less.less Normal file
View File

@ -0,0 +1,2 @@
@import "../bower_components/bootstrap/less/variables.less";
//@import "../bower_components/bootstrap/less/mixins.less";

4
less/_import-bs-sass.less Normal file
View File

@ -0,0 +1,4 @@
// hack due to differences between sass and less variable loading
// Less lazy loads, Sass doesn't. http://lesscss.org/features/#variables-feature-lazy-loading
// do nothing here for less.

6
less/_inputs.less
View File

@ -102,7 +102,7 @@
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control { .form-control {
border: 0; border: 0;
background-image: linear-gradient(@primary, @primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px"); background-position: center bottom, center calc(~"100% - 1px");
@ -138,7 +138,7 @@
&.is-focused .form-control { &.is-focused .form-control {
outline: none; outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px;
box-shadow: none; box-shadow: none;
transition-duration: 0.3s; transition-duration: 0.3s;
@ -214,7 +214,7 @@
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.generic-variations(~".is-focused .form-control", @primary, { .generic-variations(~".is-focused .form-control", @brand-primary, {
background-image: linear-gradient(@mdb-color, @mdb-color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); background-image: linear-gradient(@mdb-color, @mdb-color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
}); });

6
less/_material.less
View File

@ -29,7 +29,7 @@ h5, h6{
} }
a, a:hover, a:focus { a, a:hover, a:focus {
color: @primary; color: @brand-primary;
} }
// Well and Jumbotrons // Well and Jumbotrons
@ -73,10 +73,10 @@ legend {
position: relative; position: relative;
a:hover { a:hover {
background-color: transparent; background-color: transparent;
color: @primary; color: @brand-primary;
} }
} }
.variations(~" li a:hover", color, @primary); .variations(~" li a:hover", color, @brand-primary);
} }
// Alerts // Alerts

16
less/_mixins-fullpalette.less
View File

@ -46,35 +46,35 @@
&-primary@{extra} { &-primary@{extra} {
@mdb-color-name: "primary"; @mdb-color-name: "primary";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @primary; @mdb-color: @brand-primary;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-success@{extra} { &-success@{extra} {
@mdb-color-name: "success"; @mdb-color-name: "success";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @success; @mdb-color: @brand-success;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-info@{extra} { &-info@{extra} {
@mdb-color-name: "info"; @mdb-color-name: "info";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @info; @mdb-color: @brand-info;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-warning@{extra} { &-warning@{extra} {
@mdb-color-name: "warning"; @mdb-color-name: "warning";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @warning; @mdb-color: @brand-warning;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-danger@{extra} { &-danger@{extra} {
@mdb-color-name: "danger"; @mdb-color-name: "danger";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @danger; @mdb-color: @brand-danger;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
@ -85,9 +85,9 @@
// given a color and its deph build css // given a color and its deph build css
.generic-variations-factory-deep(@mdb-color-number) { .generic-variations-factory-deep(@mdb-color-number) {
&-material-@{material-color-name}@{material-color-number}@{extra} { &-material-@{mdb-color-name}@{mdb-color-number}@{extra} {
@mdb-color-full-name: "@{material-color-name}@{material-color-number}"; @mdb-color-full-name: "@{mdb-color-name}@{mdb-color-number}";
@mdb-color: @@material-color-full-name; @mdb-color: @@mdb-color-full-name;
@mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }

16
less/_mixins.less
View File

@ -47,35 +47,35 @@
&-primary@{extra} { &-primary@{extra} {
@mdb-color-name: "primary"; @mdb-color-name: "primary";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @primary; @mdb-color: @brand-primary;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-success@{extra} { &-success@{extra} {
@mdb-color-name: "success"; @mdb-color-name: "success";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @success; @mdb-color: @brand-success;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-info@{extra} { &-info@{extra} {
@mdb-color-name: "info"; @mdb-color-name: "info";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @info; @mdb-color: @brand-info;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-warning@{extra} { &-warning@{extra} {
@mdb-color-name: "warning"; @mdb-color-name: "warning";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @warning; @mdb-color: @brand-warning;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-danger@{extra} { &-danger@{extra} {
@mdb-color-name: "danger"; @mdb-color-name: "danger";
@mdb-color-full-name: @mdb-color-name; @mdb-color-full-name: @mdb-color-name;
@mdb-color: @danger; @mdb-color: @brand-danger;
@mdb-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
@ -86,9 +86,9 @@
// given a color and its deph build css // given a color and its deph build css
.generic-variations-factory-deep(@mdb-color-number) { .generic-variations-factory-deep(@mdb-color-number) {
&-material-@{material-color-name}@{material-color-number}@{extra} { &-material-@{mdb-color-name}@{mdb-color-number}@{extra} {
@mdb-color-full-name: "@{material-color-name}@{material-color-number}"; @mdb-color-full-name: "@{mdb-color-name}@{mdb-color-number}";
@mdb-color: @@material-color-full-name; @mdb-color: @@mdb-color-full-name;
@mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }

4
less/_navbar.less
View File

@ -1,5 +1,5 @@
.navbar { .navbar {
background-color: @primary; background-color: @brand-primary;
border: @zero; border: @zero;
border-radius: @zero; border-radius: @zero;
@ -185,7 +185,7 @@
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
.generic-variations(~".navbar", @primary, { .generic-variations(~".navbar", @brand-primary, {
background-color: @mdb-color; background-color: @mdb-color;
color: @mdb-text-color; color: @mdb-text-color;
// deeply defined to override welljumbo class without !impotant need // deeply defined to override welljumbo class without !impotant need

8
less/_plugin-nouislider.less
View File

@ -103,8 +103,8 @@
} }
.slider { .slider {
.variations(~".noUi-connect", background-color, @primary); .variations(~".noUi-connect", background-color, @brand-primary);
.variations(~" .noUi-connect", background-color, @primary); .variations(~" .noUi-connect", background-color, @brand-primary);
.variations(~" .noUi-handle", background-color, @primary); .variations(~" .noUi-handle", background-color, @brand-primary);
.variations(~" .noUi-handle", border-color, @primary); .variations(~" .noUi-handle", border-color, @brand-primary);
} }

2
less/_progress.less
View File

@ -5,6 +5,6 @@
background: #c8c8c8; background: #c8c8c8;
.progress-bar { .progress-bar {
box-shadow: none; box-shadow: none;
.variations(~"", background-color, @primary); .variations(~"", background-color, @brand-primary);
} }
} }

2
less/_tabs.less
View File

@ -1,5 +1,5 @@
.nav-tabs { .nav-tabs {
background: @primary; background: @brand-primary;
> li { > li {
> a { > a {
color: #FFFFFF; color: #FFFFFF;

6
less/_togglebutton.less
View File

@ -78,14 +78,14 @@
// Switch bg on // Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
.generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, { .generic-variations(~" label input[type=checkbox]:checked + .toggle", @brand-primary, {
background-color: fade(@mdb-color, 50%); background-color: fade(@mdb-color, 50%);
}); });
// Handle on // Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
.variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary); .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @brand-primary);
// Ripple on // Ripple on
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, { .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @brand-primary, {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@mdb-color, 10%); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@mdb-color, 10%);
}); });
} }

82
less/_variables.less
View File

@ -1,74 +1,82 @@
@import "_colors.less";
// Material Global vars // Material Global vars
@zero: 0; @zero: 0;
// material icons path // material icons path
@mdb-font-path: "../fonts"; @mdb-font-path: "../fonts";
// Bootstrap shades
@primary: @teal;
@success: @green;
@info: @light-blue;
@warning: @deep-orange;
@danger: @red;
@brand-primary: @primary;
@brand-success: @success;
@brand-danger: @danger;
@brand-warning: @warning;
@brand-info: @info;
// Typography elements for Material // Typography elements for Material
@darkbg-text: rgba(255,255,255,0.84); @darkbg-text: rgba(255,255,255,0.84);
@lightbg-text: rgba(0,0,0,0.84); @lightbg-text: rgba(0,0,0,0.84);
@icon-color: rgba(0,0,0,0.5); @icon-color: rgba(0,0,0,0.5);
// import bs variables for less, last declared wins.
@import "_import-bs-less.less";
//---
// Converted bs variables
// Bootstrap brand color customization
@brand-primary: @teal;
@brand-success: @green;
@brand-danger: @red;
@brand-warning: @deep-orange;
@brand-info: @light-blue;
// Bootstrap variables
@body-bg: #EEEEEE; @body-bg: #EEEEEE;
//---
// import bs variables for sass, first declared wins.
@import "_import-bs-sass.less";
//---
// 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
@btn-default: transparent; @btn-default: transparent;
@btn-default-text: @lightbg-text; @btn-default-text: @lightbg-text;
//---
@btn-primary: @primary; @btn-primary: @brand-primary;
@btn-primary-text: @darkbg-text; @btn-primary-text: @darkbg-text;
@btn-success: @success; @btn-success: @brand-success;
@btn-success-text: @darkbg-text; @btn-success-text: @darkbg-text;
@btn-info: @info; @btn-info: @brand-info;
@btn-info-text: @darkbg-text; @btn-info-text: @darkbg-text;
@btn-warning: @warning; @btn-warning: @brand-warning;
@btn-warning-text: @darkbg-text; @btn-warning-text: @darkbg-text;
@btn-danger: @danger; @btn-danger: @brand-danger;
@btn-danger-text: @darkbg-text; @btn-danger-text: @darkbg-text;
@mdb-input-unchecked: rgba(137, 137, 137, 0.3); @mdb-input-unchecked: rgba(137, 137, 137, 0.3);
@mdb-input-checked: rgba(15, 157, 88, 0.3); @mdb-input-checked: rgba(15, 157, 88, 0.3);
@mdb-radio-default: @lightbg-text; @mdb-radio-default: @lightbg-text;
@mdb-radio-primary: @primary; @mdb-radio-primary: @brand-primary;
@mdb-radio-success: @success; @mdb-radio-success: @brand-success;
@mdb-radio-info: @info; @mdb-radio-info: @brand-info;
@mdb-radio-warning: @warning; @mdb-radio-warning: @brand-warning;
@mdb-radio-danger: @danger; @mdb-radio-danger: @brand-danger;
@mdb-input-danger: @danger; @mdb-input-danger: @brand-danger;
@mdb-input-default: @primary; @mdb-input-default: @brand-primary;
@mdb-input-warning: @warning; @mdb-input-warning: @brand-warning;
@mdb-input-success: @success; @mdb-input-success: @brand-success;
@mdb-input-info: @info; @mdb-input-info: @brand-info;
@alert-success: @success; @alert-success: @brand-success;
@alert-info: @info; @alert-info: @brand-info;
@alert-warning: @warning; @alert-warning: @brand-warning;
@alert-danger: @danger; @alert-danger: @brand-danger;
@progress-success: @success; @progress-success: @brand-success;
@progress-info: @info; @progress-info: @brand-info;
@progress-warning: @warning; @progress-warning: @brand-warning;
@progress-danger: @danger; @progress-danger: @brand-danger;
@font-size-base: 14px; @font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-large: ceil((@font-size-base * 1.25)); // ~18px

1
less/material-fullpalette.less
View File

@ -1,4 +1,3 @@
@import "_colors.less";
@import "_variables.less"; @import "_variables.less";
@import "_mixins-fullpalette.less"; @import "_mixins-fullpalette.less";
@import "_icons-material-design.less"; @import "_icons-material-design.less";

4
less/material.less
View File

@ -1,7 +1,3 @@
@import "../bower_components/bootstrap/less/variables.less";
@import "../bower_components/bootstrap/less/mixins.less";
@import "_colors.less";
@import "_variables.less"; @import "_variables.less";
@import "_mixins.less"; @import "_mixins.less";
@import "_icons-material-design.less"; @import "_icons-material-design.less";

16
less/roboto.less
View File

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

6
sass/_cards.scss
View File

@ -22,8 +22,8 @@
border-radius: 2px; border-radius: 2px;
color: $card-body-text; color: $mdb-card-body-text;
background: $card-body-background; background: $mdb-card-body-background;
@include shadow-z-2(); @include shadow-z-2();
@ -42,7 +42,7 @@
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
left: 18px; left: 18px;
color: $card-image-headline; color: $mdb-card-image-headline;
font-size: 2em; font-size: 2em;
} }
} }

38
sass/_checkboxes.scss
View File

@ -14,23 +14,23 @@
.form-group { .form-group {
//// default label size/location //// default label size/location
@include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base); @include form-group-checkbox-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
// sm label size/location // sm label size/location
&.form-group-sm { &.form-group-sm {
@include form-group-checkbox-variant($md-input-font-size-small, $md-input-line-height-small); @include form-group-checkbox-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
} }
// lg label size/location // lg label size/location
&.form-group-lg { &.form-group-lg {
@include form-group-checkbox-variant($md-input-font-size-large, $md-input-line-height-large); @include form-group-checkbox-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
} }
.checkbox { .checkbox {
label { label {
cursor: pointer; cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: $checkbox-label-color; color: $mdb-checkbox-label-color;
} }
// Hide native checkbox // Hide native checkbox
@ -56,8 +56,8 @@
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0,0,0,.84); background-color: rgba(0,0,0,.84);
height: $checkbox-size; height: $mdb-checkbox-size;
width: $checkbox-size; width: $mdb-checkbox-size;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
@ -68,9 +68,9 @@
.check { .check {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $checkbox-size; width: $mdb-checkbox-size;
height: $checkbox-size; height: $mdb-checkbox-size;
border: 2px solid $checkbox-border-color; border: 2px solid $mdb-checkbox-border-color;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@ -92,7 +92,7 @@
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off $checkbox-animation-check forwards; animation: checkbox-off $mdb-checkbox-animation-check forwards;
} }
} }
@ -107,22 +107,22 @@
0px 32px 0 20px, 0px 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 20px -12px 0 11px;
animation: checkbox-on $checkbox-animation-check forwards; animation: checkbox-on $mdb-checkbox-animation-check forwards;
} }
input[type=checkbox]:not(:checked) + .checkbox-material:before { input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff $checkbox-animation-ripple; animation: rippleOff $mdb-checkbox-animation-ripple;
} }
input[type=checkbox]:checked + .checkbox-material:before { input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn $checkbox-animation-ripple; animation: rippleOn $mdb-checkbox-animation-ripple;
} }
// Ripple effect on click // Ripple effect on click
input[type=checkbox]:not(:checked) + .checkbox-material .check:after { input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff $checkbox-animation-ripple forwards; animation: rippleOff $mdb-checkbox-animation-ripple forwards;
} }
input[type=checkbox]:checked + .checkbox-material .check:after { input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn $checkbox-animation-ripple forwards; animation: rippleOn $mdb-checkbox-animation-ripple forwards;
} }
// Style for disabled inputs // Style for disabled inputs
@ -138,10 +138,10 @@
transform: rotate(-45deg); transform: rotate(-45deg);
} }
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success); @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $brand-success);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $checkbox-checked-color); @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $mdb-checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $checkbox-checked-color); @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $mdb-checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $checkbox-checked-color); @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $mdb-checkbox-checked-color);
} }
} }

10
sass/_icons-material-design.scss
View File

@ -2,11 +2,11 @@
@font-face { @font-face {
font-family: 'Material-Design-Icons'; font-family: 'Material-Design-Icons';
src:url('#{$material-font-path}/Material-Design-Icons.eot?3ocs8m'); src:url('#{$mdb-font-path}/Material-Design-Icons.eot?3ocs8m');
src:url('#{$material-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'), src:url('#{$mdb-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
url('#{$material-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'), url('#{$mdb-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
url('#{$material-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'), url('#{$mdb-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
url('#{$material-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg'); url('#{$mdb-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

4
sass/_import-bs-less.scss Normal file
View File

@ -0,0 +1,4 @@
// hack due to differences between sass and less variable loading
// Less lazy loads, Sass doesn't. http://lesscss.org/features/#variables-feature-lazy-loading
// do nothing here for sass.

2
sass/_import-bs-sass.scss Normal file
View File

@ -0,0 +1,2 @@
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables";
//@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins";

105
sass/_inputs-size.scss
View File

@ -10,22 +10,22 @@
// -------------------------------------------------- // --------------------------------------------------
legend { legend {
margin-bottom: $md-input-line-height-computed; margin-bottom: $mdb-input-line-height-computed;
font-size: ($md-input-font-size-base * 1.5); font-size: ($mdb-input-font-size-base * 1.5);
} }
// Adjust output element // Adjust output element
output { output {
padding-top: ($md-input-padding-base-vertical + 1); padding-top: ($mdb-input-padding-base-vertical + 1);
font-size: $md-input-font-size-base; font-size: $mdb-input-font-size-base;
line-height: $md-input-line-height-base; line-height: $mdb-input-line-height-base;
} }
.form-control { .form-control {
height: $md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: $md-input-padding-base-vertical $md-input-padding-base-horizontal; padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal;
font-size: $md-input-font-size-base; font-size: $mdb-input-font-size-base;
line-height: $md-input-line-height-base; line-height: $mdb-input-line-height-base;
} }
// Special styles for iOS temporal inputs // Special styles for iOS temporal inputs
@ -43,17 +43,17 @@ output {
input[type="datetime-local"], input[type="datetime-local"],
input[type="month"] { input[type="month"] {
&.form-control { &.form-control {
line-height: $md-input-height-base; line-height: $mdb-input-height-base;
} }
&.input-sm, &.input-sm,
.input-group-sm & { .input-group-sm & {
line-height: $md-input-height-small; line-height: $mdb-input-height-small;
} }
&.input-lg, &.input-lg,
.input-group-lg & { .input-group-lg & {
line-height: $md-input-height-large; line-height: $mdb-input-height-large;
} }
} }
} }
@ -62,7 +62,7 @@ output {
.checkbox { .checkbox {
label { label {
min-height: $md-input-line-height-computed; // Ensure the input doesn't jump when there is no text min-height: $mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text
} }
} }
@ -74,9 +74,9 @@ output {
.form-control-static { .form-control-static {
// Size it appropriately next to real form controls // Size it appropriately next to real form controls
padding-top: ($md-input-padding-base-vertical + 1); padding-top: ($mdb-input-padding-base-vertical + 1);
padding-bottom: ($md-input-padding-base-vertical + 1); padding-bottom: ($mdb-input-padding-base-vertical + 1);
min-height: ($md-input-line-height-computed + $md-input-font-size-base); min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-base);
} }
@ -86,11 +86,12 @@ output {
// horizontal sizing, wrap controls in the predefined grid classes. `<select>` // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact! // element gets special love because it's special, and that's a fact!
// mixin pulled from bootstrap and altered for less/sass compatibility // mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){ // bootstrap-sass has this one, but we would have to then convert it back to less. chicken meet egg.
@mixin input-size($parent, $mdb-input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
#{$parent} { #{$parent} {
height: $input-height; height: $mdb-input-height;
padding: $padding-vertical $padding-horizontal; padding: $padding-vertical $padding-horizontal;
font-size: $font-size; font-size: $font-size;
line-height: $line-height; line-height: $line-height;
@ -98,8 +99,8 @@ output {
} }
select#{$parent} { select#{$parent} {
height: $input-height; height: $mdb-input-height;
line-height: $input-height; line-height: $mdb-input-height;
} }
textarea#{$parent}, textarea#{$parent},
@ -118,56 +119,56 @@ output {
// The `.form-group-* form-control` variations are sadly duplicated to avoid the // The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm { .input-sm {
@include input-size('.input-sm', $md-input-height-small, $md-input-padding-small-vertical, $md-input-padding-small-horizontal, $md-input-font-size-small, $md-input-line-height-small, $md-input-border-radius-small); @include input-size('.input-sm', $mdb-input-height-small, $mdb-input-padding-small-vertical, $mdb-input-padding-small-horizontal, $mdb-input-font-size-small, $mdb-input-line-height-small, $mdb-input-border-radius-small);
} }
.form-group-sm { .form-group-sm {
.form-control { .form-control {
height: $md-input-height-small; height: $mdb-input-height-small;
padding: $md-input-padding-small-vertical $md-input-padding-small-horizontal; padding: $mdb-input-padding-small-vertical $mdb-input-padding-small-horizontal;
font-size: $md-input-font-size-small; font-size: $mdb-input-font-size-small;
line-height: $md-input-line-height-small; line-height: $mdb-input-line-height-small;
} }
select.form-control { select.form-control {
height: $md-input-height-small; height: $mdb-input-height-small;
line-height: $md-input-height-small; line-height: $mdb-input-height-small;
} }
textarea.form-control, textarea.form-control,
select[multiple].form-control { select[multiple].form-control {
height: auto; height: auto;
} }
.form-control-static { .form-control-static {
height: $md-input-height-small; height: $mdb-input-height-small;
min-height: ($md-input-line-height-computed + $md-input-font-size-small); min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-small);
padding: ($md-input-padding-small-vertical + 1) $md-input-padding-small-horizontal; padding: ($mdb-input-padding-small-vertical + 1) $mdb-input-padding-small-horizontal;
font-size: $md-input-font-size-small; font-size: $mdb-input-font-size-small;
line-height: $md-input-line-height-small; line-height: $mdb-input-line-height-small;
} }
} }
.input-lg { .input-lg {
@include input-size('.input-lg', $md-input-height-large, $md-input-padding-large-vertical, $md-input-padding-large-horizontal, $md-input-font-size-large, $md-input-line-height-large, $md-input-border-radius-large); @include input-size('.input-lg', $mdb-input-height-large, $mdb-input-padding-large-vertical, $mdb-input-padding-large-horizontal, $mdb-input-font-size-large, $mdb-input-line-height-large, $mdb-input-border-radius-large);
} }
.form-group-lg { .form-group-lg {
.form-control { .form-control {
height: $md-input-height-large; height: $mdb-input-height-large;
padding: $md-input-padding-large-vertical $md-input-padding-large-horizontal; padding: $mdb-input-padding-large-vertical $mdb-input-padding-large-horizontal;
font-size: $md-input-font-size-large; font-size: $mdb-input-font-size-large;
line-height: $md-input-line-height-large; line-height: $mdb-input-line-height-large;
} }
select.form-control { select.form-control {
height: $md-input-height-large; height: $mdb-input-height-large;
line-height: $md-input-height-large; line-height: $mdb-input-height-large;
} }
textarea.form-control, textarea.form-control,
select[multiple].form-control { select[multiple].form-control {
height: auto; height: auto;
} }
.form-control-static { .form-control-static {
height: $md-input-height-large; height: $mdb-input-height-large;
min-height: ($md-input-line-height-computed + $md-input-font-size-large); min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-large);
padding: ($md-input-padding-large-vertical + 1) $md-input-padding-large-horizontal; padding: ($mdb-input-padding-large-vertical + 1) $mdb-input-padding-large-horizontal;
font-size: $md-input-font-size-large; font-size: $mdb-input-font-size-large;
line-height: $md-input-line-height-large; line-height: $mdb-input-line-height-large;
} }
} }
@ -181,20 +182,20 @@ output {
.checkbox, .checkbox,
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
} }
// Account for padding we're adding to ensure the alignment and of help text // Account for padding we're adding to ensure the alignment and of help text
// and other content below items // and other content below items
.radio, .radio,
.checkbox { .checkbox {
min-height: ($md-input-line-height-computed + ($md-input-padding-base-vertical + 1)); min-height: ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical + 1));
} }
// Reset spacing and right align labels, but scope to media queries so that // Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example. // labels on narrow viewports stack the same as a default form example.
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
.control-label { .control-label {
padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
} }
} }
@ -206,16 +207,16 @@ output {
.form-group-lg { .form-group-lg {
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
.control-label { .control-label {
padding-top: (($md-input-padding-large-vertical * $md-input-line-height-large) + 1); padding-top: (($mdb-input-padding-large-vertical * $mdb-input-line-height-large) + 1);
font-size: $md-input-font-size-large; font-size: $mdb-input-font-size-large;
} }
} }
} }
.form-group-sm { .form-group-sm {
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
.control-label { .control-label {
padding-top: ($md-input-padding-small-vertical + 1); padding-top: ($mdb-input-padding-small-vertical + 1);
font-size: $md-input-font-size-small; font-size: $mdb-input-font-size-small;
} }
} }
} }

52
sass/_inputs.scss
View File

@ -20,7 +20,7 @@
box-shadow: none; box-shadow: none;
} }
&.is-focused .form-control { &.is-focused .form-control {
background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color); background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
} }
label.control-label, label.control-label,
.help-block { .help-block {
@ -30,14 +30,14 @@
} }
@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){ @mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
$static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default; $static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
$static-line-height: ($label-floating-size-ratio * $line-height) !default; $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default; $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
$label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default; $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
$help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default; $help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
$help-block-line-height: ($help-block-size-ratio * $line-height) !default; $help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin: ($label-top-margin + $static-font-size) 0 0 0; margin: ($label-top-margin + $static-font-size) 0 0 0;
@ -105,7 +105,7 @@
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control { .form-control {
border: 0; border: 0;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color); background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px); background-position: center bottom, center calc(100% - 1px);
@ -117,7 +117,7 @@
// Placeholders and and labels-as-placeholders should look the same // Placeholders and and labels-as-placeholders should look the same
@include material-placeholder { @include material-placeholder {
color: $input-placeholder-color; color: $mdb-input-placeholder-color;
font-weight: normal; font-weight: normal;
} }
@ -136,19 +136,19 @@
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-image: none; background-image: none;
border-bottom: 1px dotted $input-underline-color; border-bottom: 1px dotted $mdb-input-underline-color;
} }
} }
&.is-focused .form-control { &.is-focused .form-control {
outline: none; outline: none;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color); background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px;
box-shadow: none; box-shadow: none;
transition-duration: 0.3s; transition-duration: 0.3s;
.material-input:after { .material-input:after {
background-color: $input-default; background-color: $mdb-input-default;
} }
} }
@ -172,7 +172,7 @@
label, label,
label.control-label { label.control-label {
// same label properties as form-group placeholder // same label properties as form-group placeholder
color: $input-placeholder-color; color: $mdb-input-placeholder-color;
font-weight: normal; font-weight: normal;
} }
@ -188,21 +188,21 @@
} }
} }
@include variations(unquote(" label.control-label"), color, $input-placeholder-color); // default label color variations @include variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
@include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations @include variations(unquote(".is-focused label.control-label"), color, $mdb-input-default); // focused label color variations
@include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $input-placeholder-color); // default label color variations @include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
// default floating size/location // default floating size/location
@include form-group-size-variant($md-input-font-size-base, $md-label-top-margin-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base); @include form-group-size-variant($mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
// sm floating size/location // sm floating size/location
&.form-group-sm { &.form-group-sm {
@include form-group-size-variant($md-input-font-size-small, $md-label-top-margin-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small); @include form-group-size-variant($mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
} }
// lg floating size/location // lg floating size/location
&.form-group-lg { &.form-group-lg {
@include form-group-size-variant($md-input-font-size-large, $md-label-top-margin-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large); @include form-group-size-variant($mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
} }
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good. // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
@ -218,12 +218,12 @@
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
@include bg-img-variations(unquote(".is-focused .form-control"), $primary); @include bg-img-variations(unquote(".is-focused .form-control"), $brand-primary);
@include form-group-validation-state(has-warning, $input-warning); @include form-group-validation-state(has-warning, $mdb-input-warning);
@include form-group-validation-state(has-error, $input-danger); @include form-group-validation-state(has-error, $mdb-input-danger);
@include form-group-validation-state(has-success, $input-success); @include form-group-validation-state(has-success, $mdb-input-success);
@include form-group-validation-state(has-info, $input-info); @include form-group-validation-state(has-info, $mdb-input-info);
textarea { textarea {
resize: none; resize: none;
@ -249,7 +249,7 @@ select.form-control {
.form-group.is-focused & { .form-group.is-focused & {
box-shadow: none; box-shadow: none;
border-color: $input-underline-color; border-color: $mdb-input-underline-color;
} }
&[multiple] { &[multiple] {
@ -272,7 +272,7 @@ select.form-control {
// input group/addon related styles // input group/addon related styles
// default margin // default margin
@include input-group-button-variation($md-input-padding-base-vertical); @include input-group-button-variation($mdb-input-padding-base-vertical);
.form-group { .form-group {
//.form-control { //.form-control {
@ -281,12 +281,12 @@ select.form-control {
// sm margin // sm margin
&.form-group-sm { &.form-group-sm {
@include input-group-button-variation($md-input-padding-small-vertical); @include input-group-button-variation($mdb-input-padding-small-vertical);
} }
// lg margin // lg margin
&.form-group-lg { &.form-group-lg {
@include input-group-button-variation($md-input-padding-large-vertical); @include input-group-button-variation($mdb-input-padding-large-vertical);
} }
} }

6
sass/_material.scss
View File

@ -31,7 +31,7 @@ h5, h6{
} }
a, a:hover, a:focus { a, a:hover, a:focus {
color: $primary; color: $brand-primary;
} }
// Well and Jumbotrons // Well and Jumbotrons
@ -75,10 +75,10 @@ legend {
position: relative; position: relative;
a:hover { a:hover {
background-color: transparent; background-color: transparent;
color: $primary; color: $brand-primary;
} }
} }
@include variations(unquote(" li a:hover"), color, $primary); @include variations(unquote(" li a:hover"), color, $brand-primary);
} }
// Alerts // Alerts

4
sass/_mixins-fullpalette.scss
View File

@ -5,7 +5,7 @@
//@debug "multi-palette generic-variations-colors called with #{inspect($args)}"; //@debug "multi-palette generic-variations-colors called with #{inspect($args)}";
$material-colors: ( $mdb-colors: (
"red-50": (name: "red", color: $red-50, number: "-50"), "red-50": (name: "red", color: $red-50, number: "-50"),
"red-100": (name: "red", color: $red-100, number: "-100"), "red-100": (name: "red", color: $red-100, number: "-100"),
"red-200": (name: "red", color: $red-200, number: "-200"), "red-200": (name: "red", color: $red-200, number: "-200"),
@ -293,7 +293,7 @@
"blue-grey": (name: "blue-grey", color: $blue-grey, number: "") "blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
); );
@each $material-color-combination, $color-attributes in $material-colors { @each $mdb-color-combination, $color-attributes in $mdb-colors {
// build a single depth color palette // build a single depth color palette
$args-variation-color: map-merge($args, ( $args-variation-color: map-merge($args, (
material-color-name: map-get($color-attributes, name), material-color-name: map-get($color-attributes, name),

110
sass/_mixins-shared.scss
View File

@ -10,8 +10,8 @@
// variations(unquote(""), background-color, #FFF); // variations(unquote(""), background-color, #FFF);
@mixin variations($extra, $material-param-1, $default) { @mixin variations($extra, $mdb-param-1, $default) {
@include generic-variations($extra, $default, "variations-content", $material-param-1); @include generic-variations($extra, $default, "variations-content", $mdb-param-1);
} }
@mixin variations-content($args) { @mixin variations-content($args) {
@ -42,99 +42,99 @@
color: map-get($args, material-color); color: map-get($args, material-color);
} }
@mixin button-variations($extra, $default, $material-param-1) { @mixin button-variations($extra, $default, $mdb-param-1) {
@include generic-variations($extra, $default, "button-variations-content", $material-param-1); @include generic-variations($extra, $default, "button-variations-content", $mdb-param-1);
} }
@mixin button-variations-content($args) { @mixin button-variations-content($args) {
//@debug "#{inspect($args)}"; //@debug "#{inspect($args)}";
$material-color: map-get($args, material-color); $mdb-color: map-get($args, material-color);
$material-param-1: map-get($args, material-param-1); $mdb-param-1: map-get($args, material-param-1);
background-color: contrast-color($material-color, background-color: contrast-color($mdb-color,
darken($material-color, $material-param-1), darken($mdb-color, $mdb-param-1),
lighten($material-color, $material-param-1)); lighten($mdb-color, $mdb-param-1));
} }
@mixin bg-color-variations($extra, $default, $material-param-1) { @mixin bg-color-variations($extra, $default, $mdb-param-1) {
@include generic-variations($extra, $default, "bg-color-variations-content", $material-param-1); @include generic-variations($extra, $default, "bg-color-variations-content", $mdb-param-1);
} }
@mixin bg-color-variations-content($args) { @mixin bg-color-variations-content($args) {
background-color: rgba(map-get($args, material-color), map-get($args, material-param-1)); 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", $primary // bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin bg-box-shadow-variations($extra, $default) { @mixin bg-box-shadow-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-box-shadow-variations-content", null); @include generic-variations($extra, $default, "bg-box-shadow-variations-content", null);
} }
@mixin bg-box-shadow-variations-content($args){ @mixin bg-box-shadow-variations-content($args){
$material-color: map-get($args, material-color); $mdb-color: map-get($args, material-color);
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100)); 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", $primary // bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin bg-img-variations($extra, $default) { @mixin bg-img-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-img-variations-content", null); @include generic-variations($extra, $default, "bg-img-variations-content", null);
} }
@mixin bg-img-variations-content($args){ @mixin bg-img-variations-content($args){
$material-color: map-get($args, material-color); $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)}"; //@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($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color); 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", $primary // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin navbar-variations($extra, $default) { @mixin navbar-variations($extra, $default) {
@include generic-variations($extra, $default, "navbar-variations-content", null); @include generic-variations($extra, $default, "navbar-variations-content", null);
} }
@mixin navbar-variations-content($args){ @mixin navbar-variations-content($args){
$material-color: map-get($args, material-color); $mdb-color: map-get($args, material-color);
$material-text-color: map-get($args, material-text-color); $mdb-text-color: map-get($args, material-text-color);
background-color: $material-color; background-color: $mdb-color;
color: $material-text-color; color: $mdb-text-color;
// deeply defined to override welljumbo class without !impotant need // deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder { .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: $material-text-color; color: $mdb-text-color;
} }
.dropdown-menu { .dropdown-menu {
border-radius: $dropdown-radius; border-radius: $mdb-dropdown-radius;
li > a { li > a {
font-size: $dropdown-font-size; font-size: $mdb-dropdown-font-size;
padding: 13px 16px; padding: 13px 16px;
&:hover, &:hover,
&:focus { &:focus {
color: $material-color; color: $mdb-color;
background-color: $grey-200; background-color: $grey-200;
} }
} }
.active > a { .active > a {
&:hover, &:hover,
&:focus { &:focus {
color: $material-text-color; color: $mdb-text-color;
} }
background-color: $material-color; background-color: $mdb-color;
color: $material-text-color; color: $mdb-text-color;
} }
} }
} }
// alert-variations("", $primary) // alert-variations("", $brand-primary)
@mixin alert-variations($extra, $default) { @mixin alert-variations($extra, $default) {
@include generic-variations($extra, $default, "alert-variations-content", null); @include generic-variations($extra, $default, "alert-variations-content", null);
} }
@mixin alert-variations-content($args){ @mixin alert-variations-content($args){
$material-color: map-get($args, material-color); $mdb-color: map-get($args, material-color);
$material-text-color: map-get($args, material-text-color); $mdb-text-color: map-get($args, material-text-color);
background-color: $material-color; background-color: $mdb-color;
color: $material-text-color; color: $mdb-text-color;
a, .alert-link { a, .alert-link {
color: $material-text-color; color: $mdb-text-color;
} }
} }
@ -168,20 +168,20 @@
// To use this mixin you should pass a function as final parameter to define // To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it. // the style. In that definition you can use the following variables to define it.
// //
// $material-color-name ---> "red", "green", "indigo" ... // $mdb-color-name ---> "red", "green", "indigo" ...
// $material-color-full-name ---> "red", "green-50", "indigo-400" ... // $mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ... // $mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... // $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, $material-param-1) { @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) //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: ( $args: (
extra: $extra, extra: $extra,
default: $default, default: $default,
mixin-name: $mixin-name, mixin-name: $mixin-name,
material-param-1: $material-param-1 material-param-1: $mdb-param-1
); );
// bootstrap styles // bootstrap styles
@ -226,7 +226,7 @@
$args-primary: map-merge($args, ( $args-primary: map-merge($args, (
material-color-name: "primary", material-color-name: "primary",
material-color-full-name: "primary", material-color-full-name: "primary",
material-color: $primary, material-color: $brand-primary,
material-text-color: $darkbg-text material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-primary); @include call-variations-content-mixin($args-primary);
@ -235,7 +235,7 @@
$args-success: map-merge($args, ( $args-success: map-merge($args, (
material-color-name: "success", material-color-name: "success",
material-color-full-name: "success", material-color-full-name: "success",
material-color: $success, material-color: $brand-success,
material-text-color: $darkbg-text material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-success); @include call-variations-content-mixin($args-success);
@ -244,7 +244,7 @@
$args-info: map-merge($args, ( $args-info: map-merge($args, (
material-color-name: "info", material-color-name: "info",
material-color-full-name: "info", material-color-full-name: "info",
material-color: $info, material-color: $brand-info,
material-text-color: $darkbg-text material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-info); @include call-variations-content-mixin($args-info);
@ -253,7 +253,7 @@
$args-warning: map-merge($args, ( $args-warning: map-merge($args, (
material-color-name: "warning", material-color-name: "warning",
material-color-full-name: "warning", material-color-full-name: "warning",
material-color: $warning, material-color: $brand-warning,
material-text-color: $darkbg-text material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-warning); @include call-variations-content-mixin($args-warning);
@ -262,7 +262,7 @@
$args-danger: map-merge($args, ( $args-danger: map-merge($args, (
material-color-name: "danger", material-color-name: "danger",
material-color-full-name: "danger", material-color-full-name: "danger",
material-color: $danger, material-color: $brand-danger,
material-text-color: $darkbg-text material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-danger); @include call-variations-content-mixin($args-danger);
@ -272,17 +272,17 @@
} }
@mixin generic-variations-color($args) { @mixin generic-variations-color($args) {
$material-color-name: map-get($args, material-color-name); $mdb-color-name: map-get($args, material-color-name);
$material-color-number: map-get($args, material-color-number); $mdb-color-number: map-get($args, material-color-number);
$material-color-full-name: "#{$material-color-name}#{$material-color-number}"; $mdb-color-full-name: "#{$mdb-color-name}#{$mdb-color-number}";
$material-color: map-get($args, material-color); // $material-color-full-name; $mdb-color: map-get($args, material-color); // $mdb-color-full-name;
$material-text-color: contrast-color($material-color, $lightbg-text, $darkbg-text); $mdb-text-color: contrast-color($mdb-color, $lightbg-text, $darkbg-text);
&-material-#{$material-color-name}#{unquote($material-color-number)}#{map-get($args, extra)} { &-material-#{$mdb-color-name}#{unquote($mdb-color-number)}#{map-get($args, extra)} {
$args-color: map-merge($args, ( $args-color: map-merge($args, (
material-color-full-name: $material-color-full-name, material-color-full-name: $mdb-color-full-name,
material-color: $material-color, material-color: $mdb-color,
material-text-color: $material-text-color, material-text-color: $mdb-text-color,
)); ));
@include call-variations-content-mixin($args-color); @include call-variations-content-mixin($args-color);

8
sass/_mixins.scss
View File

@ -3,7 +3,7 @@
@mixin generic-variations-colors($args) { @mixin generic-variations-colors($args) {
$material-colors: ( $mdb-colors: (
"red": $red, "red": $red,
"pink": $pink, "pink": $pink,
"purple": $purple, "purple": $purple,
@ -25,11 +25,11 @@
"blue-grey": $blue-grey "blue-grey": $blue-grey
); );
@each $material-color-name, $material-color in $material-colors { @each $mdb-color-name, $mdb-color in $mdb-colors {
// build a single depth color palette // build a single depth color palette
$args-variation-color: map-merge($args, ( $args-variation-color: map-merge($args, (
material-color-name: $material-color-name, material-color-name: $mdb-color-name,
material-color: $material-color, material-color: $mdb-color,
material-color-number: "" material-color-number: ""
)); ));

6
sass/_navbar.scss
View File

@ -1,7 +1,7 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.navbar { .navbar {
background-color: $primary; background-color: $brand-primary;
border: $zero; border: $zero;
border-radius: $zero; border-radius: $zero;
@ -176,7 +176,7 @@
// re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
//--- //---
//height: $input-height-base; //height: $mdb-input-height-base;
$bs-line-height-base: 1.428571429 !default; $bs-line-height-base: 1.428571429 !default;
$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px $bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
height: ($bs-line-height-computed + 8px); height: ($bs-line-height-computed + 8px);
@ -187,7 +187,7 @@
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
@include navbar-variations(unquote(".navbar"), $primary); @include navbar-variations(unquote(".navbar"), $brand-primary);
&-inverse { &-inverse {
background-color: $indigo; background-color: $indigo;

8
sass/_plugin-nouislider.scss
View File

@ -105,8 +105,8 @@
} }
.slider { .slider {
@include variations(unquote(".noUi-connect"), background-color, $primary); @include variations(unquote(".noUi-connect"), background-color, $brand-primary);
@include variations(unquote(" .noUi-connect"), background-color, $primary); @include variations(unquote(" .noUi-connect"), background-color, $brand-primary);
@include variations(unquote(" .noUi-handle"), background-color, $primary); @include variations(unquote(" .noUi-handle"), background-color, $brand-primary);
@include variations(unquote(" .noUi-handle"), border-color, $primary); @include variations(unquote(" .noUi-handle"), border-color, $brand-primary);
} }

6
sass/_popups.scss
View File

@ -1,11 +1,11 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.popover, .tooltip-inner { .popover, .tooltip-inner {
color: $popover-color; color: $mdb-popover-color;
line-height: 1em; line-height: 1em;
background: $popover-background; background: $mdb-popover-background;
border: none; border: none;
border-radius: $material-border-radius; border-radius: $mdb-border-radius;
@include shadow-z-1(); @include shadow-z-1();
} }

2
sass/_progress.scss
View File

@ -7,6 +7,6 @@
background: #c8c8c8; background: #c8c8c8;
.progress-bar { .progress-bar {
box-shadow: none; box-shadow: none;
@include variations(unquote(""), background-color, $primary); @include variations(unquote(""), background-color, $brand-primary);
} }
} }

16
sass/_radios.scss
View File

@ -13,16 +13,16 @@
.form-group { .form-group {
// default label size/location // default label size/location
@include form-group-radio-variant($md-input-font-size-base, $md-input-line-height-base); @include form-group-radio-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
// sm label size/location // sm label size/location
&.form-group-sm { &.form-group-sm {
@include form-group-radio-variant($md-input-font-size-small, $md-input-line-height-small); @include form-group-radio-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
} }
// lg label size/location // lg label size/location
&.form-group-lg { &.form-group-lg {
@include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large); @include form-group-radio-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
} }
} }
@ -31,7 +31,7 @@
cursor: pointer; cursor: pointer;
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: $radio-label-color; color: $mdb-radio-label-color;
span { span {
display: block; display: block;
@ -41,7 +41,7 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.circle { .circle {
border: 2px solid $radio-border-color; border: 2px solid $mdb-radio-border-color;
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
@ -50,7 +50,7 @@
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: $radio-default; background-color: $mdb-radio-default;
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
.check:after { .check:after {
@ -76,8 +76,8 @@
} }
} }
@include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $radio-default); @include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $mdb-radio-default);
@include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $radio-default); @include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $mdb-radio-default);
input[type=radio][disabled] ~ .check, input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle { input[type=radio][disabled] ~ .circle {

2
sass/_tabs.scss
View File

@ -1,7 +1,7 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.nav-tabs { .nav-tabs {
background: $primary; background: $brand-primary;
> li { > li {
> a { > a {
color: #FFFFFF; color: #FFFFFF;

14
sass/_togglebutton.scss
View File

@ -9,16 +9,16 @@
.form-group { .form-group {
//// default label size/location //// default label size/location
@include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base); @include form-group-toggle-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
// sm label size/location // sm label size/location
&.form-group-sm { &.form-group-sm {
@include form-group-toggle-variant($md-input-font-size-small, $md-input-line-height-small); @include form-group-toggle-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
} }
// lg label size/location // lg label size/location
&.form-group-lg { &.form-group-lg {
@include form-group-toggle-variant($md-input-font-size-large, $md-input-line-height-large); @include form-group-toggle-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
} }
.togglebutton { .togglebutton {
@ -28,7 +28,7 @@
} }
label { label {
cursor: pointer; cursor: pointer;
color: $togglebutton-label-color; color: $mdb-toggle-label-color;
// Hide original checkbox // Hide original checkbox
input[type=checkbox] { input[type=checkbox] {
@ -80,11 +80,11 @@
// Switch bg on // Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
@include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100)); @include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $brand-primary, (50/100));
// Handle on // Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary); @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $brand-primary);
// Ripple on // Ripple on
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary); @include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $brand-primary);
} }
} }

192
sass/_variables.scss
View File

@ -1,76 +1,84 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@import '_colors';
// Material Global vars // Material Global vars
$zero: 0 !default; $zero: 0 !default;
// material icons path // material icons path
$material-font-path: "../fonts" !default; $mdb-font-path: "../fonts" !default;
// Bootstrap shades
$primary: $teal !default;
$success: $green !default;
$info: $light-blue !default;
$warning: $deep-orange !default;
$danger: $red !default;
$brand-primary: $primary !default;
$brand-success: $success !default;
$brand-danger: $danger !default;
$brand-warning: $warning !default;
$brand-info: $info !default;
// Typography elements for Material // Typography elements for Material
$darkbg-text: rgba(255,255,255,0.84) !default; $darkbg-text: rgba(255,255,255,0.84) !default;
$lightbg-text: rgba(0,0,0,0.84) !default; $lightbg-text: rgba(0,0,0,0.84) !default;
$icon-color: rgba(0,0,0,0.5) !default; $icon-color: rgba(0,0,0,0.5) !default;
// import bs variables for less, last declared wins.
@import '_import-bs-less';
//---
// Converted bs variables
// Bootstrap brand color customization
$brand-primary: $teal !default;
$brand-success: $green !default;
$brand-danger: $red !default;
$brand-warning: $deep-orange !default;
$brand-info: $light-blue !default;
// Bootstrap variables
$body-bg: #EEEEEE !default; $body-bg: #EEEEEE !default;
//---
// import bs variables for sass, first declared wins.
@import '_import-bs-sass';
//---
// 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
$btn-default: transparent !default; $btn-default: transparent !default;
$btn-default-text: $lightbg-text !default; $btn-default-text: $lightbg-text !default;
//---
$btn-primary: $primary !default; $btn-primary: $brand-primary !default;
$btn-primary-text: $darkbg-text !default; $btn-primary-text: $darkbg-text !default;
$btn-success: $success !default; $btn-success: $brand-success !default;
$btn-success-text: $darkbg-text !default; $btn-success-text: $darkbg-text !default;
$btn-info: $info !default; $btn-info: $brand-info !default;
$btn-info-text: $darkbg-text !default; $btn-info-text: $darkbg-text !default;
$btn-warning: $warning !default; $btn-warning: $brand-warning !default;
$btn-warning-text: $darkbg-text !default; $btn-warning-text: $darkbg-text !default;
$btn-danger: $danger !default; $btn-danger: $brand-danger !default;
$btn-danger-text: $darkbg-text !default; $btn-danger-text: $darkbg-text !default;
$input-unchecked: rgba(137, 137, 137, 0.3) !default; $mdb-input-unchecked: rgba(137, 137, 137, 0.3) !default;
$input-checked: rgba(15, 157, 88, 0.3) !default; $mdb-input-checked: rgba(15, 157, 88, 0.3) !default;
$radio-default: $lightbg-text !default; $mdb-radio-default: $lightbg-text !default;
$radio-primary: $primary !default; $mdb-radio-primary: $brand-primary !default;
$radio-success: $success !default; $mdb-radio-success: $brand-success !default;
$radio-info: $info !default; $mdb-radio-info: $brand-info !default;
$radio-warning: $warning !default; $mdb-radio-warning: $brand-warning !default;
$radio-danger: $danger !default; $mdb-radio-danger: $brand-danger !default;
$input-danger: $danger !default; $mdb-input-danger: $brand-danger !default;
$input-default: $primary !default; $mdb-input-default: $brand-primary !default;
$input-warning: $warning !default; $mdb-input-warning: $brand-warning !default;
$input-success: $success !default; $mdb-input-success: $brand-success !default;
$input-info: $info !default; $mdb-input-info: $brand-info !default;
$alert-success: $success !default; $alert-success: $brand-success !default;
$alert-info: $info !default; $alert-info: $brand-info !default;
$alert-warning: $warning !default; $alert-warning: $brand-warning !default;
$alert-danger: $danger !default; $alert-danger: $brand-danger !default;
$progress-success: $success !default; $progress-success: $brand-success !default;
$progress-info: $info !default; $progress-info: $brand-info !default;
$progress-warning: $warning !default; $progress-warning: $brand-warning !default;
$progress-danger: $danger !default; $progress-danger: $brand-danger !default;
$font-size-base: 14px !default; $font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
@ -81,92 +89,88 @@ $screen-sm-min: $screen-sm !default;
// Global Material variables // Global Material variables
$material-border-radius: 2px !default; $mdb-border-radius: 2px !default;
// -------------------- // --------------------
// inputs // inputs
$input-placeholder-color: #BDBDBD !default; $mdb-input-placeholder-color: #BDBDBD !default;
$label-floating-size-ratio: 75 / 100 !default; $mdb-input-underline-color: #D2D2D2 !default;
$help-block-size-ratio: 75 / 100 !default; $mdb-label-static-size-ratio: 75 / 100 !default;
$input-underline-color: #D2D2D2 !default; $mdb-help-block-size-ratio: 75 / 100 !default;
$md-input-font-size-base: 16px !default; $mdb-input-font-size-base: 16px !default;
$md-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px $mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
$md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px $mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
// size when static or floating with focus i.e. 16px
//$md-input-label-font-size-base: ceil(($label-floating-size-ratio * $md-input-font-size-base)) !default;
//$md-input-label-font-size-small:ceil(( $label-floating-size-ratio * $md-input-font-size-small)) !default;
//$md-input-label-font-size-large: ceil(($label-floating-size-ratio * $md-input-font-size-large)) !default;
// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
//** Unit-less `line-height` for use in components like buttons. //** Unit-less `line-height` for use in components like buttons.
$md-input-line-height-base: 1.428571429 !default; // 20/14 $mdb-input-line-height-base: 1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$md-input-line-height-computed: floor(($md-input-font-size-base * $md-input-line-height-base)) !default; // ~20px $mdb-input-line-height-computed: floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
$md-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome $mdb-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$md-input-line-height-small: 1.5 !default; $mdb-input-line-height-small: 1.5 !default;
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$md-input-padding-base-vertical: 8px - 1px !default; // was 6. $mdb-input-padding-base-vertical: 8px - 1px !default; // was 6.
$md-input-padding-base-horizontal: 0px !default; // was 12. $mdb-input-padding-base-horizontal: 0px !default; // was 12.
$md-label-as-placeholder-shim-base: 0px !default; // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-base: 0px !default; // manual adjustment of label top when positioned as placeholder
$md-label-top-margin-base: 16px !default; $mdb-label-top-margin-base: 16px !default;
$md-input-padding-large-vertical: 10px - 1px !default; // 10 $mdb-input-padding-large-vertical: 10px - 1px !default; // 10
$md-input-padding-large-horizontal: 0px !default; // 16 $mdb-input-padding-large-horizontal: 0px !default; // 16
$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
$md-label-top-margin-large: 16px !default; $mdb-label-top-margin-large: 16px !default;
$md-input-padding-small-vertical: 4px - 1px !default; // 5 $mdb-input-padding-small-vertical: 4px - 1px !default; // 5
$md-input-padding-small-horizontal: 0px !default; // 10 $mdb-input-padding-small-horizontal: 0px !default; // 10
$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
$md-label-top-margin-small: 12px !default; $mdb-label-top-margin-small: 12px !default;
$md-input-padding-xs-vertical: 2px !default; // 1 $mdb-input-padding-xs-vertical: 2px !default; // 1
$md-input-padding-xs-horizontal: 0px !default; // 5 $mdb-input-padding-xs-horizontal: 0px !default; // 5
$md-input-border-radius-base: 4px !default; $mdb-input-border-radius-base: 4px !default;
$md-input-border-radius-large: 6px !default; $mdb-input-border-radius-large: 6px !default;
$md-input-border-radius-small: 3px !default; $mdb-input-border-radius-small: 3px !default;
//** Default `.form-control` height //** Default `.form-control` height
$md-input-height-base: ($md-input-line-height-computed + ($md-input-padding-base-vertical * 2) + 2) !default; $mdb-input-height-base: ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical * 2) + 2) !default;
//** Large `.form-control` height //** Large `.form-control` height
$md-input-height-large: (ceil($md-input-font-size-large * $md-input-line-height-large) + ($md-input-padding-large-vertical * 2) + 2) !default; $mdb-input-height-large: (ceil($mdb-input-font-size-large * $mdb-input-line-height-large) + ($mdb-input-padding-large-vertical * 2) + 2) !default;
//** Small `.form-control` height //** Small `.form-control` height
$md-input-height-small: (floor($md-input-font-size-small * $md-input-line-height-small) + ($md-input-padding-small-vertical * 2) + 2) !default; $mdb-input-height-small: (floor($mdb-input-font-size-small * $mdb-input-line-height-small) + ($mdb-input-padding-small-vertical * 2) + 2) !default;
// Card // Card
$card-body-text: $lightbg-text !default; $mdb-card-body-text: $lightbg-text !default;
$card-body-background: #fff !default; $mdb-card-body-background: #fff !default;
$card-image-headline: #fff !default; $mdb-card-image-headline: #fff !default;
$text-disabled: #a8a8a8 !default; $text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default; $background-disabled: #eaeaea !default;
// Checkboxes // Checkboxes
$checkbox-size: 20px !default; $mdb-checkbox-size: 20px !default;
$checkbox-animation-ripple: 500ms !default; $mdb-checkbox-animation-ripple: 500ms !default;
$checkbox-animation-check: 0.3s !default; $mdb-checkbox-animation-check: 0.3s !default;
$checkbox-checked-color: #4caf50 !default; $mdb-checkbox-checked-color: #4caf50 !default;
$checkbox-label-color: rgba(0, 0, 0, .54) !default; $mdb-checkbox-label-color: rgba(0, 0, 0, .54) !default;
$checkbox-border-color: $checkbox-label-color !default; $mdb-checkbox-border-color: $mdb-checkbox-label-color !default;
// Popovers and Popups // Popovers and Popups
$popover-background: rgba(101, 101, 101, 0.9) !default; $mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
$popover-color: #ececec !default; $mdb-popover-color: #ececec !default;
// Dropdown Menu // Dropdown Menu
$dropdown-radius: 2px !default; $mdb-dropdown-radius: 2px !default;
$dropdown-font-size: 16px !default; $mdb-dropdown-font-size: 16px !default;
// Toggle // Toggle
$togglebutton-label-color: $checkbox-label-color !default; $mdb-toggle-label-color: $mdb-checkbox-label-color !default;
// Radio: // Radio:
$radio-label-color: $checkbox-label-color !default; $mdb-radio-label-color: $mdb-checkbox-label-color !default;
$radio-border-color: $checkbox-border-color !default; $mdb-radio-border-color: $mdb-checkbox-border-color !default;

1
sass/material-fullpalette.scss
View File

@ -1,6 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@import '_colors';
@import '_variables'; @import '_variables';
@import '_mixins-fullpalette'; @import '_mixins-fullpalette';
@import '_icons-material-design'; @import '_icons-material-design';

1
sass/material.scss
View File

@ -1,6 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@import '_colors';
@import '_variables'; @import '_variables';
@import '_mixins'; @import '_mixins';
@import '_icons-material-design'; @import '_icons-material-design';

16
sass/roboto.scss
View File

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