mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-24 02:24:09 +03:00
125 lines
3.5 KiB
Plaintext
Executable File
125 lines
3.5 KiB
Plaintext
Executable File
@import '_mixins-shared.less';
|
|
|
|
//
|
|
// 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.
|
|
//
|
|
// @mdb-color-name ---> "red", "green", "indigo" ...
|
|
// @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
|
|
// @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
|
|
// @mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
|
|
//
|
|
|
|
|
|
.generic-variations(@extra, @default, @func) {
|
|
|
|
@contrast-factor: 40%;
|
|
|
|
// bootstrap styles
|
|
&@{extra}, &-default@{extra} {
|
|
@mdb-color-name: "default";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @default;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
&-black@{extra} {
|
|
@mdb-color-name: "black";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @black;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
&-white@{extra} {
|
|
@mdb-color-name: "white";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @white;
|
|
@mdb-text-color: @lightbg-text;
|
|
@func();
|
|
}
|
|
&-inverse@{extra} {
|
|
@mdb-color-name: "inverse";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @inverse;
|
|
@mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
|
|
@func();
|
|
}
|
|
&-primary@{extra} {
|
|
@mdb-color-name: "primary";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @brand-primary;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
&-success@{extra} {
|
|
@mdb-color-name: "success";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @brand-success;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
&-info@{extra} {
|
|
@mdb-color-name: "info";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @brand-info;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
&-warning@{extra} {
|
|
@mdb-color-name: "warning";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @brand-warning;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
&-danger@{extra} {
|
|
@mdb-color-name: "danger";
|
|
@mdb-color-full-name: @mdb-color-name;
|
|
@mdb-color: @brand-danger;
|
|
@mdb-text-color: @darkbg-text;
|
|
@func();
|
|
}
|
|
|
|
// given a color build multiples dephs
|
|
.generic-variations-factory(@mdb-color-name) {
|
|
|
|
// given a color and its deph build css
|
|
.generic-variations-factory-deep(@mdb-color-number) {
|
|
|
|
&-material-@{mdb-color-name}@{mdb-color-number}@{extra} {
|
|
@mdb-color-full-name: "@{mdb-color-name}@{mdb-color-number}";
|
|
@mdb-color: @@mdb-color-full-name;
|
|
@mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
|
|
@func();
|
|
}
|
|
|
|
}
|
|
|
|
.generic-variations-factory-deep(~"");
|
|
}
|
|
|
|
.generic-variations-factory(~"red");
|
|
.generic-variations-factory(~"pink");
|
|
.generic-variations-factory(~"purple");
|
|
.generic-variations-factory(~"deep-purple");
|
|
.generic-variations-factory(~"indigo");
|
|
.generic-variations-factory(~"blue");
|
|
.generic-variations-factory(~"light-blue");
|
|
.generic-variations-factory(~"cyan");
|
|
.generic-variations-factory(~"teal");
|
|
.generic-variations-factory(~"green");
|
|
.generic-variations-factory(~"light-green");
|
|
.generic-variations-factory(~"lime");
|
|
.generic-variations-factory(~"yellow");
|
|
.generic-variations-factory(~"amber");
|
|
.generic-variations-factory(~"orange");
|
|
.generic-variations-factory(~"deep-orange");
|
|
.generic-variations-factory(~"brown");
|
|
.generic-variations-factory(~"grey");
|
|
.generic-variations-factory(~"blue-grey");
|
|
|
|
}
|
|
|
|
|
|
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
|