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:
Kevin Ross 2015-11-05 10:56:14 -06:00
parent a22c4243a7
commit 8d108312cd
13 changed files with 157 additions and 28603 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 {

View File

@ -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)

View File

@ -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
View 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';

View File

@ -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)
// }
//}
} }

View File

@ -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)

View File

@ -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';