mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-13 13:17:03 +03:00
fixed color palette. Sass has no way of 1. obtaining a declared variable by a string, and 2. getting a Color object from a string (required for functions such as darken)
This commit is contained in:
parent
057f55cbf7
commit
c9bc2e623b
|
@ -2,17 +2,24 @@
|
||||||
|
|
||||||
@mixin generic-variations-colors($args) {
|
@mixin generic-variations-colors($args) {
|
||||||
|
|
||||||
|
// 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";
|
$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 {
|
@each $material-color-name in $material-color-names {
|
||||||
// given a color build multiples depths
|
// given a color build multiples depths
|
||||||
$material-color-numbers: "" "-50" "-100" "-200" "-300" "-400" "-500" "-600" "-700" "-800" "-900" "-A100" "-A200" "-A400" "-A700";
|
$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 {
|
@each $material-color-number in $material-color-numbers {
|
||||||
|
|
||||||
$args: map-merge($args, (
|
$args-variation-color: map-merge($args, (
|
||||||
|
material-color-name: $material-color-name,
|
||||||
material-color-number: $material-color-number
|
material-color-number: $material-color-number
|
||||||
));
|
));
|
||||||
|
|
||||||
@include generic-variations-color($args)
|
// 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.
|
||||||
|
// FIXME: http://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables
|
||||||
|
|
||||||
|
// FIXME: this shows a valid approach and adds a color function: https://github.com/darrenkopp/libsass-net/issues/12
|
||||||
|
@include generic-variations-color($args-variation-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,15 +36,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-variations-content($args) {
|
@mixin button-variations-content($args) {
|
||||||
|
//@debug "#{inspect($args)}";
|
||||||
@debug "#{inspect($args)}";
|
|
||||||
|
|
||||||
$material-color: map-get($args, material-color);
|
$material-color: map-get($args, material-color);
|
||||||
$material-param-1: map-get($args, material-param-1);
|
$material-param-1: map-get($args, material-param-1);
|
||||||
$contrast-factor: map-get($args, contrast-factor);
|
$contrast-factor: map-get($args, contrast-factor);
|
||||||
background-color: contrast($material-color, darken($material-color, $material-param-1), lighten($material-color, $material-param-1), $contrast-factor);
|
background-color: contrast($material-color,
|
||||||
|
darken($material-color, $material-param-1),
|
||||||
//@error "break here";
|
lighten($material-color, $material-param-1),
|
||||||
|
$contrast-factor);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin bg-color-variations($extra, $default, $material-param-1) {
|
@mixin bg-color-variations($extra, $default, $material-param-1) {
|
||||||
|
@ -73,8 +72,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// To use this mixin you should pass a function as final parameter to define
|
// To use this mixin you should pass a function as final parameter to define
|
||||||
// the style. In that definition you can use the following variables to define it.
|
// the style. In that definition you can use the following variables to define it.
|
||||||
|
@ -188,13 +185,14 @@
|
||||||
$material-color-name: map-get($args, material-color-name);
|
$material-color-name: map-get($args, material-color-name);
|
||||||
$material-color-number: map-get($args, material-color-number);
|
$material-color-number: map-get($args, material-color-number);
|
||||||
$material-color-full-name: "#{$material-color-name}#{$material-color-number}";
|
$material-color-full-name: "#{$material-color-name}#{$material-color-number}";
|
||||||
$material-color: $material-color-full-name;
|
$material-color: map-get($args, material-color); // $material-color-full-name;
|
||||||
|
$material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, map-get($args, contrast-factor));
|
||||||
|
|
||||||
& -material-#{$material-color-name}#{unquote($material-color-number)}#{map-get($args, extra)} {
|
& -material-#{$material-color-name}#{unquote($material-color-number)}#{map-get($args, extra)} {
|
||||||
$args-color: map-merge($args, (
|
$args-color: map-merge($args, (
|
||||||
material-color-full-name: $material-color-full-name,
|
material-color-full-name: $material-color-full-name,
|
||||||
material-color: $material-color,
|
material-color: $material-color,
|
||||||
material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, map-get($args, contrast-factor)),
|
material-text-color: $material-text-color,
|
||||||
));
|
));
|
||||||
|
|
||||||
@include call-variations-content-mixin($args-color);
|
@include call-variations-content-mixin($args-color);
|
||||||
|
|
|
@ -2,19 +2,58 @@
|
||||||
|
|
||||||
@mixin generic-variations-colors($args) {
|
@mixin generic-variations-colors($args) {
|
||||||
|
|
||||||
$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";
|
//$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 {
|
|
||||||
// @include generic-variations-color($mixin-name, $extra, $default, $contrast-factor, $material-color-name, $material-color-number)
|
|
||||||
//}
|
|
||||||
|
|
||||||
|
$material-colors: (
|
||||||
|
"red": $red,
|
||||||
|
"pink": $pink,
|
||||||
|
"purple": $purple,
|
||||||
|
"deep-purple": $deep-purple,
|
||||||
|
"indigo": $indigo,
|
||||||
|
"blue": $blue,
|
||||||
|
"light-blue": $light-blue,
|
||||||
|
"cyan": $cyan,
|
||||||
|
"teal": $teal,
|
||||||
|
"green": $green,
|
||||||
|
"light-green": $light-green,
|
||||||
|
"lime": $lime,
|
||||||
|
"yellow": $yellow,
|
||||||
|
"amber": $amber,
|
||||||
|
"orange": $orange,
|
||||||
|
"deep-orange": $deep-orange,
|
||||||
|
"brown": $brown,
|
||||||
|
"grey": $grey,
|
||||||
|
"blue-grey": $blue-grey
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $material-color-name, $material-color in $material-colors {
|
||||||
// build a single depth color palette
|
// build a single depth color palette
|
||||||
$args: map-merge($args, (
|
$args-variation-color: map-merge($args, (
|
||||||
|
material-color-name: $material-color-name,
|
||||||
|
material-color: $material-color,
|
||||||
material-color-number: ""
|
material-color-number: ""
|
||||||
));
|
));
|
||||||
|
|
||||||
@include generic-variations-color($args)
|
@include generic-variations-color($args-variation-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//@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 {
|
||||||
|
// // @include generic-variations-color($mixin-name, $extra, $default, $contrast-factor, $material-color-name, $material-color-number)
|
||||||
|
// //}
|
||||||
|
//
|
||||||
|
// // build a single depth color palette
|
||||||
|
// $args-variation-color: map-merge($args, (
|
||||||
|
// material-color-name: $material-color-name,
|
||||||
|
// material-color-number: ""
|
||||||
|
// ));
|
||||||
|
//
|
||||||
|
// @include generic-variations-color($args-variation-color)
|
||||||
|
//}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// http://hugogiraudel.com/2014/01/27/casting-types-in-sass/
|
||||||
|
// https://github.com/HugoGiraudel/SassyJSON/blob/master/stylesheets/decode/helpers/color/_color.scss
|
||||||
|
|
Loading…
Reference in New Issue
Block a user