mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-27 08:29:53 +03:00
added Material Design color palette for panels
This commit is contained in:
rombat
parent
4d98059594
commit
27b1aa2c38
106
less/_panels.less
Normal file
106
less/_panels.less
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
// main: material.less
|
||||
|
||||
// Panels mixins
|
||||
|
||||
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
|
||||
border-color: @border;
|
||||
|
||||
& > .panel-heading {
|
||||
color: @heading-text-color;
|
||||
background-color: @heading-bg-color;
|
||||
border-color: @heading-border;
|
||||
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-top-color: @border;
|
||||
}
|
||||
.badge {
|
||||
color: @heading-bg-color;
|
||||
background-color: @heading-text-color;
|
||||
}
|
||||
}
|
||||
& > .panel-footer {
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-bottom-color: @border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Contextual variations
|
||||
.panel-material-red{
|
||||
.panel-variant(@panel-material-red-border; @panel-material-red-text; @panel-material-red-heading-bg; @panel-material-red-border);
|
||||
}
|
||||
|
||||
.panel-material-pink{
|
||||
.panel-variant(@panel-material-pink-border; @panel-material-pink-text; @panel-material-pink-heading-bg; @panel-material-pink-border);
|
||||
}
|
||||
|
||||
.panel-material-purple{
|
||||
.panel-variant(@panel-material-purple-border; @panel-material-purple-text; @panel-material-purple-heading-bg; @panel-material-purple-border);
|
||||
}
|
||||
|
||||
.panel-material-deeppurple{
|
||||
.panel-variant(@panel-material-deeppurple-border; @panel-material-deeppurple-text; @panel-material-deeppurple-heading-bg; @panel-material-deeppurple-border);
|
||||
}
|
||||
|
||||
.panel-material-indigo{
|
||||
.panel-variant(@panel-material-indigo-border; @panel-material-indigo-text; @panel-material-indigo-heading-bg; @panel-material-indigo-border);
|
||||
}
|
||||
|
||||
.panel-material-blue{
|
||||
.panel-variant(@panel-material-blue-border; @panel-material-blue-text; @panel-material-blue-heading-bg; @panel-material-blue-border);
|
||||
}
|
||||
|
||||
.panel-material-lightblue{
|
||||
.panel-variant(@panel-material-lightblue-border; @panel-material-lightblue-text; @panel-material-lightblue-heading-bg; @panel-material-lightblue-border);
|
||||
}
|
||||
|
||||
.panel-material-cyan{
|
||||
.panel-variant(@panel-material-cyan-border; @panel-material-cyan-text; @panel-material-cyan-heading-bg; @panel-material-cyan-border);
|
||||
}
|
||||
|
||||
.panel-material-teal{
|
||||
.panel-variant(@panel-material-teal-border; @panel-material-teal-text; @panel-material-teal-heading-bg; @panel-material-teal-border);
|
||||
}
|
||||
|
||||
.panel-material-green{
|
||||
.panel-variant(@panel-material-green-border; @panel-material-green-text; @panel-material-green-heading-bg; @panel-material-green-border);
|
||||
}
|
||||
|
||||
.panel-material-lightgreen{
|
||||
.panel-variant(@panel-material-lightgreen-border; @panel-material-lightgreen-text; @panel-material-lightgreen-heading-bg; @panel-material-lightgreen-border);
|
||||
}
|
||||
|
||||
.panel-material-lime{
|
||||
.panel-variant(@panel-material-lime-border; @panel-material-lime-text; @panel-material-lime-heading-bg; @panel-material-lime-border);
|
||||
}
|
||||
|
||||
.panel-material-yellow{
|
||||
.panel-variant(@panel-material-yellow-border; @panel-material-yellow-text; @panel-material-yellow-heading-bg; @panel-material-yellow-border);
|
||||
}
|
||||
|
||||
.panel-material-amber{
|
||||
.panel-variant(@panel-material-amber-border; @panel-material-amber-text; @panel-material-amber-heading-bg; @panel-material-amber-border);
|
||||
}
|
||||
|
||||
.panel-material-orange{
|
||||
.panel-variant(@panel-material-orange-border; @panel-material-orange-text; @panel-material-orange-heading-bg; @panel-material-orange-border);
|
||||
}
|
||||
|
||||
.panel-material-deeporange{
|
||||
.panel-variant(@panel-material-deeporange-border; @panel-material-deeporange-text; @panel-material-deeporange-heading-bg; @panel-material-deeporange-border);
|
||||
}
|
||||
|
||||
.panel-material-brown{
|
||||
.panel-variant(@panel-material-brown-border; @panel-material-brown-text; @panel-material-brown-heading-bg; @panel-material-brown-border);
|
||||
}
|
||||
|
||||
.panel-material-grey{
|
||||
.panel-variant(@panel-material-grey-border; @panel-material-grey-text; @panel-material-grey-heading-bg; @panel-material-grey-border);
|
||||
}
|
||||
|
||||
.panel-material-bluegrey{
|
||||
.panel-variant(@panel-material-bluegrey-border; @panel-material-bluegrey-text; @panel-material-bluegrey-heading-bg; @panel-material-bluegrey-border);
|
||||
}
|
||||
|
||||
|
|
@ -107,3 +107,109 @@
|
|||
|
||||
@text-disabled: #a8a8a8;
|
||||
@background-disabled: #eaeaea;
|
||||
|
||||
// Panels
|
||||
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: #333;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: #428bca;
|
||||
@panel-primary-heading-bg: #428bca;
|
||||
|
||||
@panel-success-text: #3c763d;
|
||||
@panel-success-heading-bg: #dff0d8;
|
||||
@panel-success-border: darken(spin(@panel-success-heading-bg, -10), 5%);
|
||||
|
||||
@panel-info-text: #31708f;
|
||||
@panel-info-heading-bg: #d9edf7;
|
||||
@panel-info-border: darken(spin(@panel-info-heading-bg, -10), 7%);
|
||||
|
||||
@panel-warning-text: #8a6d3b;
|
||||
@panel-warning-heading-bg: #fcf8e3;
|
||||
@panel-warning-border: darken(spin(@panel-warning-heading-bg, -10), 5%);
|
||||
|
||||
@panel-danger-text: #a94442;
|
||||
@panel-danger-heading-bg: #f2dede;
|
||||
@panel-danger-border: darken(spin(@panel-danger-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-red-text: #e84e40;
|
||||
@panel-material-red-heading-bg: #fde0dc;
|
||||
@panel-material-red-border: darken(spin(@panel-material-red-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-pink-text: #ec407a;
|
||||
@panel-material-pink-heading-bg: #fce4ec;
|
||||
@panel-material-pink-border: darken(spin(@panel-material-pink-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-purple-text: #ab47bc;
|
||||
@panel-material-purple-heading-bg: #f3e5f5;
|
||||
@panel-material-purple-border: darken(spin(@panel-material-purple-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-deeppurple-text: #7e57c2;
|
||||
@panel-material-deeppurple-heading-bg: #ede7f6;
|
||||
@panel-material-deeppurple-border: darken(spin(@panel-material-deeppurple-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-indigo-text: #5c6bc0;
|
||||
@panel-material-indigo-heading-bg: #e8eaf6;
|
||||
@panel-material-indigo-border: darken(spin(@panel-material-indigo-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-blue-text: #738ffe;
|
||||
@panel-material-blue-heading-bg: #e7e9fd;
|
||||
@panel-material-blue-border: darken(spin(@panel-material-blue-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-lightblue-text: #29b6f6;
|
||||
@panel-material-lightblue-heading-bg: #e1f5fe;
|
||||
@panel-material-lightblue-border: darken(spin(@panel-material-lightblue-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-cyan-text: #26c6da;
|
||||
@panel-material-cyan-heading-bg: #e0f7fa;
|
||||
@panel-material-cyan-border: darken(spin(@panel-material-cyan-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-teal-text: #26a69a;
|
||||
@panel-material-teal-heading-bg: #e0f2f1;
|
||||
@panel-material-teal-border: darken(spin(@panel-material-teal-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-green-text: #2baf2b;
|
||||
@panel-material-green-heading-bg: #d0f8ce;
|
||||
@panel-material-green-border: darken(spin(@panel-material-green-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-lightgreen-text: #689f38;
|
||||
@panel-material-lightgreen-heading-bg: #f1f8e9;
|
||||
@panel-material-lightgreen-border: darken(spin(@panel-material-lightgreen-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-lime-text: #afb42b;
|
||||
@panel-material-lime-heading-bg: #f9fbe7;
|
||||
@panel-material-lime-border: darken(spin(@panel-material-lime-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-yellow-text: #f9a825;
|
||||
@panel-material-yellow-heading-bg: #fffde7;
|
||||
@panel-material-yellow-border: darken(spin(@panel-material-yellow-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-amber-text: #ffb300;
|
||||
@panel-material-amber-heading-bg: #fff8e1;
|
||||
@panel-material-amber-border: darken(spin(@panel-material-amber-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-orange-text: #ffa726;
|
||||
@panel-material-orange-heading-bg: #fff3e0;
|
||||
@panel-material-orange-border: darken(spin(@panel-material-orange-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-deeporange-text: #ff7043;
|
||||
@panel-material-deeporange-heading-bg: #fbe9e7;
|
||||
@panel-material-deeporange-border: darken(spin(@panel-material-deeporange-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-brown-text: #8d6e63;
|
||||
@panel-material-brown-heading-bg: #d7ccc8;
|
||||
@panel-material-brown-border: darken(spin(@panel-material-brown-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-grey-text: #9e9e9e;
|
||||
@panel-material-grey-heading-bg: #f5f5f5;
|
||||
@panel-material-grey-border: darken(spin(@panel-material-grey-heading-bg, -10), 5%);
|
||||
|
||||
@panel-material-bluegrey-text: #607d8b;
|
||||
@panel-material-bluegrey-heading-bg: #cfd8dc;
|
||||
@panel-material-bluegrey-border: darken(spin(@panel-material-bluegrey-heading-bg, -10), 5%);
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@ h5, h6{
|
|||
// Buttons
|
||||
@import "_buttons.less";
|
||||
|
||||
//Panels
|
||||
@import "_panels.less";
|
||||
|
||||
// Checkboxes
|
||||
@import "_checkboxes.less";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user