mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-02 06:23:45 +03:00
107 lines
4.8 KiB
Plaintext
107 lines
4.8 KiB
Plaintext
// 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(@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-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-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-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-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-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-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-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-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-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-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-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-material-yellow{
|
|
.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-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-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-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-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-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-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%)));
|
|
}
|
|
|