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

converting nested mixins to a list generated approach

Browse Source
This commit is contained in:
Kevin Ross 2015-11-02 18:29:40 -06:00
parent 86321236c1
commit 46aae1da8a
3 changed files with 67 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -11,7 +11,7 @@ module.exports = function(grunt) {
files: [{
expand: true,
cwd: 'less',
src: ['*.less', '!_mixins.less'],
src: ['*.less', '!_mixins.less', '!_mixins-fullpalette.less'],
ext: '.scss',
dest: 'sass'
}]

85
sass/_mixins-fullpalette.scss
View File

@ -1,12 +1,12 @@
// usage: @include variations(unquote(" .check"), color, transparent);
@mixin variations($extra, $property, $default){
.generic-variations($extra, $default, {
@include generic-variations($extra, $default) {
#{$property}: $material-color !default;
});
};
}
@mixin background-variations($extra, $default){
.generic-variations($extra, $default, {
@include generic-variations($extra, $default) {
background-color: $material-color;
& when ($material-color = $btn-default) {
color: $lightbg-text;
@ -14,13 +14,13 @@
& when not ($material-color = $btn-default) {
color: $material-text-color;
}
});
};
}
@mixin text-variations($extra, $default){
.generic-variations($extra, $default, {
@include generic-variations($extra, $default) {
color: $material-color;
});
};
}
//
@ -33,7 +33,7 @@
// $material-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, $func){
@mixin generic-variations($extra, $default){
$contrast-factor: 40% !default;
@ -43,95 +43,104 @@
$material-color-full-name: $material-color-name !default;
$material-color: $default !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
&-black#{$extra} {
$material-color-name: "black" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $black !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
&-white#{$extra} {
$material-color-name: "white" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $white !default;
$material-text-color: $lightbg-text !default;
$func();
@content
}
&-inverse#{$extra} {
$material-color-name: "inverse" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $inverse !default;
$material-text-color: contrast($inverse, $lightbg-text, $darkbg-text, $contrast-factor) !default;
$func();
@content
}
&-primary#{$extra} {
$material-color-name: "primary" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $primary !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
&-success#{$extra} {
$material-color-name: "success" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $success !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
&-info#{$extra} {
$material-color-name: "info" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $info !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
&-warning#{$extra} {
$material-color-name: "warning" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $warning !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
&-danger#{$extra} {
$material-color-name: "danger" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $danger !default;
$material-text-color: $darkbg-text !default;
$func();
@content
}
// given a color build multiples dephs
@mixin generic-variations-factory($material-color-name){
// given a color and its deph build css
@mixin generic-variations-factory-deep($material-color-number){
//@mixin generic-variations-factory-deep($material-color-number){
//
// &-material-#{$material-color-name}#{$material-color-number}#{$extra} {
// $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
// $material-color: $material-color-full-name !default;
// $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
// @content
// }
//
//}
//
//@include generic-variations-factory-deep(unquote(""));
//@include generic-variations-factory-deep(unquote("-50"));
//@include generic-variations-factory-deep(unquote("-100"));
//@include generic-variations-factory-deep(unquote("-200"));
//@include generic-variations-factory-deep(unquote("-300"));
//@include generic-variations-factory-deep(unquote("-400"));
//@include generic-variations-factory-deep(unquote("-500"));
//@include generic-variations-factory-deep(unquote("-600"));
//@include generic-variations-factory-deep(unquote("-700"));
//@include generic-variations-factory-deep(unquote("-800"));
//@include generic-variations-factory-deep(unquote("-900"));
//@include generic-variations-factory-deep(unquote("-A100"));
//@include generic-variations-factory-deep(unquote("-A200"));
//@include generic-variations-factory-deep(unquote("-A400"));
//@include generic-variations-factory-deep(unquote("-A700"));
&-material-#{$material-color-name}#{$material-color-number}#{$extra} {
$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
&-material-#{$material-color-name}#{unquote($material-color-number)}#{$extra} {
$material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
$material-color: $$material-color-full-name !default;
$material-color: $material-color-full-name !default;
$material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
$func();
@content
}
}
@include generic-variations-factory-deep(unquote(""));
@include generic-variations-factory-deep(unquote("-50"));
@include generic-variations-factory-deep(unquote("-100"));
@include generic-variations-factory-deep(unquote("-200"));
@include generic-variations-factory-deep(unquote("-300"));
@include generic-variations-factory-deep(unquote("-400"));
@include generic-variations-factory-deep(unquote("-500"));
@include generic-variations-factory-deep(unquote("-600"));
@include generic-variations-factory-deep(unquote("-700"));
@include generic-variations-factory-deep(unquote("-800"));
@include generic-variations-factory-deep(unquote("-900"));
@include generic-variations-factory-deep(unquote("-A100"));
@include generic-variations-factory-deep(unquote("-A200"));
@include generic-variations-factory-deep(unquote("-A400"));
@include generic-variations-factory-deep(unquote("-A700"));
}
@include generic-variations-factory(unquote("red"));

21
sass/_mixins.scss
View File

@ -107,18 +107,27 @@
@mixin generic-variations-factory($material-color-name){
// given a color and its deph build css
@mixin generic-variations-factory-deep($material-color-number){
//@mixin generic-variations-factory-deep($material-color-number){
//
// &-material-#{$material-color-name}#{$material-color-number}#{$extra} {
// $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
// $material-color: $material-color-full-name !default;
// $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
// @content
// }
//
//}
//
//@include generic-variations-factory-deep(unquote(""));
&-material-#{$material-color-name}#{$material-color-number}#{$extra} {
$material-color-numbers: "";
@each $material-color-number in $material-color-numbers
&-material-#{$material-color-name}#{unquote($material-color-number)}#{$extra} {
$material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
$material-color: $material-color-full-name !default;
$material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
@content
}
}
@include generic-variations-factory-deep(unquote(""));
}
@include generic-variations-factory(unquote("red"));