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

used colors for panels according to Material specifications, removed unnecessary variables and added 3 colors from Material Design color palette

Browse Source
This commit is contained in:
rombat 2014-10-28 20:34:51 +01:00
parent e06f43a667
commit 1adf620bdc
2 changed files with 23 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
less/_panels.less
View File

@ -29,78 +29,78 @@
// Contextual variations // Contextual variations
.panel-material-red{ .panel-material-red{
.panel-variant((darken(spin(@panel-material-red-heading-bg, -10), 5%)); @panel-material-red-text; @panel-material-red-heading-bg; (darken(spin(@panel-material-red-heading-bg, -10), 5%))); .panel-variant((darken(spin(@red, -10), 5%)); @darkbg-text; @red; (darken(spin(@red, -10), 5%)));
} }
.panel-material-pink{ .panel-material-pink{
.panel-variant((darken(spin(@panel-material-pink-heading-bg, -10), 5%)); @panel-material-pink-text; @panel-material-pink-heading-bg; (darken(spin(@panel-material-pink-heading-bg, -10), 5%))); .panel-variant((darken(spin(@pink, -10), 5%)); @darkbg-text; @pink; (darken(spin(@pink, -10), 5%)));
} }
.panel-material-purple{ .panel-material-purple{
.panel-variant((darken(spin(@panel-material-purple-heading-bg, -10), 5%)); @panel-material-purple-text; @panel-material-purple-heading-bg; (darken(spin(@panel-material-purple-heading-bg, -10), 5%))); .panel-variant((darken(spin(@purple, -10), 5%)); @darkbg-text; @purple; (darken(spin(@purple, -10), 5%)));
} }
.panel-material-deeppurple{ .panel-material-deeppurple{
.panel-variant((darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%)); @panel-material-deeppurple-text; @panel-material-deeppurple-heading-bg; (darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%))); .panel-variant((darken(spin(@deeppurple, -10), 5%)); @darkbg-text; @deeppurple; (darken(spin(@deeppurple, -10), 5%)));
} }
.panel-material-indigo{ .panel-material-indigo{
.panel-variant((darken(spin(@panel-material-indigo-heading-bg, -10), 5%)); @panel-material-indigo-text; @panel-material-indigo-heading-bg; (darken(spin(@panel-material-indigo-heading-bg, -10), 5%))); .panel-variant((darken(spin(@indigo, -10), 5%)); @darkbg-text; @indigo; (darken(spin(@indigo, -10), 5%)));
} }
.panel-material-blue{ .panel-material-blue{
.panel-variant((darken(spin(@panel-material-blue-heading-bg, -10), 5%)); @panel-material-blue-text; @panel-material-blue-heading-bg; (darken(spin(@panel-material-blue-heading-bg, -10), 5%))); .panel-variant((darken(spin(@blue, -10), 5%)); @darkbg-text; @blue; (darken(spin(@blue, -10), 5%)));
} }
.panel-material-lightblue{ .panel-material-lightblue{
.panel-variant((darken(spin(@panel-material-lightblue-heading-bg, -10), 5%)); @panel-material-lightblue-text; @panel-material-lightblue-heading-bg; (darken(spin(@panel-material-lightblue-heading-bg, -10), 5%))); .panel-variant((darken(spin(@lightblue, -10), 5%)); @darkbg-text; @lightblue; (darken(spin(@lightblue, -10), 5%)));
} }
.panel-material-cyan{ .panel-material-cyan{
.panel-variant((darken(spin(@panel-material-cyan-heading-bg, -10), 5%)); @panel-material-cyan-text; @panel-material-cyan-heading-bg; (darken(spin(@panel-material-cyan-heading-bg, -10), 5%))); .panel-variant((darken(spin(@cyan, -10), 5%)); @darkbg-text; @cyan; (darken(spin(@cyan, -10), 5%)));
} }
.panel-material-teal{ .panel-material-teal{
.panel-variant((darken(spin(@panel-material-teal-heading-bg, -10), 5%)); @panel-material-teal-text; @panel-material-teal-heading-bg; (darken(spin(@panel-material-teal-heading-bg, -10), 5%))); .panel-variant((darken(spin(@teal, -10), 5%)); @darkbg-text; @teal; (darken(spin(@teal, -10), 5%)));
} }
.panel-material-green{ .panel-material-green{
.panel-variant((darken(spin(@panel-material-green-heading-bg, -10), 5%)); @panel-material-green-text; @panel-material-green-heading-bg; (darken(spin(@panel-material-green-heading-bg, -10), 5%))); .panel-variant((darken(spin(@green, -10), 5%)); @darkbg-text; @green; (darken(spin(@green, -10), 5%)));
} }
.panel-material-lightgreen{ .panel-material-lightgreen{
.panel-variant((darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%)); @panel-material-lightgreen-text; @panel-material-lightgreen-heading-bg; (darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%))); .panel-variant((darken(spin(@lightgreen, -10), 5%)); @darkbg-text; @lightgreen; (darken(spin(@lightgreen, -10), 5%)));
} }
.panel-material-lime{ .panel-material-lime{
.panel-variant((darken(spin(@panel-material-lime-heading-bg, -10), 5%)); @panel-material-lime-text; @panel-material-lime-heading-bg; (darken(spin(@panel-material-lime-heading-bg, -10), 5%))); .panel-variant((darken(spin(@lime, -10), 5%)); @lightbg-text; @lime; (darken(spin(@lime, -10), 5%)));
} }
.panel-material-yellow{ .panel-material-lightyellow{
.panel-variant((darken(spin(@panel-material-yellow-heading-bg, -10), 5%)); @panel-material-yellow-text; @panel-material-yellow-heading-bg; (darken(spin(@panel-material-yellow-heading-bg, -10), 5%))); .panel-variant((darken(spin(@lightyellow, -10), 5%)); @lightbg-text; @lightyellow; (darken(spin(@lightyellow, -10), 5%)));
} }
.panel-material-amber{ .panel-material-amber{
.panel-variant((darken(spin(@panel-material-amber-heading-bg, -10), 5%)); @panel-material-amber-text; @panel-material-amber-heading-bg; (darken(spin(@panel-material-amber-heading-bg, -10), 5%))); .panel-variant((darken(spin(@amber, -10), 5%)); @lightbg-text; @amber; (darken(spin(@amber, -10), 5%)));
} }
.panel-material-orange{ .panel-material-orange{
.panel-variant((darken(spin(@panel-material-orange-heading-bg, -10), 5%)); @panel-material-orange-text; @panel-material-orange-heading-bg; (darken(spin(@panel-material-orange-heading-bg, -10), 5%))); .panel-variant((darken(spin(@orange, -10), 5%)); @lightbg-text; @orange; (darken(spin(@orange, -10), 5%)));
} }
.panel-material-deeporange{ .panel-material-deeporange{
.panel-variant((darken(spin(@panel-material-deeporange-heading-bg, -10), 5%)); @panel-material-deeporange-text; @panel-material-deeporange-heading-bg; (darken(spin(@panel-material-deeporange-heading-bg, -10), 5%))); .panel-variant((darken(spin(@deeporange, -10), 5%)); @darkbg-text; @deeporange; (darken(spin(@deeporange, -10), 5%)));
} }
.panel-material-brown{ .panel-material-brown{
.panel-variant((darken(spin(@panel-material-brown-heading-bg, -10), 5%)); @panel-material-brown-text; @panel-material-brown-heading-bg; (darken(spin(@panel-material-brown-heading-bg, -10), 5%))); .panel-variant((darken(spin(@brown, -10), 5%)); @darkbg-text; @brown; (darken(spin(@brown, -10), 5%)));
} }
.panel-material-grey{ .panel-material-grey{
.panel-variant((darken(spin(@panel-material-grey-heading-bg, -10), 5%)); @panel-material-grey-text; @panel-material-grey-heading-bg; (darken(spin(@panel-material-grey-heading-bg, -10), 5%))); .panel-variant((darken(spin(@grey, -10), 5%)); @lightbg-text; @grey; (darken(spin(@grey, -10), 5%)));
} }
.panel-material-bluegrey{ .panel-material-bluegrey{
.panel-variant((darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%)); @panel-material-bluegrey-text; @panel-material-bluegrey-heading-bg; (darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%))); .panel-variant((darken(spin(@bluegrey, -10), 5%)); @darkbg-text; @bluegrey; (darken(spin(@bluegrey, -10), 5%)));
} }

62
less/_variables.less
View File

@ -8,13 +8,16 @@
@pink: #E91E63; @pink: #E91E63;
@purple: #9C27B0; @purple: #9C27B0;
@deeppurple: #673AB7; @deeppurple: #673AB7;
@blue: #5677fc;
@indigo: #3F51B5; @indigo: #3F51B5;
@lightblue: #03A9F4; @lightblue: #03A9F4;
@cyan: #00BCD4; @cyan: #00BCD4;
@teal: #009688; @teal: #009688;
@green: #259b24;
@lightgreen: #8BC34A; @lightgreen: #8BC34A;
@lime: #CDDC39; @lime: #CDDC39;
@lightyellow: #FFEB3B; @lightyellow: #FFEB3B;
@amber: #ffc107;
@orange: #FF9800; @orange: #FF9800;
@deeporange: #FF5722; @deeporange: #FF5722;
@grey: #9E9E9E; @grey: #9E9E9E;
@ -108,62 +111,3 @@
@text-disabled: #a8a8a8; @text-disabled: #a8a8a8;
@background-disabled: #eaeaea; @background-disabled: #eaeaea;
// Panels
@panel-material-red-text: #e84e40;
@panel-material-red-heading-bg: #fde0dc;
@panel-material-pink-text: #ec407a;
@panel-material-pink-heading-bg: #fce4ec;
@panel-material-purple-text: #ab47bc;
@panel-material-purple-heading-bg: #f3e5f5;
@panel-material-deeppurple-text: #7e57c2;
@panel-material-deeppurple-heading-bg: #ede7f6;
@panel-material-indigo-text: #5c6bc0;
@panel-material-indigo-heading-bg: #e8eaf6;
@panel-material-blue-text: #738ffe;
@panel-material-blue-heading-bg: #e7e9fd;
@panel-material-lightblue-text: #29b6f6;
@panel-material-lightblue-heading-bg: #e1f5fe;
@panel-material-cyan-text: #26c6da;
@panel-material-cyan-heading-bg: #e0f7fa;
@panel-material-teal-text: #26a69a;
@panel-material-teal-heading-bg: #e0f2f1;
@panel-material-green-text: #2baf2b;
@panel-material-green-heading-bg: #d0f8ce;
@panel-material-lightgreen-text: #689f38;
@panel-material-lightgreen-heading-bg: #f1f8e9;
@panel-material-lime-text: #afb42b;
@panel-material-lime-heading-bg: #f9fbe7;
@panel-material-yellow-text: #f9a825;
@panel-material-yellow-heading-bg: #fffde7;
@panel-material-amber-text: #ffb300;
@panel-material-amber-heading-bg: #fff8e1;
@panel-material-orange-text: #ffa726;
@panel-material-orange-heading-bg: #fff3e0;
@panel-material-deeporange-text: #ff7043;
@panel-material-deeporange-heading-bg: #fbe9e7;
@panel-material-brown-text: #8d6e63;
@panel-material-brown-heading-bg: #d7ccc8;
@panel-material-grey-text: #9e9e9e;
@panel-material-grey-heading-bg: #f5f5f5;
@panel-material-bluegrey-text: #607d8b;
@panel-material-bluegrey-heading-bg: #cfd8dc;