From 0f26b89101a047f34ec8dd479544df32119aed10 Mon Sep 17 00:00:00 2001
From: rombat <pakkfan@gmail.com>
Date: Tue, 28 Oct 2014 14:44:28 +0100
Subject: [PATCH] added Material Design color palette for .panels in .less
 source files

---
 less/_panels.less    | 106 +++++++++++++++++++++++++++++++++++++++++++
 less/_variables.less |  79 ++++++++++++++++++++++++++++++++
 less/material.less   |   3 ++
 3 files changed, 188 insertions(+)
 create mode 100644 less/_panels.less

diff --git a/less/_panels.less b/less/_panels.less
new file mode 100644
index 00000000..61a108c6
--- /dev/null
+++ b/less/_panels.less
@@ -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);
+}
+
diff --git a/less/_variables.less b/less/_variables.less
index 7902fd33..95aa7e93 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -107,3 +107,82 @@
 
 @text-disabled: #a8a8a8;
 @background-disabled: #eaeaea;
+
+// Panels
+
+@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%);
+
diff --git a/less/material.less b/less/material.less
index 89ca952f..909931dc 100644
--- a/less/material.less
+++ b/less/material.less
@@ -34,6 +34,9 @@ h5, h6{
 // Buttons
 @import "_buttons.less";
 
+//Panels
+@import "_panels.less";
+
 // Checkboxes
 @import "_checkboxes.less";