mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-30 13:33:43 +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: [{ files: [{
expand: true, expand: true,
cwd: 'less', cwd: 'less',
src: ['*.less', '!_mixins.less'], src: ['*.less', '!_mixins.less', '!_mixins-fullpalette.less'],
ext: '.scss', ext: '.scss',
dest: 'sass' dest: 'sass'
}] }]

85
sass/_mixins-fullpalette.scss
View File

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

21
sass/_mixins.scss
View File

@ -107,18 +107,27 @@
@mixin generic-variations-factory($material-color-name){ @mixin generic-variations-factory($material-color-name){
// given a color and its deph build css // 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-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; $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
@content @content
} }
}
@include generic-variations-factory-deep(unquote(""));
} }
@include generic-variations-factory(unquote("red")); @include generic-variations-factory(unquote("red"));