mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
#727 checkpoint - added specific import order for less vs sass, normalized more variables.
This commit is contained in:
Kevin Ross
parent
f64ff8a142
commit
b05c95b190
16
Gruntfile.js
16
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"],
|
||||
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less", "!_import-bs*"],
|
||||
ext: ".scss",
|
||||
dest: "sass"
|
||||
}],
|
||||
|
|
@ -471,9 +471,9 @@ module.exports = function (grunt) {
|
|||
},
|
||||
src: ['Gruntfile.js', 'package.js']
|
||||
},
|
||||
core: [
|
||||
"scripts/**/*.js",
|
||||
],
|
||||
core: {
|
||||
src: ["scripts/**/*.js"]
|
||||
},
|
||||
test: {
|
||||
src: ["test/**/*.js"]
|
||||
},
|
||||
|
|
@ -511,10 +511,10 @@ module.exports = function (grunt) {
|
|||
files: ["index.html", "bootstrap-elements.html", "test.html"],
|
||||
tasks: ["htmllint", "bootlint"]
|
||||
},
|
||||
src: {
|
||||
files: '<%= jshint.core.src %>',
|
||||
tasks: ['jshint:core', 'dist-js'] // add tests when working again
|
||||
},
|
||||
//src: {
|
||||
// files: '<%= jshint.core.src %>',
|
||||
// tasks: ['jshint:core', 'dist-js'] // add tests when working again
|
||||
//},
|
||||
test: {
|
||||
files: ["test/**/*.js"],
|
||||
tasks: ["jshint:test", "jasmine"]
|
||||
|
|
|
|||
2220
dist/css/material-fullpalette.css
vendored
2220
dist/css/material-fullpalette.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material-fullpalette.css.map
vendored
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
624
dist/css/material.css
vendored
624
dist/css/material.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/roboto.css.map
vendored
2
dist/css/roboto.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -136,7 +136,7 @@
|
|||
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", color, @mdb-checkbox-checked-color);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'Material-Design-Icons';
|
||||
src:url('@{material-font-path}/Material-Design-Icons.eot?3ocs8m');
|
||||
src:url('@{material-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
|
||||
url('@{material-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
|
||||
url('@{material-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
|
||||
url('@{material-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
|
||||
src:url('@{mdb-font-path}/Material-Design-Icons.eot?3ocs8m');
|
||||
src:url('@{mdb-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
|
||||
url('@{mdb-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
|
||||
url('@{mdb-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
|
||||
url('@{mdb-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
|||
2
less/_import-bs-less.less
Normal file
2
less/_import-bs-less.less
Normal 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
4
less/_import-bs-sass.less
Normal 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.
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.form-control {
|
||||
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-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(~"100% - 1px");
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
&.is-focused .form-control {
|
||||
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;
|
||||
box-shadow: none;
|
||||
transition-duration: 0.3s;
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ h5, h6{
|
|||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
color: @primary;
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
|
|
@ -73,10 +73,10 @@ legend {
|
|||
position: relative;
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
color: @primary;
|
||||
color: @brand-primary;
|
||||
}
|
||||
}
|
||||
.variations(~" li a:hover", color, @primary);
|
||||
.variations(~" li a:hover", color, @brand-primary);
|
||||
}
|
||||
|
||||
// Alerts
|
||||
|
|
|
|||
|
|
@ -46,35 +46,35 @@
|
|||
&-primary@{extra} {
|
||||
@mdb-color-name: "primary";
|
||||
@mdb-color-full-name: @mdb-color-name;
|
||||
@mdb-color: @primary;
|
||||
@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: @success;
|
||||
@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: @info;
|
||||
@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: @warning;
|
||||
@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: @danger;
|
||||
@mdb-color: @brand-danger;
|
||||
@mdb-text-color: @darkbg-text;
|
||||
@func();
|
||||
}
|
||||
|
|
@ -85,9 +85,9 @@
|
|||
// given a color and its deph build css
|
||||
.generic-variations-factory-deep(@mdb-color-number) {
|
||||
|
||||
&-material-@{material-color-name}@{material-color-number}@{extra} {
|
||||
@mdb-color-full-name: "@{material-color-name}@{material-color-number}";
|
||||
@mdb-color: @@material-color-full-name;
|
||||
&-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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,35 +47,35 @@
|
|||
&-primary@{extra} {
|
||||
@mdb-color-name: "primary";
|
||||
@mdb-color-full-name: @mdb-color-name;
|
||||
@mdb-color: @primary;
|
||||
@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: @success;
|
||||
@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: @info;
|
||||
@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: @warning;
|
||||
@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: @danger;
|
||||
@mdb-color: @brand-danger;
|
||||
@mdb-text-color: @darkbg-text;
|
||||
@func();
|
||||
}
|
||||
|
|
@ -86,9 +86,9 @@
|
|||
// given a color and its deph build css
|
||||
.generic-variations-factory-deep(@mdb-color-number) {
|
||||
|
||||
&-material-@{material-color-name}@{material-color-number}@{extra} {
|
||||
@mdb-color-full-name: "@{material-color-name}@{material-color-number}";
|
||||
@mdb-color: @@material-color-full-name;
|
||||
&-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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.navbar {
|
||||
background-color: @primary;
|
||||
background-color: @brand-primary;
|
||||
border: @zero;
|
||||
border-radius: @zero;
|
||||
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
|
||||
// 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;
|
||||
color: @mdb-text-color;
|
||||
// deeply defined to override welljumbo class without !impotant need
|
||||
|
|
|
|||
|
|
@ -103,8 +103,8 @@
|
|||
}
|
||||
|
||||
.slider {
|
||||
.variations(~".noUi-connect", background-color, @primary);
|
||||
.variations(~" .noUi-connect", background-color, @primary);
|
||||
.variations(~" .noUi-handle", background-color, @primary);
|
||||
.variations(~" .noUi-handle", border-color, @primary);
|
||||
.variations(~".noUi-connect", background-color, @brand-primary);
|
||||
.variations(~" .noUi-connect", background-color, @brand-primary);
|
||||
.variations(~" .noUi-handle", background-color, @brand-primary);
|
||||
.variations(~" .noUi-handle", border-color, @brand-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
background: #c8c8c8;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
.variations(~"", background-color, @primary);
|
||||
.variations(~"", background-color, @brand-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.nav-tabs {
|
||||
background: @primary;
|
||||
background: @brand-primary;
|
||||
> li {
|
||||
> a {
|
||||
color: #FFFFFF;
|
||||
|
|
|
|||
|
|
@ -78,14 +78,14 @@
|
|||
|
||||
// Switch bg on
|
||||
// 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%);
|
||||
});
|
||||
// Handle on
|
||||
// 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
|
||||
.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%);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +1,82 @@
|
|||
@import "_colors.less";
|
||||
|
||||
// Material Global vars
|
||||
@zero: 0;
|
||||
|
||||
// material icons path
|
||||
@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
|
||||
@darkbg-text: rgba(255,255,255,0.84);
|
||||
@lightbg-text: rgba(0,0,0,0.84);
|
||||
@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;
|
||||
//---
|
||||
|
||||
// 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-text: @lightbg-text;
|
||||
//---
|
||||
|
||||
@btn-primary: @primary;
|
||||
@btn-primary: @brand-primary;
|
||||
@btn-primary-text: @darkbg-text;
|
||||
|
||||
@btn-success: @success;
|
||||
@btn-success: @brand-success;
|
||||
@btn-success-text: @darkbg-text;
|
||||
|
||||
@btn-info: @info;
|
||||
@btn-info: @brand-info;
|
||||
@btn-info-text: @darkbg-text;
|
||||
|
||||
@btn-warning: @warning;
|
||||
@btn-warning: @brand-warning;
|
||||
@btn-warning-text: @darkbg-text;
|
||||
|
||||
@btn-danger: @danger;
|
||||
@btn-danger: @brand-danger;
|
||||
@btn-danger-text: @darkbg-text;
|
||||
|
||||
@mdb-input-unchecked: rgba(137, 137, 137, 0.3);
|
||||
@mdb-input-checked: rgba(15, 157, 88, 0.3);
|
||||
|
||||
@mdb-radio-default: @lightbg-text;
|
||||
@mdb-radio-primary: @primary;
|
||||
@mdb-radio-success: @success;
|
||||
@mdb-radio-info: @info;
|
||||
@mdb-radio-warning: @warning;
|
||||
@mdb-radio-danger: @danger;
|
||||
@mdb-radio-primary: @brand-primary;
|
||||
@mdb-radio-success: @brand-success;
|
||||
@mdb-radio-info: @brand-info;
|
||||
@mdb-radio-warning: @brand-warning;
|
||||
@mdb-radio-danger: @brand-danger;
|
||||
|
||||
@mdb-input-danger: @danger;
|
||||
@mdb-input-default: @primary;
|
||||
@mdb-input-warning: @warning;
|
||||
@mdb-input-success: @success;
|
||||
@mdb-input-info: @info;
|
||||
@mdb-input-danger: @brand-danger;
|
||||
@mdb-input-default: @brand-primary;
|
||||
@mdb-input-warning: @brand-warning;
|
||||
@mdb-input-success: @brand-success;
|
||||
@mdb-input-info: @brand-info;
|
||||
|
||||
@alert-success: @success;
|
||||
@alert-info: @info;
|
||||
@alert-warning: @warning;
|
||||
@alert-danger: @danger;
|
||||
@alert-success: @brand-success;
|
||||
@alert-info: @brand-info;
|
||||
@alert-warning: @brand-warning;
|
||||
@alert-danger: @brand-danger;
|
||||
|
||||
@progress-success: @success;
|
||||
@progress-info: @info;
|
||||
@progress-warning: @warning;
|
||||
@progress-danger: @danger;
|
||||
@progress-success: @brand-success;
|
||||
@progress-info: @brand-info;
|
||||
@progress-warning: @brand-warning;
|
||||
@progress-danger: @brand-danger;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "_colors.less";
|
||||
@import "_variables.less";
|
||||
@import "_mixins-fullpalette.less";
|
||||
@import "_icons-material-design.less";
|
||||
|
|
|
|||
|
|
@ -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 "_mixins.less";
|
||||
@import "_icons-material-design.less";
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
src: local('RobotoDraft'),
|
||||
local('RobotoDraft-Regular'),
|
||||
local('Roboto-Regular'),
|
||||
url('@{material-font-path}/RobotoDraftRegular.woff2') format('woff2'),
|
||||
url('@{material-font-path}/RobotoDraftRegular.woff') format('woff');
|
||||
url('@{mdb-font-path}/RobotoDraftRegular.woff2') format('woff2'),
|
||||
url('@{mdb-font-path}/RobotoDraftRegular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
src: local('RobotoDraft Medium'),
|
||||
local('RobotoDraft-Medium'),
|
||||
local('Roboto-Medium'),
|
||||
url('@{material-font-path}/RobotoDraftMedium.woff2') format('woff2'),
|
||||
url('@{material-font-path}/RobotoDraftMedium.woff') format('woff');
|
||||
url('@{mdb-font-path}/RobotoDraftMedium.woff2') format('woff2'),
|
||||
url('@{mdb-font-path}/RobotoDraftMedium.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
src: local('RobotoDraft Bold'),
|
||||
local('RobotoDraft-Bold'),
|
||||
local('Roboto-Bold'),
|
||||
url('@{material-font-path}/RobotoDraftBold.woff2') format('woff2'),
|
||||
url('@{material-font-path}/RobotoDraftBold.woff') format('woff');
|
||||
url('@{mdb-font-path}/RobotoDraftBold.woff2') format('woff2'),
|
||||
url('@{mdb-font-path}/RobotoDraftBold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -45,6 +45,6 @@
|
|||
src: local('RobotoDraft Italic'),
|
||||
local('RobotoDraft-Italic'),
|
||||
local('Roboto-Italic'),
|
||||
url('@{material-font-path}/RobotoDraftItalic.woff2') format('woff2'),
|
||||
url('@{material-font-path}/RobotoDraftItalic.woff') format('woff');
|
||||
url('@{mdb-font-path}/RobotoDraftItalic.woff2') format('woff2'),
|
||||
url('@{mdb-font-path}/RobotoDraftItalic.woff') format('woff');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
|
||||
|
||||
border-radius: 2px;
|
||||
color: $card-body-text;
|
||||
background: $card-body-background;
|
||||
color: $mdb-card-body-text;
|
||||
background: $mdb-card-body-background;
|
||||
|
||||
@include shadow-z-2();
|
||||
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: $card-image-headline;
|
||||
color: $mdb-card-image-headline;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,23 +14,23 @@
|
|||
.form-group {
|
||||
|
||||
//// 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
|
||||
&.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
|
||||
&.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 {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
color: $checkbox-label-color;
|
||||
color: $mdb-checkbox-label-color;
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
|
|
@ -56,8 +56,8 @@
|
|||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: $checkbox-size;
|
||||
width: $checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
width: $mdb-checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
|
|
@ -68,9 +68,9 @@
|
|||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
border: 2px solid $checkbox-border-color;
|
||||
width: $mdb-checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
border: 2px solid $mdb-checkbox-border-color;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
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,
|
||||
-5px 5px 0 10px,
|
||||
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 {
|
||||
animation: rippleOff $checkbox-animation-ripple;
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn $checkbox-animation-ripple;
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
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 {
|
||||
animation: rippleOn $checkbox-animation-ripple forwards;
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
|
|
@ -138,10 +138,10 @@
|
|||
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:before"), color, $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"), border-color, $checkbox-checked-color);
|
||||
@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, $mdb-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, $mdb-checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Material-Design-Icons';
|
||||
src:url('#{$material-font-path}/Material-Design-Icons.eot?3ocs8m');
|
||||
src:url('#{$material-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
|
||||
url('#{$material-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
|
||||
url('#{$material-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
|
||||
url('#{$material-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
|
||||
src:url('#{$mdb-font-path}/Material-Design-Icons.eot?3ocs8m');
|
||||
src:url('#{$mdb-font-path}/Material-Design-Icons.eot?#iefix3ocs8m') format('embedded-opentype'),
|
||||
url('#{$mdb-font-path}/Material-Design-Icons.woff?3ocs8m') format('woff'),
|
||||
url('#{$mdb-font-path}/Material-Design-Icons.ttf?3ocs8m') format('truetype'),
|
||||
url('#{$mdb-font-path}/Material-Design-Icons.svg?3ocs8m#Material-Design-Icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
|||
4
sass/_import-bs-less.scss
Normal file
4
sass/_import-bs-less.scss
Normal 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
2
sass/_import-bs-sass.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables";
|
||||
//@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
|
||||
|
|
@ -10,22 +10,22 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
legend {
|
||||
margin-bottom: $md-input-line-height-computed;
|
||||
font-size: ($md-input-font-size-base * 1.5);
|
||||
margin-bottom: $mdb-input-line-height-computed;
|
||||
font-size: ($mdb-input-font-size-base * 1.5);
|
||||
}
|
||||
|
||||
// Adjust output element
|
||||
output {
|
||||
padding-top: ($md-input-padding-base-vertical + 1);
|
||||
font-size: $md-input-font-size-base;
|
||||
line-height: $md-input-line-height-base;
|
||||
padding-top: ($mdb-input-padding-base-vertical + 1);
|
||||
font-size: $mdb-input-font-size-base;
|
||||
line-height: $mdb-input-line-height-base;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: $md-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;
|
||||
font-size: $md-input-font-size-base;
|
||||
line-height: $md-input-line-height-base;
|
||||
height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal;
|
||||
font-size: $mdb-input-font-size-base;
|
||||
line-height: $mdb-input-line-height-base;
|
||||
}
|
||||
|
||||
// Special styles for iOS temporal inputs
|
||||
|
|
@ -43,17 +43,17 @@ output {
|
|||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
&.form-control {
|
||||
line-height: $md-input-height-base;
|
||||
line-height: $mdb-input-height-base;
|
||||
}
|
||||
|
||||
&.input-sm,
|
||||
.input-group-sm & {
|
||||
line-height: $md-input-height-small;
|
||||
line-height: $mdb-input-height-small;
|
||||
}
|
||||
|
||||
&.input-lg,
|
||||
.input-group-lg & {
|
||||
line-height: $md-input-height-large;
|
||||
line-height: $mdb-input-height-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@ output {
|
|||
.checkbox {
|
||||
|
||||
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 {
|
||||
// Size it appropriately next to real form controls
|
||||
padding-top: ($md-input-padding-base-vertical + 1);
|
||||
padding-bottom: ($md-input-padding-base-vertical + 1);
|
||||
min-height: ($md-input-line-height-computed + $md-input-font-size-base);
|
||||
padding-top: ($mdb-input-padding-base-vertical + 1);
|
||||
padding-bottom: ($mdb-input-padding-base-vertical + 1);
|
||||
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>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
|
||||
// mixin pulled from bootstrap and altered for less/sass compatibility
|
||||
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
|
||||
// mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
|
||||
// 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} {
|
||||
height: $input-height;
|
||||
height: $mdb-input-height;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
|
|
@ -98,8 +99,8 @@ output {
|
|||
}
|
||||
|
||||
select#{$parent} {
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
height: $mdb-input-height;
|
||||
line-height: $mdb-input-height;
|
||||
}
|
||||
|
||||
textarea#{$parent},
|
||||
|
|
@ -118,56 +119,56 @@ output {
|
|||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
.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-control {
|
||||
height: $md-input-height-small;
|
||||
padding: $md-input-padding-small-vertical $md-input-padding-small-horizontal;
|
||||
font-size: $md-input-font-size-small;
|
||||
line-height: $md-input-line-height-small;
|
||||
height: $mdb-input-height-small;
|
||||
padding: $mdb-input-padding-small-vertical $mdb-input-padding-small-horizontal;
|
||||
font-size: $mdb-input-font-size-small;
|
||||
line-height: $mdb-input-line-height-small;
|
||||
}
|
||||
select.form-control {
|
||||
height: $md-input-height-small;
|
||||
line-height: $md-input-height-small;
|
||||
height: $mdb-input-height-small;
|
||||
line-height: $mdb-input-height-small;
|
||||
}
|
||||
textarea.form-control,
|
||||
select[multiple].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-control-static {
|
||||
height: $md-input-height-small;
|
||||
min-height: ($md-input-line-height-computed + $md-input-font-size-small);
|
||||
padding: ($md-input-padding-small-vertical + 1) $md-input-padding-small-horizontal;
|
||||
font-size: $md-input-font-size-small;
|
||||
line-height: $md-input-line-height-small;
|
||||
height: $mdb-input-height-small;
|
||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-small);
|
||||
padding: ($mdb-input-padding-small-vertical + 1) $mdb-input-padding-small-horizontal;
|
||||
font-size: $mdb-input-font-size-small;
|
||||
line-height: $mdb-input-line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
.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-control {
|
||||
height: $md-input-height-large;
|
||||
padding: $md-input-padding-large-vertical $md-input-padding-large-horizontal;
|
||||
font-size: $md-input-font-size-large;
|
||||
line-height: $md-input-line-height-large;
|
||||
height: $mdb-input-height-large;
|
||||
padding: $mdb-input-padding-large-vertical $mdb-input-padding-large-horizontal;
|
||||
font-size: $mdb-input-font-size-large;
|
||||
line-height: $mdb-input-line-height-large;
|
||||
}
|
||||
select.form-control {
|
||||
height: $md-input-height-large;
|
||||
line-height: $md-input-height-large;
|
||||
height: $mdb-input-height-large;
|
||||
line-height: $mdb-input-height-large;
|
||||
}
|
||||
textarea.form-control,
|
||||
select[multiple].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-control-static {
|
||||
height: $md-input-height-large;
|
||||
min-height: ($md-input-line-height-computed + $md-input-font-size-large);
|
||||
padding: ($md-input-padding-large-vertical + 1) $md-input-padding-large-horizontal;
|
||||
font-size: $md-input-font-size-large;
|
||||
line-height: $md-input-line-height-large;
|
||||
height: $mdb-input-height-large;
|
||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-large);
|
||||
padding: ($mdb-input-padding-large-vertical + 1) $mdb-input-padding-large-horizontal;
|
||||
font-size: $mdb-input-font-size-large;
|
||||
line-height: $mdb-input-line-height-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,20 +182,20 @@ output {
|
|||
.checkbox,
|
||||
.radio-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
|
||||
// and other content below items
|
||||
.radio,
|
||||
.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
|
||||
// labels on narrow viewports stack the same as a default form example.
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.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 {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: (($md-input-padding-large-vertical * $md-input-line-height-large) + 1);
|
||||
font-size: $md-input-font-size-large;
|
||||
padding-top: (($mdb-input-padding-large-vertical * $mdb-input-line-height-large) + 1);
|
||||
font-size: $mdb-input-font-size-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group-sm {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: ($md-input-padding-small-vertical + 1);
|
||||
font-size: $md-input-font-size-small;
|
||||
padding-top: ($mdb-input-padding-small-vertical + 1);
|
||||
font-size: $mdb-input-font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
&.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,
|
||||
.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){
|
||||
$static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default;
|
||||
$static-line-height: ($label-floating-size-ratio * $line-height) !default;
|
||||
$static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !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-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-line-height: ($help-block-size-ratio * $line-height) !default;
|
||||
$help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !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
|
||||
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
|
||||
.form-control {
|
||||
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-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(100% - 1px);
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
|
||||
// Placeholders and and labels-as-placeholders should look the same
|
||||
@include material-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
color: $mdb-input-placeholder-color;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
|
@ -136,19 +136,19 @@
|
|||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-image: none;
|
||||
border-bottom: 1px dotted $input-underline-color;
|
||||
border-bottom: 1px dotted $mdb-input-underline-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focused .form-control {
|
||||
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;
|
||||
box-shadow: none;
|
||||
transition-duration: 0.3s;
|
||||
|
||||
.material-input:after {
|
||||
background-color: $input-default;
|
||||
background-color: $mdb-input-default;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
label,
|
||||
label.control-label {
|
||||
// same label properties as form-group placeholder
|
||||
color: $input-placeholder-color;
|
||||
color: $mdb-input-placeholder-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -188,21 +188,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include variations(unquote(" label.control-label"), color, $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-placeholder 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, $mdb-input-default); // focused 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
|
||||
@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
|
||||
&.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
|
||||
&.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.
|
||||
|
|
@ -218,12 +218,12 @@
|
|||
}
|
||||
|
||||
// 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-error, $input-danger);
|
||||
@include form-group-validation-state(has-success, $input-success);
|
||||
@include form-group-validation-state(has-info, $input-info);
|
||||
@include form-group-validation-state(has-warning, $mdb-input-warning);
|
||||
@include form-group-validation-state(has-error, $mdb-input-danger);
|
||||
@include form-group-validation-state(has-success, $mdb-input-success);
|
||||
@include form-group-validation-state(has-info, $mdb-input-info);
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
|
|
@ -249,7 +249,7 @@ select.form-control {
|
|||
|
||||
.form-group.is-focused & {
|
||||
box-shadow: none;
|
||||
border-color: $input-underline-color;
|
||||
border-color: $mdb-input-underline-color;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
|
|
@ -272,7 +272,7 @@ select.form-control {
|
|||
// input group/addon related styles
|
||||
|
||||
// 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-control {
|
||||
|
|
@ -281,12 +281,12 @@ select.form-control {
|
|||
|
||||
// sm margin
|
||||
&.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
|
||||
&.form-group-lg {
|
||||
@include input-group-button-variation($md-input-padding-large-vertical);
|
||||
@include input-group-button-variation($mdb-input-padding-large-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ h5, h6{
|
|||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
color: $primary;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
|
|
@ -75,10 +75,10 @@ legend {
|
|||
position: relative;
|
||||
a:hover {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
//@debug "multi-palette generic-variations-colors called with #{inspect($args)}";
|
||||
|
||||
$material-colors: (
|
||||
$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"),
|
||||
|
|
@ -293,7 +293,7 @@
|
|||
"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
|
||||
$args-variation-color: map-merge($args, (
|
||||
material-color-name: map-get($color-attributes, name),
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
|
||||
// variations(unquote(""), background-color, #FFF);
|
||||
@mixin variations($extra, $material-param-1, $default) {
|
||||
@include generic-variations($extra, $default, "variations-content", $material-param-1);
|
||||
@mixin variations($extra, $mdb-param-1, $default) {
|
||||
@include generic-variations($extra, $default, "variations-content", $mdb-param-1);
|
||||
}
|
||||
|
||||
@mixin variations-content($args) {
|
||||
|
|
@ -42,99 +42,99 @@
|
|||
color: map-get($args, material-color);
|
||||
}
|
||||
|
||||
@mixin button-variations($extra, $default, $material-param-1) {
|
||||
@include generic-variations($extra, $default, "button-variations-content", $material-param-1);
|
||||
@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)}";
|
||||
$material-color: map-get($args, material-color);
|
||||
$material-param-1: map-get($args, material-param-1);
|
||||
background-color: contrast-color($material-color,
|
||||
darken($material-color, $material-param-1),
|
||||
lighten($material-color, $material-param-1));
|
||||
$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, $material-param-1) {
|
||||
@include generic-variations($extra, $default, "bg-color-variations-content", $material-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", $primary
|
||||
// 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){
|
||||
$material-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));
|
||||
$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", $primary
|
||||
// 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){
|
||||
$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)}";
|
||||
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) {
|
||||
@include generic-variations($extra, $default, "navbar-variations-content", null);
|
||||
}
|
||||
|
||||
@mixin navbar-variations-content($args){
|
||||
$material-color: map-get($args, material-color);
|
||||
$material-text-color: map-get($args, material-text-color);
|
||||
$mdb-color: map-get($args, material-color);
|
||||
$mdb-text-color: map-get($args, material-text-color);
|
||||
|
||||
background-color: $material-color;
|
||||
color: $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: $material-text-color;
|
||||
color: $mdb-text-color;
|
||||
}
|
||||
.dropdown-menu {
|
||||
border-radius: $dropdown-radius;
|
||||
border-radius: $mdb-dropdown-radius;
|
||||
li > a {
|
||||
font-size: $dropdown-font-size;
|
||||
font-size: $mdb-dropdown-font-size;
|
||||
padding: 13px 16px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $material-color;
|
||||
color: $mdb-color;
|
||||
background-color: $grey-200;
|
||||
}
|
||||
}
|
||||
.active > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $material-text-color;
|
||||
color: $mdb-text-color;
|
||||
}
|
||||
background-color: $material-color;
|
||||
color: $material-text-color;
|
||||
background-color: $mdb-color;
|
||||
color: $mdb-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// alert-variations("", $primary)
|
||||
// alert-variations("", $brand-primary)
|
||||
@mixin alert-variations($extra, $default) {
|
||||
@include generic-variations($extra, $default, "alert-variations-content", null);
|
||||
}
|
||||
|
||||
@mixin alert-variations-content($args){
|
||||
$material-color: map-get($args, material-color);
|
||||
$material-text-color: map-get($args, material-text-color);
|
||||
$mdb-color: map-get($args, material-color);
|
||||
$mdb-text-color: map-get($args, material-text-color);
|
||||
|
||||
background-color: $material-color;
|
||||
color: $material-text-color;
|
||||
background-color: $mdb-color;
|
||||
color: $mdb-text-color;
|
||||
|
||||
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
|
||||
// the style. In that definition you can use the following variables to define it.
|
||||
//
|
||||
// $material-color-name ---> "red", "green", "indigo" ...
|
||||
// $material-color-full-name ---> "red", "green-50", "indigo-400" ...
|
||||
// $material-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-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, $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)
|
||||
$args: (
|
||||
extra: $extra,
|
||||
default: $default,
|
||||
mixin-name: $mixin-name,
|
||||
material-param-1: $material-param-1
|
||||
material-param-1: $mdb-param-1
|
||||
);
|
||||
|
||||
// bootstrap styles
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
$args-primary: map-merge($args, (
|
||||
material-color-name: "primary",
|
||||
material-color-full-name: "primary",
|
||||
material-color: $primary,
|
||||
material-color: $brand-primary,
|
||||
material-text-color: $darkbg-text
|
||||
));
|
||||
@include call-variations-content-mixin($args-primary);
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
$args-success: map-merge($args, (
|
||||
material-color-name: "success",
|
||||
material-color-full-name: "success",
|
||||
material-color: $success,
|
||||
material-color: $brand-success,
|
||||
material-text-color: $darkbg-text
|
||||
));
|
||||
@include call-variations-content-mixin($args-success);
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
$args-info: map-merge($args, (
|
||||
material-color-name: "info",
|
||||
material-color-full-name: "info",
|
||||
material-color: $info,
|
||||
material-color: $brand-info,
|
||||
material-text-color: $darkbg-text
|
||||
));
|
||||
@include call-variations-content-mixin($args-info);
|
||||
|
|
@ -253,7 +253,7 @@
|
|||
$args-warning: map-merge($args, (
|
||||
material-color-name: "warning",
|
||||
material-color-full-name: "warning",
|
||||
material-color: $warning,
|
||||
material-color: $brand-warning,
|
||||
material-text-color: $darkbg-text
|
||||
));
|
||||
@include call-variations-content-mixin($args-warning);
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
$args-danger: map-merge($args, (
|
||||
material-color-name: "danger",
|
||||
material-color-full-name: "danger",
|
||||
material-color: $danger,
|
||||
material-color: $brand-danger,
|
||||
material-text-color: $darkbg-text
|
||||
));
|
||||
@include call-variations-content-mixin($args-danger);
|
||||
|
|
@ -272,17 +272,17 @@
|
|||
}
|
||||
|
||||
@mixin generic-variations-color($args) {
|
||||
$material-color-name: map-get($args, material-color-name);
|
||||
$material-color-number: map-get($args, material-color-number);
|
||||
$material-color-full-name: "#{$material-color-name}#{$material-color-number}";
|
||||
$material-color: map-get($args, material-color); // $material-color-full-name;
|
||||
$material-text-color: contrast-color($material-color, $lightbg-text, $darkbg-text);
|
||||
$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-#{$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, (
|
||||
material-color-full-name: $material-color-full-name,
|
||||
material-color: $material-color,
|
||||
material-text-color: $material-text-color,
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
@mixin generic-variations-colors($args) {
|
||||
|
||||
$material-colors: (
|
||||
$mdb-colors: (
|
||||
"red": $red,
|
||||
"pink": $pink,
|
||||
"purple": $purple,
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
"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
|
||||
$args-variation-color: map-merge($args, (
|
||||
material-color-name: $material-color-name,
|
||||
material-color: $material-color,
|
||||
material-color-name: $mdb-color-name,
|
||||
material-color: $mdb-color,
|
||||
material-color-number: ""
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
.navbar {
|
||||
background-color: $primary;
|
||||
background-color: $brand-primary;
|
||||
border: $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
|
||||
//---
|
||||
//height: $input-height-base;
|
||||
//height: $mdb-input-height-base;
|
||||
$bs-line-height-base: 1.428571429 !default;
|
||||
$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
|
||||
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
|
||||
@include navbar-variations(unquote(".navbar"), $primary);
|
||||
@include navbar-variations(unquote(".navbar"), $brand-primary);
|
||||
|
||||
&-inverse {
|
||||
background-color: $indigo;
|
||||
|
|
|
|||
|
|
@ -105,8 +105,8 @@
|
|||
}
|
||||
|
||||
.slider {
|
||||
@include variations(unquote(".noUi-connect"), background-color, $primary);
|
||||
@include variations(unquote(" .noUi-connect"), background-color, $primary);
|
||||
@include variations(unquote(" .noUi-handle"), background-color, $primary);
|
||||
@include variations(unquote(" .noUi-handle"), border-color, $primary);
|
||||
@include variations(unquote(".noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(" .noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(" .noUi-handle"), background-color, $brand-primary);
|
||||
@include variations(unquote(" .noUi-handle"), border-color, $brand-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
.popover, .tooltip-inner {
|
||||
color: $popover-color;
|
||||
color: $mdb-popover-color;
|
||||
line-height: 1em;
|
||||
background: $popover-background;
|
||||
background: $mdb-popover-background;
|
||||
border: none;
|
||||
border-radius: $material-border-radius;
|
||||
border-radius: $mdb-border-radius;
|
||||
@include shadow-z-1();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
background: #c8c8c8;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
@include variations(unquote(""), background-color, $primary);
|
||||
@include variations(unquote(""), background-color, $brand-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,16 +13,16 @@
|
|||
.form-group {
|
||||
|
||||
// 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
|
||||
&.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
|
||||
&.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;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
color: $radio-label-color;
|
||||
color: $mdb-radio-label-color;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
transition-duration: 0.2s;
|
||||
}
|
||||
.circle {
|
||||
border: 2px solid $radio-border-color;
|
||||
border: 2px solid $mdb-radio-border-color;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: $radio-default;
|
||||
background-color: $mdb-radio-default;
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.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 ~ .circle"), border-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, $mdb-radio-default);
|
||||
|
||||
input[type=radio][disabled] ~ .check,
|
||||
input[type=radio][disabled] ~ .circle {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
.nav-tabs {
|
||||
background: $primary;
|
||||
background: $brand-primary;
|
||||
> li {
|
||||
> a {
|
||||
color: #FFFFFF;
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
.form-group {
|
||||
|
||||
//// 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
|
||||
&.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
|
||||
&.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 {
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: $togglebutton-label-color;
|
||||
color: $mdb-toggle-label-color;
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
|
|
@ -80,11 +80,11 @@
|
|||
|
||||
// Switch bg on
|
||||
// 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
|
||||
// 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
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,84 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
@import '_colors';
|
||||
|
||||
// Material Global vars
|
||||
$zero: 0 !default;
|
||||
|
||||
// material icons path
|
||||
$material-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;
|
||||
$mdb-font-path: "../fonts" !default;
|
||||
|
||||
// Typography elements for Material
|
||||
$darkbg-text: rgba(255,255,255,0.84) !default;
|
||||
$lightbg-text: rgba(0,0,0,0.84) !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;
|
||||
//---
|
||||
|
||||
// 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-text: $lightbg-text !default;
|
||||
//---
|
||||
|
||||
$btn-primary: $primary !default;
|
||||
$btn-primary: $brand-primary !default;
|
||||
$btn-primary-text: $darkbg-text !default;
|
||||
|
||||
$btn-success: $success !default;
|
||||
$btn-success: $brand-success !default;
|
||||
$btn-success-text: $darkbg-text !default;
|
||||
|
||||
$btn-info: $info !default;
|
||||
$btn-info: $brand-info !default;
|
||||
$btn-info-text: $darkbg-text !default;
|
||||
|
||||
$btn-warning: $warning !default;
|
||||
$btn-warning: $brand-warning !default;
|
||||
$btn-warning-text: $darkbg-text !default;
|
||||
|
||||
$btn-danger: $danger !default;
|
||||
$btn-danger: $brand-danger !default;
|
||||
$btn-danger-text: $darkbg-text !default;
|
||||
|
||||
$input-unchecked: rgba(137, 137, 137, 0.3) !default;
|
||||
$input-checked: rgba(15, 157, 88, 0.3) !default;
|
||||
$mdb-input-unchecked: rgba(137, 137, 137, 0.3) !default;
|
||||
$mdb-input-checked: rgba(15, 157, 88, 0.3) !default;
|
||||
|
||||
$radio-default: $lightbg-text !default;
|
||||
$radio-primary: $primary !default;
|
||||
$radio-success: $success !default;
|
||||
$radio-info: $info !default;
|
||||
$radio-warning: $warning !default;
|
||||
$radio-danger: $danger !default;
|
||||
$mdb-radio-default: $lightbg-text !default;
|
||||
$mdb-radio-primary: $brand-primary !default;
|
||||
$mdb-radio-success: $brand-success !default;
|
||||
$mdb-radio-info: $brand-info !default;
|
||||
$mdb-radio-warning: $brand-warning !default;
|
||||
$mdb-radio-danger: $brand-danger !default;
|
||||
|
||||
$input-danger: $danger !default;
|
||||
$input-default: $primary !default;
|
||||
$input-warning: $warning !default;
|
||||
$input-success: $success !default;
|
||||
$input-info: $info !default;
|
||||
$mdb-input-danger: $brand-danger !default;
|
||||
$mdb-input-default: $brand-primary !default;
|
||||
$mdb-input-warning: $brand-warning !default;
|
||||
$mdb-input-success: $brand-success !default;
|
||||
$mdb-input-info: $brand-info !default;
|
||||
|
||||
$alert-success: $success !default;
|
||||
$alert-info: $info !default;
|
||||
$alert-warning: $warning !default;
|
||||
$alert-danger: $danger !default;
|
||||
$alert-success: $brand-success !default;
|
||||
$alert-info: $brand-info !default;
|
||||
$alert-warning: $brand-warning !default;
|
||||
$alert-danger: $brand-danger !default;
|
||||
|
||||
$progress-success: $success !default;
|
||||
$progress-info: $info !default;
|
||||
$progress-warning: $warning !default;
|
||||
$progress-danger: $danger !default;
|
||||
$progress-success: $brand-success !default;
|
||||
$progress-info: $brand-info !default;
|
||||
$progress-warning: $brand-warning !default;
|
||||
$progress-danger: $brand-danger !default;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
|
|
@ -81,92 +89,88 @@ $screen-sm-min: $screen-sm !default;
|
|||
|
||||
|
||||
// Global Material variables
|
||||
$material-border-radius: 2px !default;
|
||||
$mdb-border-radius: 2px !default;
|
||||
|
||||
// --------------------
|
||||
// inputs
|
||||
$input-placeholder-color: #BDBDBD !default;
|
||||
$label-floating-size-ratio: 75 / 100 !default;
|
||||
$help-block-size-ratio: 75 / 100 !default;
|
||||
$input-underline-color: #D2D2D2 !default;
|
||||
$mdb-input-placeholder-color: #BDBDBD !default;
|
||||
$mdb-input-underline-color: #D2D2D2 !default;
|
||||
$mdb-label-static-size-ratio: 75 / 100 !default;
|
||||
$mdb-help-block-size-ratio: 75 / 100 !default;
|
||||
|
||||
$md-input-font-size-base: 16px !default;
|
||||
$md-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
|
||||
|
||||
// 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;
|
||||
$mdb-input-font-size-base: 16px !default;
|
||||
$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
|
||||
$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
|
||||
|
||||
// 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.
|
||||
$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.
|
||||
$md-input-line-height-computed: floor(($md-input-font-size-base * $md-input-line-height-base)) !default; // ~20px
|
||||
$md-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-computed: floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
|
||||
$mdb-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
|
||||
$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).
|
||||
$md-input-padding-base-vertical: 8px - 1px !default; // was 6.
|
||||
$md-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
|
||||
$md-label-top-margin-base: 16px !default;
|
||||
$mdb-input-padding-base-vertical: 8px - 1px !default; // was 6.
|
||||
$mdb-input-padding-base-horizontal: 0px !default; // was 12.
|
||||
$mdb-label-as-placeholder-shim-base: 0px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-base: 16px !default;
|
||||
|
||||
$md-input-padding-large-vertical: 10px - 1px !default; // 10
|
||||
$md-input-padding-large-horizontal: 0px !default; // 16
|
||||
$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-large: 16px !default;
|
||||
$mdb-input-padding-large-vertical: 10px - 1px !default; // 10
|
||||
$mdb-input-padding-large-horizontal: 0px !default; // 16
|
||||
$mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-large: 16px !default;
|
||||
|
||||
$md-input-padding-small-vertical: 4px - 1px !default; // 5
|
||||
$md-input-padding-small-horizontal: 0px !default; // 10
|
||||
$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-small: 12px !default;
|
||||
$mdb-input-padding-small-vertical: 4px - 1px !default; // 5
|
||||
$mdb-input-padding-small-horizontal: 0px !default; // 10
|
||||
$mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-small: 12px !default;
|
||||
|
||||
$md-input-padding-xs-vertical: 2px !default; // 1
|
||||
$md-input-padding-xs-horizontal: 0px !default; // 5
|
||||
$mdb-input-padding-xs-vertical: 2px !default; // 1
|
||||
$mdb-input-padding-xs-horizontal: 0px !default; // 5
|
||||
|
||||
$md-input-border-radius-base: 4px !default;
|
||||
$md-input-border-radius-large: 6px !default;
|
||||
$md-input-border-radius-small: 3px !default;
|
||||
$mdb-input-border-radius-base: 4px !default;
|
||||
$mdb-input-border-radius-large: 6px !default;
|
||||
$mdb-input-border-radius-small: 3px !default;
|
||||
|
||||
|
||||
//** 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
|
||||
$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
|
||||
$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-body-text: $lightbg-text !default;
|
||||
$card-body-background: #fff !default;
|
||||
$card-image-headline: #fff !default;
|
||||
$mdb-card-body-text: $lightbg-text !default;
|
||||
$mdb-card-body-background: #fff !default;
|
||||
$mdb-card-image-headline: #fff !default;
|
||||
|
||||
$text-disabled: #a8a8a8 !default;
|
||||
$background-disabled: #eaeaea !default;
|
||||
|
||||
// Checkboxes
|
||||
$checkbox-size: 20px !default;
|
||||
$checkbox-animation-ripple: 500ms !default;
|
||||
$checkbox-animation-check: 0.3s !default;
|
||||
$checkbox-checked-color: #4caf50 !default;
|
||||
$checkbox-label-color: rgba(0, 0, 0, .54) !default;
|
||||
$checkbox-border-color: $checkbox-label-color !default;
|
||||
$mdb-checkbox-size: 20px !default;
|
||||
$mdb-checkbox-animation-ripple: 500ms !default;
|
||||
$mdb-checkbox-animation-check: 0.3s !default;
|
||||
$mdb-checkbox-checked-color: #4caf50 !default;
|
||||
$mdb-checkbox-label-color: rgba(0, 0, 0, .54) !default;
|
||||
$mdb-checkbox-border-color: $mdb-checkbox-label-color !default;
|
||||
|
||||
// Popovers and Popups
|
||||
$popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||
$popover-color: #ececec !default;
|
||||
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||
$mdb-popover-color: #ececec !default;
|
||||
|
||||
// Dropdown Menu
|
||||
$dropdown-radius: 2px !default;
|
||||
$dropdown-font-size: 16px !default;
|
||||
$mdb-dropdown-radius: 2px !default;
|
||||
$mdb-dropdown-font-size: 16px !default;
|
||||
|
||||
// Toggle
|
||||
$togglebutton-label-color: $checkbox-label-color !default;
|
||||
$mdb-toggle-label-color: $mdb-checkbox-label-color !default;
|
||||
|
||||
// Radio:
|
||||
$radio-label-color: $checkbox-label-color !default;
|
||||
$radio-border-color: $checkbox-border-color !default;
|
||||
$mdb-radio-label-color: $mdb-checkbox-label-color !default;
|
||||
$mdb-radio-border-color: $mdb-checkbox-border-color !default;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
@import '_colors';
|
||||
@import '_variables';
|
||||
@import '_mixins-fullpalette';
|
||||
@import '_icons-material-design';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
@import '_colors';
|
||||
@import '_variables';
|
||||
@import '_mixins';
|
||||
@import '_icons-material-design';
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
src: local('RobotoDraft'),
|
||||
local('RobotoDraft-Regular'),
|
||||
local('Roboto-Regular'),
|
||||
url('#{$material-font-path}/RobotoDraftRegular.woff2') format('woff2'),
|
||||
url('#{$material-font-path}/RobotoDraftRegular.woff') format('woff');
|
||||
url('#{$mdb-font-path}/RobotoDraftRegular.woff2') format('woff2'),
|
||||
url('#{$mdb-font-path}/RobotoDraftRegular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
src: local('RobotoDraft Medium'),
|
||||
local('RobotoDraft-Medium'),
|
||||
local('Roboto-Medium'),
|
||||
url('#{$material-font-path}/RobotoDraftMedium.woff2') format('woff2'),
|
||||
url('#{$material-font-path}/RobotoDraftMedium.woff') format('woff');
|
||||
url('#{$mdb-font-path}/RobotoDraftMedium.woff2') format('woff2'),
|
||||
url('#{$mdb-font-path}/RobotoDraftMedium.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
src: local('RobotoDraft Bold'),
|
||||
local('RobotoDraft-Bold'),
|
||||
local('Roboto-Bold'),
|
||||
url('#{$material-font-path}/RobotoDraftBold.woff2') format('woff2'),
|
||||
url('#{$material-font-path}/RobotoDraftBold.woff') format('woff');
|
||||
url('#{$mdb-font-path}/RobotoDraftBold.woff2') format('woff2'),
|
||||
url('#{$mdb-font-path}/RobotoDraftBold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
src: local('RobotoDraft Italic'),
|
||||
local('RobotoDraft-Italic'),
|
||||
local('Roboto-Italic'),
|
||||
url('#{$material-font-path}/RobotoDraftItalic.woff2') format('woff2'),
|
||||
url('#{$material-font-path}/RobotoDraftItalic.woff') format('woff');
|
||||
url('#{$mdb-font-path}/RobotoDraftItalic.woff2') format('woff2'),
|
||||
url('#{$mdb-font-path}/RobotoDraftItalic.woff') format('woff');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user