mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-14 21:57:12 +03:00
new generic mixin
This commit is contained in:
Korgan
parent
fa00e02134
commit
224eab6110
|
|
@ -1,239 +1,145 @@
|
||||||
// usage: .variations(~" .check", color, transparent);
|
// usage: .variations(~" .check", color, transparent);
|
||||||
.variations(@extra, @property, @default) {
|
.variations(@extra, @property, @default) {
|
||||||
|
.generic-variations(@extra, @default, {
|
||||||
// Bootstrap shades
|
@{property}: @material-color;
|
||||||
&@{extra}, &-default@{extra} {
|
});
|
||||||
@{property}: @default;
|
|
||||||
}
|
|
||||||
&-primary@{extra} {
|
|
||||||
@{property}: @primary;
|
|
||||||
}
|
|
||||||
&-success@{extra} {
|
|
||||||
@{property}: @success;
|
|
||||||
}
|
|
||||||
&-info@{extra} {
|
|
||||||
@{property}: @info;
|
|
||||||
}
|
|
||||||
&-warning@{extra} {
|
|
||||||
@{property}: @warning;
|
|
||||||
}
|
|
||||||
&-danger@{extra} {
|
|
||||||
@{property}: @danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.variations-factory(@material-color) {
|
|
||||||
.variations-factory-deep(@material-color-number) {
|
|
||||||
|
|
||||||
&-material-@{material-color}@{material-color-number}@{extra} {
|
|
||||||
@final-color: "@{material-color}@{material-color-number}";
|
|
||||||
@{property}: @@final-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.variations-factory-deep(~"");
|
|
||||||
.variations-factory-deep(~"-50");
|
|
||||||
.variations-factory-deep(~"-100");
|
|
||||||
.variations-factory-deep(~"-200");
|
|
||||||
.variations-factory-deep(~"-300");
|
|
||||||
.variations-factory-deep(~"-400");
|
|
||||||
.variations-factory-deep(~"-500");
|
|
||||||
.variations-factory-deep(~"-600");
|
|
||||||
.variations-factory-deep(~"-700");
|
|
||||||
.variations-factory-deep(~"-800");
|
|
||||||
.variations-factory-deep(~"-900");
|
|
||||||
.variations-factory-deep(~"-A100");
|
|
||||||
.variations-factory-deep(~"-A200");
|
|
||||||
.variations-factory-deep(~"-A400");
|
|
||||||
.variations-factory-deep(~"-A700");
|
|
||||||
}
|
|
||||||
.variations-factory(~"red");
|
|
||||||
.variations-factory(~"pink");
|
|
||||||
.variations-factory(~"purple");
|
|
||||||
.variations-factory(~"deep-purple");
|
|
||||||
.variations-factory(~"indigo");
|
|
||||||
.variations-factory(~"blue");
|
|
||||||
.variations-factory(~"light-blue");
|
|
||||||
.variations-factory(~"cyan");
|
|
||||||
.variations-factory(~"teal");
|
|
||||||
.variations-factory(~"green");
|
|
||||||
.variations-factory(~"light-green");
|
|
||||||
.variations-factory(~"lime");
|
|
||||||
.variations-factory(~"yellow");
|
|
||||||
.variations-factory(~"amber");
|
|
||||||
.variations-factory(~"orange");
|
|
||||||
.variations-factory(~"deep-orange");
|
|
||||||
.variations-factory(~"brown");
|
|
||||||
.variations-factory(~"grey");
|
|
||||||
.variations-factory(~"blue-grey");
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-variations(@extra, @default) {
|
.background-variations(@extra, @default) {
|
||||||
|
.generic-variations(@extra, @default, {
|
||||||
@contrast-factor: 40%;
|
background-color: @material-color;
|
||||||
|
color: @text-color;
|
||||||
.set-background-and-font-color(@bg-color) {
|
});
|
||||||
background-color: @bg-color;
|
|
||||||
|
|
||||||
color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
|
|
||||||
& when (@bg-color = @btn-default) {
|
|
||||||
color: @lightbg-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// bootstrap styles
|
|
||||||
&@{extra}, &-default@{extra} {
|
|
||||||
.set-background-and-font-color(@default);
|
|
||||||
}
|
|
||||||
&-primary@{extra} {
|
|
||||||
.set-background-and-font-color(@primary);
|
|
||||||
}
|
|
||||||
&-success@{extra} {
|
|
||||||
.set-background-and-font-color(@success);
|
|
||||||
}
|
|
||||||
&-info@{extra} {
|
|
||||||
.set-background-and-font-color(@info);
|
|
||||||
}
|
|
||||||
&-warning@{extra} {
|
|
||||||
.set-background-and-font-color(@warning);
|
|
||||||
}
|
|
||||||
&-danger@{extra} {
|
|
||||||
.set-background-and-font-color(@danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
// given a color build multiples dephs
|
|
||||||
.background-variations-factory(@material-color) {
|
|
||||||
|
|
||||||
// given a color and its deph build css
|
|
||||||
.background-variations-factory-deep(@material-color-number) {
|
|
||||||
|
|
||||||
&-material-@{material-color}@{material-color-number}@{extra} {
|
|
||||||
@final-background-color: "@{material-color}@{material-color-number}";
|
|
||||||
.set-background-and-font-color(@@final-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-variations-factory-deep(~"");
|
|
||||||
.background-variations-factory-deep(~"-50");
|
|
||||||
.background-variations-factory-deep(~"-100");
|
|
||||||
.background-variations-factory-deep(~"-200");
|
|
||||||
.background-variations-factory-deep(~"-300");
|
|
||||||
.background-variations-factory-deep(~"-400");
|
|
||||||
.background-variations-factory-deep(~"-500");
|
|
||||||
.background-variations-factory-deep(~"-600");
|
|
||||||
.background-variations-factory-deep(~"-700");
|
|
||||||
.background-variations-factory-deep(~"-800");
|
|
||||||
.background-variations-factory-deep(~"-900");
|
|
||||||
.background-variations-factory-deep(~"-A100");
|
|
||||||
.background-variations-factory-deep(~"-A200");
|
|
||||||
.background-variations-factory-deep(~"-A400");
|
|
||||||
.background-variations-factory-deep(~"-A700");
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-variations-factory(~"red");
|
|
||||||
.background-variations-factory(~"pink");
|
|
||||||
.background-variations-factory(~"purple");
|
|
||||||
.background-variations-factory(~"deep-purple");
|
|
||||||
.background-variations-factory(~"indigo");
|
|
||||||
.background-variations-factory(~"blue");
|
|
||||||
.background-variations-factory(~"light-blue");
|
|
||||||
.background-variations-factory(~"cyan");
|
|
||||||
.background-variations-factory(~"teal");
|
|
||||||
.background-variations-factory(~"green");
|
|
||||||
.background-variations-factory(~"light-green");
|
|
||||||
.background-variations-factory(~"lime");
|
|
||||||
.background-variations-factory(~"yellow");
|
|
||||||
.background-variations-factory(~"amber");
|
|
||||||
.background-variations-factory(~"orange");
|
|
||||||
.background-variations-factory(~"deep-orange");
|
|
||||||
.background-variations-factory(~"brown");
|
|
||||||
.background-variations-factory(~"grey");
|
|
||||||
.background-variations-factory(~"blue-grey");
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-variations(@extra, @default) {
|
.text-variations(@extra, @default) {
|
||||||
|
.generic-variations(@extra, @default, {
|
||||||
|
color: @material-color;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
.generic-variations(@extra, @default, @func) {
|
||||||
|
|
||||||
@contrast-factor: 40%;
|
@contrast-factor: 40%;
|
||||||
|
|
||||||
.set-font-color(@bg-color) {
|
|
||||||
color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
|
|
||||||
}
|
|
||||||
|
|
||||||
// bootstrap styles
|
// bootstrap styles
|
||||||
&@{extra}, &-default@{extra} {
|
&@{extra}, &-default@{extra} {
|
||||||
.set-font-color(@default);
|
@material-color-name: "default";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @default;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
|
}
|
||||||
|
&-black@{extra} {
|
||||||
|
@material-color-name: "black";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @black;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
|
}
|
||||||
|
&-white@{extra} {
|
||||||
|
@material-color-name: "white";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @white;
|
||||||
|
@text-color: @lightbg-text;
|
||||||
|
@func();
|
||||||
|
}
|
||||||
|
&-inverse@{extra} {
|
||||||
|
@material-color-name: "inverse";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @inverse;
|
||||||
|
@text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
&-primary@{extra} {
|
&-primary@{extra} {
|
||||||
.set-font-color(@primary);
|
@material-color-name: "primary";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @primary;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
&-success@{extra} {
|
&-success@{extra} {
|
||||||
.set-font-color(@success);
|
@material-color-name: "success";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @success;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
&-info@{extra} {
|
&-info@{extra} {
|
||||||
.set-font-color(@info);
|
@material-color-name: "info";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @info;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
&-warning@{extra} {
|
&-warning@{extra} {
|
||||||
.set-font-color(@warning);
|
@material-color-name: "warning";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @warning;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
&-danger@{extra} {
|
&-danger@{extra} {
|
||||||
.set-font-color(@danger);
|
@material-color-name: "danger";
|
||||||
|
@material-color-full-name: @material-color-name;
|
||||||
|
@material-color: @danger;
|
||||||
|
@text-color: @darkbg-text;
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
|
|
||||||
// given a color build multiples dephs
|
// given a color build multiples dephs
|
||||||
.background-variations-factory(@material-color) {
|
.generic-variations-factory(@material-color-name) {
|
||||||
|
|
||||||
// given a color and its deph build css
|
// given a color and its deph build css
|
||||||
.background-variations-factory-deep(@material-color-number) {
|
.generic-variations-factory-deep(@material-color-number) {
|
||||||
|
|
||||||
&-material-@{material-color}@{material-color-number}@{extra} {
|
&-material-@{material-color-name}@{material-color-number}@{extra} {
|
||||||
@final-background-color: "@{material-color}@{material-color-number}";
|
@material-color-full-name: "@{material-color-name}@{material-color-number}";
|
||||||
.set-font-color(@@final-background-color);
|
@material-color: @@material-color-full-name;
|
||||||
|
@text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
|
||||||
|
@func();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-variations-factory-deep(~"");
|
.generic-variations-factory-deep(~"");
|
||||||
.background-variations-factory-deep(~"-50");
|
.generic-variations-factory-deep(~"-50");
|
||||||
.background-variations-factory-deep(~"-100");
|
.generic-variations-factory-deep(~"-100");
|
||||||
.background-variations-factory-deep(~"-200");
|
.generic-variations-factory-deep(~"-200");
|
||||||
.background-variations-factory-deep(~"-300");
|
.generic-variations-factory-deep(~"-300");
|
||||||
.background-variations-factory-deep(~"-400");
|
.generic-variations-factory-deep(~"-400");
|
||||||
.background-variations-factory-deep(~"-500");
|
.generic-variations-factory-deep(~"-500");
|
||||||
.background-variations-factory-deep(~"-600");
|
.generic-variations-factory-deep(~"-600");
|
||||||
.background-variations-factory-deep(~"-700");
|
.generic-variations-factory-deep(~"-700");
|
||||||
.background-variations-factory-deep(~"-800");
|
.generic-variations-factory-deep(~"-800");
|
||||||
.background-variations-factory-deep(~"-900");
|
.generic-variations-factory-deep(~"-900");
|
||||||
.background-variations-factory-deep(~"-A100");
|
.generic-variations-factory-deep(~"-A100");
|
||||||
.background-variations-factory-deep(~"-A200");
|
.generic-variations-factory-deep(~"-A200");
|
||||||
.background-variations-factory-deep(~"-A400");
|
.generic-variations-factory-deep(~"-A400");
|
||||||
.background-variations-factory-deep(~"-A700");
|
.generic-variations-factory-deep(~"-A700");
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-variations-factory(~"red");
|
.generic-variations-factory(~"red");
|
||||||
.background-variations-factory(~"pink");
|
.generic-variations-factory(~"pink");
|
||||||
.background-variations-factory(~"purple");
|
.generic-variations-factory(~"purple");
|
||||||
.background-variations-factory(~"deep-purple");
|
.generic-variations-factory(~"deep-purple");
|
||||||
.background-variations-factory(~"indigo");
|
.generic-variations-factory(~"indigo");
|
||||||
.background-variations-factory(~"blue");
|
.generic-variations-factory(~"blue");
|
||||||
.background-variations-factory(~"light-blue");
|
.generic-variations-factory(~"light-blue");
|
||||||
.background-variations-factory(~"cyan");
|
.generic-variations-factory(~"cyan");
|
||||||
.background-variations-factory(~"teal");
|
.generic-variations-factory(~"teal");
|
||||||
.background-variations-factory(~"green");
|
.generic-variations-factory(~"green");
|
||||||
.background-variations-factory(~"light-green");
|
.generic-variations-factory(~"light-green");
|
||||||
.background-variations-factory(~"lime");
|
.generic-variations-factory(~"lime");
|
||||||
.background-variations-factory(~"yellow");
|
.generic-variations-factory(~"yellow");
|
||||||
.background-variations-factory(~"amber");
|
.generic-variations-factory(~"amber");
|
||||||
.background-variations-factory(~"orange");
|
.generic-variations-factory(~"orange");
|
||||||
.background-variations-factory(~"deep-orange");
|
.generic-variations-factory(~"deep-orange");
|
||||||
.background-variations-factory(~"brown");
|
.generic-variations-factory(~"brown");
|
||||||
.background-variations-factory(~"grey");
|
.generic-variations-factory(~"grey");
|
||||||
.background-variations-factory(~"blue-grey");
|
.generic-variations-factory(~"blue-grey");
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
|
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
|
||||||
Loading…
Reference in New Issue
Block a user