Skip to content

Commit 11a4609

Browse files
author
Federico Zivolo
committed
Continued work, added support for material colors
1 parent a41d47e commit 11a4609

18 files changed

Lines changed: 1229 additions & 1123 deletions

README.md

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
Bootstrap Material Design
1+
Material Design for Bootstrap
22
=========================
33

4-
This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application.
4+
This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application.
55
Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style.
66

77
This theme is in early developement and is not ready for production.
@@ -31,6 +31,19 @@ Currently supported elements:
3131

3232
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
3333

34+
### Variations:
35+
36+
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progess bars and more.
37+
They can be used adding to the desired element the class suffix `-material-color` replacing `color` with the desired one.
38+
39+
Example:
40+
41+
<button class="btn btn-material-deeppurple">Deep purple button</button>
42+
43+
These colors are took from the Material Design color palette and are reported below:
44+
45+
![palette](screenshots/palette.jpg)
46+
3447
### Buttons:
3548

3649
Add `.btn-flat` to a button to make it flat, without shadows.

alerts.less

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
// main: material.less
22

3-
.alert, .alert-success, .alert-info, .alert-warning, .alert-danger {
3+
.alert {
44
border: 0px;
55
border-radius: 0;
66
a, .alert-link {
77
color: #FFFFFF;
88
}
9-
}
10-
11-
.alert-success {
12-
color: #FFFFFF;
13-
background-color: @alert-success;
14-
}
15-
.alert-info {
16-
color: #FFFFFF;
17-
background-color: @alert-info;
18-
}
19-
.alert-warning {
20-
color: #FFFFFF;
21-
background-color: @alert-warning;
22-
}
23-
.alert-danger {
24-
color: #FFFFFF;
25-
background-color: @alert-danger;
9+
.variations(~"", background-color, #FFFFFF);
10+
&-info, &-danger, &-warning, &-success {
11+
color: #FFFFFF;
12+
}
13+
&-default {
14+
a, .alert-link {
15+
color: #000000;
16+
}
17+
}
2618
}

0 commit comments

Comments
 (0)