faa465b4d4f0afd0009adb8f969bc6d9fb1b09df
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / install.scss
1 //
2 // Install Tool
3 // =========
4 // Contains all needed styles for the TYPO3 Intall Tool.
5 //
6 //
7 // Load global Variables
8 //
9 @import "variables/main";
10
11 $grid-float-breakpoint: $screen-md-min;
12
13 //
14 // Load minimal Setup including variables
15 //
16 @import "minimal";
17
18 //
19 // Include chosen CSS file
20 //
21 @import "libs/chosen";
22 @import "libs/gridder";
23 @import "component/card";
24
25 //
26 // Include elements
27 //
28
29 @import "typo3/element_docheader";
30 @import "typo3/element_message";
31
32 body.backend .module {
33     background: $gray-lighter;
34 }
35
36 .content-area {
37     padding-bottom: 35px;
38
39     > h3 {
40         margin-top: 0;
41     }
42
43     > *:last-child {
44         margin-bottom: 0;
45     }
46 }
47
48 .logo-pageheader {
49     img {
50         padding-bottom: 3px;
51     }
52 }
53
54 img.logo {
55     vertical-align: bottom;
56 }
57
58 .typo3-message > h4 {
59     margin-bottom: 0;
60 }
61
62 .typo3-message p {
63     margin-top: 9px;
64 }
65
66 .t3-install-displaytwinimageimages {
67     border: 1px solid #ccc;
68     padding: 10px;
69 }
70
71 .t3-install-displaytwinimagetextarea {
72     pre {
73         border-top: 0;
74     }
75 }
76
77 .bg-transparent-emulation {
78     padding: 10px;
79     text-align: center;
80     background: url("#{$path-sysext}/install/Resources/Public/Images/bg_transparent_emulation.png");
81
82     img {
83         max-width: 300px;
84     }
85 }
86
87 .alert-notice {
88     @include alert-variant($btn-default-bg, $btn-default-border, $btn-default-color);
89 }
90
91 .nav-pills > li > a {
92     border-radius: 0;
93 }
94
95 h1:first-child {
96     margin-top: 0;
97 }
98
99 .typo3-docheader {
100     &-functions,
101     &-buttons {
102         min-height: 20px;
103     }
104 }
105
106 .item {
107     margin: 1em;
108     border: 1px solid $panel-default-heading-bg;
109 }
110
111 .item .item-heading {
112     padding: 1em;
113     background-color: $panel-default-heading-bg;
114 }
115
116 .item .item-body {
117     padding: 1em;
118 }
119
120 .list-group-item {
121     a {
122         display: block;
123     }
124
125     &.active {
126         a {
127             color: #fff;
128         }
129     }
130 }
131
132 .caret {
133     border: 0;
134     padding-left: 10px;
135
136     &:after {
137         position: relative;
138         top: -8px;
139         left: -10px;
140         content: $fa-var-caret-down;
141         font-family: FontAwesome;
142     }
143 }
144
145 .collapsed .caret {
146     &:after {
147         content: $fa-var-caret-right;
148         font-family: FontAwesome;
149     }
150 }
151
152 .panel-heading {
153     position: relative;
154
155     .panel-checkbox {
156         margin: 0;
157         position: absolute;
158         left: 1em;
159         top: 50%;
160         transform: translate(0, -50%);
161     }
162
163     .panel-checkbox + .panel-title {
164         padding-left: 18px;
165     }
166
167     .message {
168         display: block;
169         padding-left: 16px;
170         margin-top: 5px;
171     }
172 }
173
174 a[data-toggle="collapse"] {
175     display: block;
176 }
177
178 @media (min-width: $screen-md-min) {
179     .affix-bottom {
180         position: absolute;
181     }
182
183     body.standalone .affix-top {
184         position: relative;
185     }
186
187     .affix {
188         position: fixed;
189         top: 35px;
190     }
191
192     body.backend .affix-top {
193         position: fixed;
194         top: 35px;
195     }
196
197     body.backend .leftNavigation {
198         min-height: 425px;
199     }
200 }
201
202 hr {
203     border-top-color: $panel-default-heading-bg;
204 }
205
206 .copyright .panel-default:last-child {
207     margin-bottom: 0;
208 }
209
210 #fixed-footer-handler {
211     height: 32px;
212 }
213
214 .fixed {
215     position: fixed;
216     bottom: 0;
217     background-color: grey;
218
219     .footer-innerWrap {
220         padding: 1.5em;
221     }
222 }
223
224 // override 'position: fixed' (set by bootstrap affix via JS) if viewport < MD
225 // menu is placed above the content
226 #menuWrapper {
227     @media (max-width: $screen-sm-max) {
228         position: relative !important;
229         margin-bottom: 30px;
230     }
231 }
232
233 #mobileMenuWrapper {
234     margin-bottom: 10px;
235 }
236
237 #install-menu-button {
238     float: right;
239     margin-bottom: 20px;
240
241     .navbar-toggle {
242         border: 0;
243         background: #fff;
244
245         .icon-bar {
246             display: block;
247             width: 22px;
248             height: 2px;
249             border-radius: 1px;
250             background-color: black;
251
252             & + .icon-bar {
253                 margin-top: 4px;
254             }
255         }
256     }
257 }
258
259 //
260 // Styles for the "clearable" jquery plugin.
261 //
262 .form-control-clearable {
263     position: relative;
264
265     .form-control {
266         padding-right: 2.3em;
267     }
268
269     .close {
270         position: absolute;
271         height: 16px;
272         z-index: 3;
273         top: 50%;
274         right: 0.5em;
275         transform: translate(0, -50%);
276
277         .icon {
278             vertical-align: 0;
279         }
280     }
281 }
282
283 .input-group {
284     .form-control-clearable {
285         display: table-cell;
286
287         .form-control {
288             display: block;
289         }
290     }
291 }
292
293 @mixin panel-risk-levels($high-color, $medium-color) {
294     &.risk-high > .panel-heading {
295         background: $high-color;
296         color: $gray-lighter;
297     }
298
299     &.risk-medium > .panel-heading {
300         background: $medium-color;
301         color: $gray-darker;
302     }
303
304     &.risk-low > .panel-heading {
305         background: white;
306         color: $gray-darker;
307     }
308 }
309
310 a[data-toggle="collapse"] {
311     text-decoration: none;
312 }
313
314 .panel-group-flat,
315 .panel-group-rst {
316     .panel-body {
317         padding-right: 0;
318     }
319 }
320
321 .panel-flat,
322 .panel-rst,
323 .panel-version {
324     border: 0;
325     border-left: 2px solid $gray-light;
326     border-radius: 0;
327     margin: 0;
328
329     &.panel-default .panel-heading {
330         background: $gray-lighter;
331     }
332
333     &.panel-breaking,
334     &.panel-danger {
335         @include panel-variant($brand-danger, #fff, $brand-danger, $brand-danger);
336         @include panel-risk-levels($brand-danger, lighten($brand-danger, 40));
337
338         .panel-progress .panel-progress-bar {
339             background-color: $brand-danger;
340         }
341     }
342
343     &.panel-deprecation,
344     &.panel-warning {
345         @include panel-variant($brand-warning, #fff, $brand-warning, $brand-warning);
346         @include panel-risk-levels($brand-warning, lighten($brand-warning, 30));
347
348         .panel-progress .panel-progress-bar {
349             background-color: $brand-warning;
350         }
351     }
352
353     &.panel-feature,
354     &.panel-success {
355         @include panel-variant($brand-success, #fff, $brand-success, $brand-success);
356         @include panel-risk-levels($brand-success, lighten($brand-success, 40));
357
358         .panel-progress .panel-progress-bar {
359             background-color: $brand-success;
360         }
361     }
362
363     &.panel-important,
364     &.panel-info {
365         @include panel-variant($brand-info, #fff, $brand-info, $brand-info);
366         @include panel-risk-levels($brand-info, lighten($brand-info, 30));
367
368         .panel-progress .panel-progress-bar {
369             background-color: $brand-info;
370         }
371     }
372
373     .panel-heading {
374         position: relative;
375
376         a.link-action {
377             cursor: pointer;
378         }
379
380         strong {
381             line-height: 1.5em;
382         }
383     }
384
385     pre {
386         margin: 0;
387         border-radius: 0;
388         border: 0;
389         border-top: 1px solid $gray-light;
390         white-space: pre-wrap;
391         word-break: normal;
392         word-wrap: normal;
393     }
394 }
395
396 .upgrade_analysis_item_to_filter pre a {
397     text-decoration: underline;
398 }
399
400 #phpinfo table {
401     width: 100%;
402     table-layout: fixed;
403     word-wrap: break-word;
404 }