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