[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 }