comparison static/bootstrap/less/alerts.less @ 149:d29e2f337b00

Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents 130eccd396d8
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
5 5
6 // Base styles 6 // Base styles
7 // ------------------------- 7 // -------------------------
8 8
9 .alert { 9 .alert {
10 padding: 8px 35px 8px 14px; 10 padding: @alert-padding;
11 margin-bottom: @baseLineHeight; 11 margin-bottom: @line-height-computed;
12 text-shadow: 0 1px 0 rgba(255,255,255,.5); 12 border: 1px solid transparent;
13 background-color: @warningBackground; 13 border-radius: @alert-border-radius;
14 border: 1px solid @warningBorder; 14
15 .border-radius(@baseBorderRadius); 15 // Headings for larger alerts
16 } 16 h4 {
17 .alert, 17 margin-top: 0;
18 .alert h4 { 18 // Specified for the h4 to prevent conflicts of changing @headings-color
19 // Specified for the h4 to prevent conflicts of changing @headingsColor 19 color: inherit;
20 color: @warningText; 20 }
21 } 21 // Provide class for links that match alerts
22 .alert h4 { 22 .alert-link {
23 margin: 0; 23 font-weight: @alert-link-font-weight;
24 }
25
26 // Improve alignment and spacing of inner content
27 > p,
28 > ul {
29 margin-bottom: 0;
30 }
31 > p + p {
32 margin-top: 5px;
33 }
24 } 34 }
25 35
26 // Adjust close link position 36 // Dismissable alerts
27 .alert .close { 37 //
28 position: relative; 38 // Expand the right padding and account for the close button's positioning.
29 top: -2px; 39
30 right: -21px; 40 .alert-dismissable {
31 line-height: @baseLineHeight; 41 padding-right: (@alert-padding + 20);
42
43 // Adjust close link position
44 .close {
45 position: relative;
46 top: -2px;
47 right: -21px;
48 color: inherit;
49 }
32 } 50 }
33 51
34
35 // Alternate styles 52 // Alternate styles
36 // ------------------------- 53 //
54 // Generate contextual modifier classes for colorizing the alert.
37 55
38 .alert-success { 56 .alert-success {
39 background-color: @successBackground; 57 .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
40 border-color: @successBorder;
41 color: @successText;
42 }
43 .alert-success h4 {
44 color: @successText;
45 }
46 .alert-danger,
47 .alert-error {
48 background-color: @errorBackground;
49 border-color: @errorBorder;
50 color: @errorText;
51 }
52 .alert-danger h4,
53 .alert-error h4 {
54 color: @errorText;
55 } 58 }
56 .alert-info { 59 .alert-info {
57 background-color: @infoBackground; 60 .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
58 border-color: @infoBorder;
59 color: @infoText;
60 } 61 }
61 .alert-info h4 { 62 .alert-warning {
62 color: @infoText; 63 .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
63 } 64 }
64 65 .alert-danger {
65 66 .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
66 // Block alerts
67 // -------------------------
68
69 .alert-block {
70 padding-top: 14px;
71 padding-bottom: 14px;
72 } 67 }
73 .alert-block > p,
74 .alert-block > ul {
75 margin-bottom: 0;
76 }
77 .alert-block p + p {
78 margin-top: 5px;
79 }