1e6180ba44d482ae2349509d73cac15e499d2dcc
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / component / _module.scss
1 //
2 // ModuleTemplate
3 // ======
4 // General component for backend modules.
5 //
6
7 //
8 // Variables
9 //
10 $module-bg: #fff;
11 $module-color: inherit;
12 $module-dark-bg: #333;
13 $module-dark-color: #ccc;
14 $module-docheader-bg: #eee;
15 $module-docheader-border: #c3c3c3;
16 $module-docheader-zindex: 300;
17 $module-docheader-height: 65px;
18 $module-docheader-padding-vertical: 0;
19 $module-docheader-padding-horizontal: 24px;
20 $module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal;
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 $module-body-padding-vertical: 24px;
26 $module-body-padding-horizontal: 24px;
27 $module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal;
28
29 //
30 // Template
31 //
32 .module {
33     min-height: 100%;
34     width: 100%;
35     background-color: $module-bg;
36     color: $module-color;
37 }
38
39 .module-dark {
40     background-color: $module-dark-bg;
41     color: $module-dark-color;
42 }
43
44 //
45 // Loading indicator
46 //
47 .module-loading-indicator {
48     min-height: 5px;
49     width: 100%;
50     z-index: 999999;
51
52     &.nprogress-custom-parent {
53         position: fixed;
54         top: 0;
55     }
56 }
57
58 //
59 // Docheader
60 //
61 .module-docheader {
62     @extend .clearfix;
63
64     position: fixed;
65     width: 100%;
66     top: 0;
67     left: 0;
68     min-height: $module-docheader-height;
69     z-index: $module-docheader-zindex;
70     background-color: $module-docheader-bg;
71     border-bottom: 1px solid $module-docheader-border;
72     padding: $module-docheader-padding;
73
74     @include transition(margin-top 0.3s ease-in-out);
75
76     .module-docheader-bar {
77         @extend .clearfix;
78
79         min-height: $module-docheader-bar-height;
80         margin: $module-docheader-bar-margin;
81         line-height: $module-docheader-bar-height;
82
83         &.row {
84             margin-left: -15px;
85             margin-right: -15px;
86         }
87
88         label {
89             margin-top: 0;
90             margin-bottom: 0;
91         }
92
93         .form-inline {
94             .form-group {
95                 display: table;
96
97                 label {
98                     display: table-cell;
99                     font-size: 11px;
100                     font-weight: normal;
101                     line-height: ($module-docheader-bar-height - 10px);
102                     padding: 4px;
103                     border-radius: 2px 0 0 2px;
104                     border: 1px solid #bbb;
105                     border-right: 0;
106                     background-color: rgba(0, 0, 0, 0.05);
107                 }
108
109                 label + select {
110                     display: table-cell;
111                     border-top-left-radius: 0;
112                     border-bottom-left-radius: 0;
113                 }
114             }
115         }
116
117         .form-group {
118             vertical-align: top;
119             margin: 0;
120             display: inline-block;
121
122             .form-control {
123                 vertical-align: top;
124             }
125         }
126
127         .form-inline-spaced {
128             margin: 0;
129         }
130
131         .panel {
132             margin: 0;
133             border-left: none;
134             border-right: none;
135             border-bottom: none;
136             border-radius: 0;
137             margin-left: -$module-docheader-padding-horizontal;
138             margin-right: -$module-docheader-padding-horizontal;
139             background-color: #fafafa;
140             box-shadow: none;
141
142             .panel-body {
143                 padding: ceil($module-docheader-padding-horizontal / 3) $module-docheader-padding-horizontal;
144             }
145         }
146
147         @media (max-width: $screen-sm) {
148             .text-right {
149                 text-align: left;
150             }
151         }
152     }
153
154     .module-docheader-bar-search {
155         margin-bottom: 0;
156     }
157
158     .module-docheader-bar-column-left {
159         float: left;
160     }
161
162     .module-docheader-bar-column-right {
163         float: right;
164     }
165 }
166
167 .module-docheader-bar-navigation {
168     .module-docheader-bar-column-left {
169         white-space: nowrap;
170
171         @media (max-width: $screen-sm) {
172             white-space: normal;
173         }
174     }
175
176     .form-group select {
177         width: 100%;
178     }
179 }
180
181 //
182 // Body
183 //
184 .module-body {
185     padding: $module-body-padding;
186
187     > .callout:first-child {
188         margin-top: 0;
189     }
190
191     > .container {
192         padding-left: 0;
193         padding-right: 0;
194     }
195
196     .container-small {
197         max-width: 768px;
198         margin: 0 auto;
199     }
200 }
201
202 .module-docheader + .module-body {
203     padding-top: $module-docheader-height + $module-body-padding-vertical;
204 }