[BUGFIX] Add reserved area for loading indicator within modules
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / Component / callout.less
1 //
2 // Callout
3 // =======
4 // Use to display static contextual messages.
5 //
6 //
7 // Minimal Usage
8 // -------------
9 //
10 // <div class="callout callout-info">
11 //   <h4 class="callout-title">Web&gt;Page module</h4>
12 //   <div class="callout-body">
13 //         <p>Please click the page title in the page tree to the left to edit page content.</p>
14 //   </div>
15 // </div>
16 //
17 //
18 // Advanded Usage
19 // --------------
20 //
21 // <div class="callout callout-info">
22 //   <div class="media">
23 //     <div class="media-left">
24 //       <span class="fa-stack fa-lg callout-icon">
25 //         <i class="fa fa-circle fa-stack-2x"></i>
26 //         <i class="fa fa-info fa-stack-1x"></i>
27 //       </span>
28 //     </div>
29 //     <div class="media-body">
30 //       <h4 class="callout-title">...</h4>
31 //       <div class="callout-body">
32 //         <p>..</p>
33 //       </div>
34 //     </div>
35 //   </div>
36 // </div>
37 //
38
39
40 //
41 // Variables
42 //
43 @callout-padding:             20px;
44 @callout-color:               #333;
45 @callout-icon-color:          #fff;
46 @callout-bg:                  #f0f0f0;
47 @callout-border:              #ccc;
48 @callout-border-radius:       2px;
49
50 @callout-success-bg:          @state-success-bg;
51 @callout-success-color:       @callout-color;
52 @callout-success-icon-color:  @callout-icon-color;
53 @callout-success-border:      @state-success-border;
54
55 @callout-info-bg:             @state-info-bg;
56 @callout-info-color:          @callout-color;
57 @callout-info-icon-color:     @callout-icon-color;
58 @callout-info-border:         @state-info-border;
59
60 @callout-warning-bg:          @state-warning-bg;
61 @callout-warning-color:       @callout-color;
62 @callout-warning-icon-color:  @callout-icon-color;
63 @callout-warning-border:      @state-warning-border;
64
65 @callout-danger-bg:           @state-danger-bg;
66 @callout-danger-color:        @callout-color;
67 @callout-danger-icon-color:   @callout-icon-color;
68 @callout-danger-border:       @state-danger-border;
69
70 @callout-notice-bg:           @state-notice-bg;
71 @callout-notice-color:        @callout-color;
72 @callout-notice-icon-color:   @callout-icon-color;
73 @callout-notice-border:       @state-notice-border;
74
75
76 //
77 // Component
78 //
79 .callout {
80         background-color: @callout-bg;
81         border-left: 3px solid @callout-border;
82         margin: 20px 0;
83         padding: @callout-padding;
84         color: @callout-color;
85         .media {
86                 margin: 0;
87                 .fa-stack {
88                         color: @callout-icon-color;
89                         > .fa:first-child {
90                                 color: @callout-border;
91                         }
92                 }
93         }
94         .media-body {
95                 vertical-align: middle;
96         }
97 }
98 .callout-icon {
99         margin-top: -2px;
100 }
101 .callout-title {
102         font-size: 1.3em;
103         margin: 0 0 0.5em;
104 }
105 .callout-body {
106         > *:last-child {
107                 margin-bottom: 0;
108         }
109 }
110
111
112 //
113 // Variants
114 //
115 .callout-variant(@background; @border; @text-color; @icon-color) {
116         background-color: @background;
117         border-color: @border;
118         color: @text-color;
119         .media {
120                 margin: 0;
121                 .fa-stack {
122                         color: @icon-color;
123                         > .fa:first-child {
124                                 color: @border;
125                         }
126                 }
127         }
128 }
129 .callout-success {
130         .callout-variant(@callout-success-bg; @callout-success-border; @callout-success-color; @callout-success-icon-color);
131 }
132 .callout-info {
133         .callout-variant(@callout-info-bg; @callout-info-border; @callout-info-color; @callout-info-icon-color);
134 }
135 .callout-warning {
136         .callout-variant(@callout-warning-bg; @callout-warning-border; @callout-warning-color; @callout-warning-icon-color);
137 }
138 .callout-danger {
139         .callout-variant(@callout-danger-bg; @callout-danger-border; @callout-danger-color; @callout-danger-icon-color);
140 }
141 .callout-notice {
142         .callout-variant(@callout-notice-bg; @callout-notice-border; @callout-notice-color; @callout-notice-icon-color);
143 }