mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
sass is inclusion order dependent. In order to get the full-palette vs standard-palette, it required a separation of the content in material.less into _material.less to separate dependencies vs content.
This commit is contained in:
parent
a22c4243a7
commit
8d108312cd
28298
dist/css/material-fullpalette.css
vendored
28298
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
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.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
@ -1,9 +1,3 @@
|
||||||
@import "_colors.less";
|
|
||||||
@import "_variables.less";
|
|
||||||
@import "_mixins.less";
|
|
||||||
@import "_icons-material-design.less";
|
|
||||||
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: @body-bg;
|
background-color: @body-bg;
|
||||||
&.inverse {
|
&.inverse {
|
||||||
|
|
|
@ -1,2 +1,6 @@
|
||||||
@import "material.less";
|
@import "_colors.less";
|
||||||
|
@import "_variables.less";
|
||||||
@import "_mixins-fullpalette.less";
|
@import "_mixins-fullpalette.less";
|
||||||
|
@import "_icons-material-design.less";
|
||||||
|
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
||||||
|
@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
|
||||||
|
|
|
@ -2,138 +2,5 @@
|
||||||
@import "_variables.less";
|
@import "_variables.less";
|
||||||
@import "_mixins.less";
|
@import "_mixins.less";
|
||||||
@import "_icons-material-design.less";
|
@import "_icons-material-design.less";
|
||||||
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
||||||
|
@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
|
||||||
body {
|
|
||||||
background-color: @body-bg;
|
|
||||||
&.inverse {
|
|
||||||
background: #333333;
|
|
||||||
&, .form-control {
|
|
||||||
color: @darkbg-text;
|
|
||||||
}
|
|
||||||
.modal,
|
|
||||||
.panel-default,
|
|
||||||
.card {
|
|
||||||
&,
|
|
||||||
.form-control {
|
|
||||||
background-color: initial;
|
|
||||||
color: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
|
||||||
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5, h6{
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:hover, a:focus {
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Well and Jumbotrons
|
|
||||||
@import "_welljumbo.less";
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
@import "_buttons.less";
|
|
||||||
|
|
||||||
// Checkboxes
|
|
||||||
@import "_checkboxes.less";
|
|
||||||
|
|
||||||
// Toggle buttons
|
|
||||||
@import "_togglebutton.less";
|
|
||||||
|
|
||||||
// Radios
|
|
||||||
@import "_radios.less";
|
|
||||||
|
|
||||||
// Text inputs
|
|
||||||
@import "_inputs.less";
|
|
||||||
|
|
||||||
legend {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lists
|
|
||||||
@import "_lists.less";
|
|
||||||
|
|
||||||
// Navbar
|
|
||||||
@import "_navbar.less";
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
.divider {
|
|
||||||
background-color: rgba(229, 229, 229, 0.12);
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
a:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.variations(~" li a:hover", color, @primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Alerts
|
|
||||||
@import "_alerts.less";
|
|
||||||
|
|
||||||
// Progress bar
|
|
||||||
@import "_progress.less";
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
.text-warning {
|
|
||||||
color: @btn-warning;
|
|
||||||
}
|
|
||||||
.text-primary {
|
|
||||||
color: @btn-primary;
|
|
||||||
}
|
|
||||||
.text-danger {
|
|
||||||
color: @btn-danger;
|
|
||||||
}
|
|
||||||
.text-success {
|
|
||||||
color: @btn-success;
|
|
||||||
}
|
|
||||||
.text-info {
|
|
||||||
color: @btn-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import "_tabs.less";
|
|
||||||
|
|
||||||
@import "_popups.less";
|
|
||||||
|
|
||||||
@import "_icons.less";
|
|
||||||
|
|
||||||
@import "_cards.less";
|
|
||||||
|
|
||||||
@import "_dialogs.less";
|
|
||||||
|
|
||||||
@import "_labels.less";
|
|
||||||
|
|
||||||
@import "_panels.less";
|
|
||||||
|
|
||||||
@import "_dividers.less";
|
|
||||||
|
|
||||||
// Prevent highlight on mobile
|
|
||||||
* {
|
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// External plugins
|
|
||||||
@import "_plugin-snackbarjs.less";
|
|
||||||
@import "_plugin-nouislider.less";
|
|
||||||
@import "_plugin-selectize.less";
|
|
||||||
@import "_plugin-dropdownjs.less";
|
|
||||||
|
|
135
sass/_material.scss
Normal file
135
sass/_material.scss
Normal file
|
@ -0,0 +1,135 @@
|
||||||
|
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $body-bg;
|
||||||
|
&.inverse {
|
||||||
|
background: #333333;
|
||||||
|
&, .form-control {
|
||||||
|
color: $darkbg-text;
|
||||||
|
}
|
||||||
|
.modal,
|
||||||
|
.panel-default,
|
||||||
|
.card {
|
||||||
|
&,
|
||||||
|
.form-control {
|
||||||
|
background-color: initial;
|
||||||
|
color: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||||
|
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5, h6{
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:hover, a:focus {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Well and Jumbotrons
|
||||||
|
@import '_welljumbo';
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
@import '_buttons';
|
||||||
|
|
||||||
|
// Checkboxes
|
||||||
|
@import '_checkboxes';
|
||||||
|
|
||||||
|
// Toggle buttons
|
||||||
|
@import '_togglebutton';
|
||||||
|
|
||||||
|
// Radios
|
||||||
|
@import '_radios';
|
||||||
|
|
||||||
|
// Text inputs
|
||||||
|
@import '_inputs';
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lists
|
||||||
|
@import '_lists';
|
||||||
|
|
||||||
|
// Navbar
|
||||||
|
@import '_navbar';
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||||
|
.divider {
|
||||||
|
background-color: rgba(229, 229, 229, 0.12);
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
a:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include variations(unquote(" li a:hover"), color, $primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
@import '_alerts';
|
||||||
|
|
||||||
|
// Progress bar
|
||||||
|
@import '_progress';
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
.text-warning {
|
||||||
|
color: $btn-warning;
|
||||||
|
}
|
||||||
|
.text-primary {
|
||||||
|
color: $btn-primary;
|
||||||
|
}
|
||||||
|
.text-danger {
|
||||||
|
color: $btn-danger;
|
||||||
|
}
|
||||||
|
.text-success {
|
||||||
|
color: $btn-success;
|
||||||
|
}
|
||||||
|
.text-info {
|
||||||
|
color: $btn-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import '_tabs';
|
||||||
|
|
||||||
|
@import '_popups';
|
||||||
|
|
||||||
|
@import '_icons';
|
||||||
|
|
||||||
|
@import '_cards';
|
||||||
|
|
||||||
|
@import '_dialogs';
|
||||||
|
|
||||||
|
@import '_labels';
|
||||||
|
|
||||||
|
@import '_panels';
|
||||||
|
|
||||||
|
@import '_dividers';
|
||||||
|
|
||||||
|
// Prevent highlight on mobile
|
||||||
|
* {
|
||||||
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// External plugins
|
||||||
|
@import '_plugin-snackbarjs';
|
||||||
|
@import '_plugin-nouislider';
|
||||||
|
@import '_plugin-selectize';
|
||||||
|
@import '_plugin-dropdownjs';
|
|
@ -3,6 +3,8 @@
|
||||||
|
|
||||||
@mixin generic-variations-colors($args) {
|
@mixin generic-variations-colors($args) {
|
||||||
|
|
||||||
|
//@debug "multi-palette generic-variations-colors called with #{inspect($args)}";
|
||||||
|
|
||||||
$material-colors: (
|
$material-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"),
|
||||||
|
@ -299,28 +301,7 @@
|
||||||
material-color-number: map-get($color-attributes, number)
|
material-color-number: map-get($color-attributes, number)
|
||||||
));
|
));
|
||||||
|
|
||||||
|
//@debug "generic-variations-color #{map-get($color-attributes, name)} #{map-get($color-attributes, color)} #{map-get($color-attributes, number)}";
|
||||||
@include generic-variations-color($args-variation-color)
|
@include generic-variations-color($args-variation-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
//// FIXME: see _mixins.scss regarding variable names and the below FIXME
|
|
||||||
//$material-color-names: "red" "pink" "purple" "deep-purple" "indigo" "blue" "light-blue" "cyan" "teal" "green" "light-green" "lime" "yellow" "amber" "orange" "deep-orange" "brown" "grey" "blue-grey";
|
|
||||||
//@each $material-color-name in $material-color-names {
|
|
||||||
// // given a color build multiples depths
|
|
||||||
// $material-color-numbers: "" "-50" "-100" "-200" "-300" "-400" "-500" "-600" "-700" "-800" "-900" "-A100" "-A200" "-A400" "-A700";
|
|
||||||
// @each $material-color-number in $material-color-numbers {
|
|
||||||
//
|
|
||||||
// $args-variation-color: map-merge($args, (
|
|
||||||
// material-color-name: $material-color-name,
|
|
||||||
// material-color-number: $material-color-number
|
|
||||||
// ));
|
|
||||||
//
|
|
||||||
// // FIXME: these colors are defined in _colors.scss. Since there is no way to access a variable as a string
|
|
||||||
// // FIXME: in sass, this needs to be changed to get a permutation as an actual variable object.
|
|
||||||
// // FIXME: http://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables
|
|
||||||
//
|
|
||||||
// // FIXME: The following shows a valid approach and adds a color lookup function from a map, but would require changes in the less files:
|
|
||||||
// // FIXME: https://github.com/darrenkopp/libsass-net/issues/12
|
|
||||||
// @include generic-variations-color($args-variation-color)
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,8 @@
|
||||||
// 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 'material';
|
@import '_colors';
|
||||||
|
@import '_variables';
|
||||||
@import '_mixins-fullpalette';
|
@import '_mixins-fullpalette';
|
||||||
|
@import '_icons-material-design';
|
||||||
|
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
||||||
|
@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
|
||||||
|
|
|
@ -4,138 +4,5 @@
|
||||||
@import '_variables';
|
@import '_variables';
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
@import '_icons-material-design';
|
@import '_icons-material-design';
|
||||||
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
|
||||||
|
@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
|
||||||
body {
|
|
||||||
background-color: $body-bg;
|
|
||||||
&.inverse {
|
|
||||||
background: #333333;
|
|
||||||
&, .form-control {
|
|
||||||
color: $darkbg-text;
|
|
||||||
}
|
|
||||||
.modal,
|
|
||||||
.panel-default,
|
|
||||||
.card {
|
|
||||||
&,
|
|
||||||
.form-control {
|
|
||||||
background-color: initial;
|
|
||||||
color: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
|
||||||
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5, h6{
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:hover, a:focus {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Well and Jumbotrons
|
|
||||||
@import '_welljumbo';
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
@import '_buttons';
|
|
||||||
|
|
||||||
// Checkboxes
|
|
||||||
@import '_checkboxes';
|
|
||||||
|
|
||||||
// Toggle buttons
|
|
||||||
@import '_togglebutton';
|
|
||||||
|
|
||||||
// Radios
|
|
||||||
@import '_radios';
|
|
||||||
|
|
||||||
// Text inputs
|
|
||||||
@import '_inputs';
|
|
||||||
|
|
||||||
legend {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lists
|
|
||||||
@import '_lists';
|
|
||||||
|
|
||||||
// Navbar
|
|
||||||
@import '_navbar';
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
.divider {
|
|
||||||
background-color: rgba(229, 229, 229, 0.12);
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
a:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include variations(unquote(" li a:hover"), color, $primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Alerts
|
|
||||||
@import '_alerts';
|
|
||||||
|
|
||||||
// Progress bar
|
|
||||||
@import '_progress';
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
.text-warning {
|
|
||||||
color: $btn-warning;
|
|
||||||
}
|
|
||||||
.text-primary {
|
|
||||||
color: $btn-primary;
|
|
||||||
}
|
|
||||||
.text-danger {
|
|
||||||
color: $btn-danger;
|
|
||||||
}
|
|
||||||
.text-success {
|
|
||||||
color: $btn-success;
|
|
||||||
}
|
|
||||||
.text-info {
|
|
||||||
color: $btn-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import '_tabs';
|
|
||||||
|
|
||||||
@import '_popups';
|
|
||||||
|
|
||||||
@import '_icons';
|
|
||||||
|
|
||||||
@import '_cards';
|
|
||||||
|
|
||||||
@import '_dialogs';
|
|
||||||
|
|
||||||
@import '_labels';
|
|
||||||
|
|
||||||
@import '_panels';
|
|
||||||
|
|
||||||
@import '_dividers';
|
|
||||||
|
|
||||||
// Prevent highlight on mobile
|
|
||||||
* {
|
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// External plugins
|
|
||||||
@import '_plugin-snackbarjs';
|
|
||||||
@import '_plugin-nouislider';
|
|
||||||
@import '_plugin-selectize';
|
|
||||||
@import '_plugin-dropdownjs';
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user