[BUGFIX] Add reserved area for loading indicator within modules
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / Component / module.less
1 //
2 // ModuleTemplate
3 // ======
4 // General component for backend modules.
5 //
6
7
8 //
9 // Variables
10 //
11 @module-bg: #fff;
12
13 @module-docheader-bg: #eee;
14 @module-docheader-border: #c3c3c3;
15 @module-docheader-zindex: 300;
16 @module-docheader-height: 65px;
17 @module-docheader-padding-vertical: 0;
18 @module-docheader-padding-horizontal: 24px;
19 @module-docheader-padding: @module-docheader-padding-vertical @module-docheader-padding-horizontal;
20
21 @module-docheader-bar-height: 26px;
22 @module-docheader-bar-margin-vertical: 4px;
23 @module-docheader-bar-margin-horizontal: 0;
24 @module-docheader-bar-margin: @module-docheader-bar-margin-vertical @module-docheader-bar-margin-horizontal;
25
26 @module-body-padding-vertical: 24px;
27 @module-body-padding-horizontal: 24px;
28 @module-body-padding: @module-body-padding-vertical @module-body-padding-horizontal;
29
30
31 //
32 // Template
33 //
34 .module {
35         height: 100%;
36         width: 100%;
37         background-color: @module-bg;
38 }
39
40 //
41 // Loading indicator
42 //
43 .module-loading-indicator {
44         min-height: 5px;
45         width: 100%;
46         z-index: 999999;
47
48         &.nprogress-custom-parent {
49                 position: fixed;
50                 top: 0;
51         }
52 }
53
54 //
55 // Docheader
56 //
57 .module-docheader {
58         .clearfix;
59         position: fixed;
60         width: 100%;
61         top: 0;
62         left: 0;
63         min-height: @module-docheader-height;
64         z-index: @module-docheader-zindex;
65         background-color: @module-docheader-bg;
66         border-bottom: 1px solid @module-docheader-border;
67         padding: @module-docheader-padding;
68         .transition(margin-top 0.3s ease-in-out);
69         .module-docheader-bar {
70                 .clearfix;
71                 min-height: @module-docheader-bar-height;
72                 margin: @module-docheader-bar-margin;
73                 line-height: @module-docheader-bar-height;
74                 label {
75                         margin-top: 0;
76                         margin-bottom: 0;
77                 }
78                 .form-group {
79                         margin: 0;
80                 }
81                 .form-inline-spaced {
82                         margin: 0;
83                 }
84                 .panel {
85                         background-color: transparent;
86                         margin: 0;
87                         border-left: none;
88                         border-right: none;
89                         border-bottom: none;
90                         border-radius: 0;
91                         margin-left: -@module-docheader-padding-horizontal;
92                         margin-right: -@module-docheader-padding-horizontal;
93                         background-color: #fafafa;
94                         box-shadow: none;
95                         .panel-body {
96                                 padding: ceil(@module-docheader-padding-horizontal / 3) @module-docheader-padding-horizontal;
97                         }
98                 }
99         }
100         .module-docheader-bar-search  {
101                 margin-bottom: 0;
102         }
103         .module-docheader-bar-column-left {
104                 float: left;
105         }
106         .module-docheader-bar-column-right {
107                 float: right;
108         }
109 }
110
111
112 //
113 // Body
114 //
115 .module-body {
116         padding: @module-body-padding;
117         > .callout:first-child {
118                 margin-top: 0;
119         }
120 }
121 .module-docheader + .module-body {
122         padding-top: @module-docheader-height + @module-body-padding-vertical;
123 }