[BUGFIX] Align docheader and pagetree toppanel correctly
[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         &:extend(.clearfix all);
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                 &:extend(.clearfix all);
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                         vertical-align: top;
80                         margin: 0;
81                         @media (min-width: @screen-sm-min) {
82                                 display: inline-block;
83                         }
84                         .form-control {
85                                 vertical-align: top;
86                         }
87                 }
88                 .form-inline-spaced {
89                         margin: 0;
90                 }
91                 .panel {
92                         background-color: transparent;
93                         margin: 0;
94                         border-left: none;
95                         border-right: none;
96                         border-bottom: none;
97                         border-radius: 0;
98                         margin-left: -@module-docheader-padding-horizontal;
99                         margin-right: -@module-docheader-padding-horizontal;
100                         background-color: #fafafa;
101                         box-shadow: none;
102                         .panel-body {
103                                 padding: ceil(@module-docheader-padding-horizontal / 3) @module-docheader-padding-horizontal;
104                         }
105                 }
106         }
107         .module-docheader-bar-search  {
108                 margin-bottom: 0;
109         }
110         .module-docheader-bar-column-left {
111                 float: left;
112         }
113         .module-docheader-bar-column-right {
114                 float: right;
115         }
116 }
117
118
119 //
120 // Body
121 //
122 .module-body {
123         padding: @module-body-padding;
124         > .callout:first-child {
125                 margin-top: 0;
126         }
127 }
128 .module-docheader + .module-body {
129         padding-top: @module-docheader-height + @module-body-padding-vertical;
130 }