[TASK] Optimize CSS clearfix usage
[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 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 }