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