mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 00:19:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge 1adf620bdc into 6b8918d38f

Browse Source
This commit is contained in:
rombat 2014-11-12 08:08:08 +00:00
commit 305561287e
3 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
less/_panels.less Normal file
View 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((darken(spin(@red, -10), 5%)); @darkbg-text; @red; (darken(spin(@red, -10), 5%)));
}
.panel-material-pink{
.panel-variant((darken(spin(@pink, -10), 5%)); @darkbg-text; @pink; (darken(spin(@pink, -10), 5%)));
}
.panel-material-purple{
.panel-variant((darken(spin(@purple, -10), 5%)); @darkbg-text; @purple; (darken(spin(@purple, -10), 5%)));
}
.panel-material-deeppurple{
.panel-variant((darken(spin(@deeppurple, -10), 5%)); @darkbg-text; @deeppurple; (darken(spin(@deeppurple, -10), 5%)));
}
.panel-material-indigo{
.panel-variant((darken(spin(@indigo, -10), 5%)); @darkbg-text; @indigo; (darken(spin(@indigo, -10), 5%)));
}
.panel-material-blue{
.panel-variant((darken(spin(@blue, -10), 5%)); @darkbg-text; @blue; (darken(spin(@blue, -10), 5%)));
}
.panel-material-lightblue{
.panel-variant((darken(spin(@lightblue, -10), 5%)); @darkbg-text; @lightblue; (darken(spin(@lightblue, -10), 5%)));
}
.panel-material-cyan{
.panel-variant((darken(spin(@cyan, -10), 5%)); @darkbg-text; @cyan; (darken(spin(@cyan, -10), 5%)));
}
.panel-material-teal{
.panel-variant((darken(spin(@teal, -10), 5%)); @darkbg-text; @teal; (darken(spin(@teal, -10), 5%)));
}
.panel-material-green{
.panel-variant((darken(spin(@green, -10), 5%)); @darkbg-text; @green; (darken(spin(@green, -10), 5%)));
}
.panel-material-lightgreen{
.panel-variant((darken(spin(@lightgreen, -10), 5%)); @darkbg-text; @lightgreen; (darken(spin(@lightgreen, -10), 5%)));
}
.panel-material-lime{
.panel-variant((darken(spin(@lime, -10), 5%)); @lightbg-text; @lime; (darken(spin(@lime, -10), 5%)));
}
.panel-material-lightyellow{
.panel-variant((darken(spin(@lightyellow, -10), 5%)); @lightbg-text; @lightyellow; (darken(spin(@lightyellow, -10), 5%)));
}
.panel-material-amber{
.panel-variant((darken(spin(@amber, -10), 5%)); @lightbg-text; @amber; (darken(spin(@amber, -10), 5%)));
}
.panel-material-orange{
.panel-variant((darken(spin(@orange, -10), 5%)); @lightbg-text; @orange; (darken(spin(@orange, -10), 5%)));
}
.panel-material-deeporange{
.panel-variant((darken(spin(@deeporange, -10), 5%)); @darkbg-text; @deeporange; (darken(spin(@deeporange, -10), 5%)));
}
.panel-material-brown{
.panel-variant((darken(spin(@brown, -10), 5%)); @darkbg-text; @brown; (darken(spin(@brown, -10), 5%)));
}
.panel-material-grey{
.panel-variant((darken(spin(@grey, -10), 5%)); @lightbg-text; @grey; (darken(spin(@grey, -10), 5%)));
}
.panel-material-bluegrey{
.panel-variant((darken(spin(@bluegrey, -10), 5%)); @darkbg-text; @bluegrey; (darken(spin(@bluegrey, -10), 5%)));
}

4
less/_variables.less
View File

@ -6,13 +6,16 @@
@pink: #E91E63;
@purple: #9C27B0;
@deeppurple: #673AB7;
@blue: #5677fc;
@indigo: #3F51B5;
@lightblue: #03A9F4;
@cyan: #00BCD4;
@teal: #009688;
@green: #259b24;
@lightgreen: #8BC34A;
@lime: #CDDC39;
@lightyellow: #FFEB3B;
@amber: #ffc107;
@orange: #FF9800;
@deeporange: #FF5722;
@grey: #9E9E9E;
@ -105,3 +108,4 @@
@text-disabled: #a8a8a8;
@background-disabled: #eaeaea;

3
less/material.less
View File

@ -30,6 +30,9 @@ h5, h6{
// Buttons
@import "_buttons.less";
//Panels
@import "_panels.less";
// Checkboxes
@import "_checkboxes.less";