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";