1
2/*
3 * Callouts (from Twitter Bootstrap Documentation)
4 *
5 * Not quite alerts, but custom and helpful notes for folks reading the docs.
6 * Requires a base and modifier class.
7 */
8
9/* Common styles for all types */
10.bs-callout {
11  padding: 20px;
12  margin: 20px 0;
13  border: 1px solid #eee;
14  border-left-width: 5px;
15  border-radius: 3px;
16}
17.bs-callout h4 {
18  margin-top: 0;
19  margin-bottom: 5px;
20}
21.bs-callout p:last-child {
22  margin-bottom: 0;
23}
24.bs-callout code {
25  border-radius: 3px;
26}
27.bs-callout+.bs-callout {
28  margin-top: -5px;
29}
30.bs-callout-default {
31  border-left-color: #777;
32}
33.bs-callout-default h4 {
34  color: #777;
35}
36.bs-callout-primary {
37  border-left-color: #428bca;
38}
39.bs-callout-primary h4 {
40  color: #428bca;
41}
42.bs-callout-success {
43  border-left-color: #5cb85c;
44}
45.bs-callout-success h4 {
46  color: #5cb85c;
47}
48.bs-callout-danger {
49  border-left-color: #d9534f;
50}
51.bs-callout-danger h4 {
52  color: #d9534f;
53}
54.bs-callout-warning {
55  border-left-color: #f0ad4e;
56}
57.bs-callout-warning h4 {
58  color: #f0ad4e;
59}
60.bs-callout-info {
61  border-left-color: #5bc0de;
62}
63.bs-callout-info h4 {
64  color: #5bc0de;
65}
66
67
68.bootswatch-callout(@theme, @primary, @success, @info, @warning, @danger) {
69
70  .@{theme} .bs-callout-primary {
71
72    border-left-color: @primary;
73
74    h4, .bs-callout-icon {
75      color: @primary;
76    }
77
78  }
79
80  .@{theme} .bs-callout-success {
81
82    border-left-color: @success;
83
84    h4, .bs-callout-icon {
85      color: @success;
86    }
87
88  }
89
90  .@{theme} .bs-callout-info {
91
92    border-left-color: @info;
93
94    h4, .bs-callout-icon {
95      color: @info;
96    }
97
98  }
99
100  .@{theme} .bs-callout-warning {
101
102    border-left-color: @warning;
103
104    h4, .bs-callout-icon {
105      color: @warning;
106    }
107
108  }
109
110  .@{theme} .bs-callout-danger {
111
112    border-left-color: @danger;
113
114    h4, .bs-callout-icon {
115      color: @danger;
116    }
117
118  }
119
120}
121
122/**
123 * Callauts for Bootswatch themes
124 */
125.bootswatch-callout(cerulean,  #2FA4E7, #73A839, #033C73, #DD5600, #C71C22);
126.bootswatch-callout(cosmo,     #2780E3, #3FB618, #9954BB, #FF7518, #FF0039);
127.bootswatch-callout(cyborg,    #2A9FD6, #77B300, #9933CC, #FF8800, #CC0000);
128.bootswatch-callout(darkly,    #375A7F, #00BC8C, #3498DB, #F39C12, #E74C3C);
129.bootswatch-callout(flatly,    #2C3E50, #18BC9C, #3498DB, #F39C12, #E74C3C);
130.bootswatch-callout(journal,   #EB6864, #22B24C, #336699, #F5E625, #F57A00);
131.bootswatch-callout(lumen,     #158CBA, #28B62C, #75CAEB, #FF851B, #FF4136);
132.bootswatch-callout(paper,     #2196F3, #4CAF50, #9C27B0, #FF9800, #E51C23);
133.bootswatch-callout(readable,  #4582EC, #3FAD46, #5BC0DE, #F0AD4E, #D9534F);
134.bootswatch-callout(sandstone, #325D88, #93C54B, #29ABE0, #F47C3C, #D9534F);
135.bootswatch-callout(simplex,   #D9230F, #469408, #029ACF, #9B479F, #D9831F);
136.bootswatch-callout(slate,     #7A8288, #62C462, #5BC0DE, #F89406, #EE5F5B);
137.bootswatch-callout(solar,     #425358, #2AA198, #268BD2, #CB4B16, #D33682);
138.bootswatch-callout(spacelab,  #446E9B, #3CB521, #3399F3, #D47500, #CD0200);
139.bootswatch-callout(superhero, #DF691A, #5CB85C, #5BC0DE, #F0AD4E, #D9534F);
140.bootswatch-callout(united,    #E95420, #38B44A, #772953, #EFB73E, #DF382C);
141.bootswatch-callout(yeti,      #008CBA, #43AC6A, #5BC0DE, #E99002, #F04124);
142
143/**
144 * Fix for SVG icon
145 */
146i.bs-callout-icon { font-size: 2em; }
147svg.bs-callout-icon { height: 32px; width: 32px; }
148