8ae0f86c15fcfbaadc16a1b26620edbcb1765a11
[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 .panel-rst {
289     .panel-heading .panel-title a {
290         cursor: pointer;
291         strong {
292             line-height: 1.5em;
293         }
294     }
295
296     pre {
297         margin: 0;
298         border-radius: 0;
299         border: 0;
300         border-top: 1px solid $gray-light;
301         white-space: pre-wrap;
302         word-break: normal;
303         word-wrap: normal;
304     }
305
306 }
307
308 .panel-breaking {
309     @include panel-variant($brand-danger, #fff, $brand-danger, $brand-danger);
310     @include panel-risk-levels($brand-danger, lighten($brand-danger,40) );
311 }
312
313 .panel-deprecation {
314     @include panel-variant($brand-warning, #fff, $brand-warning, $brand-warning);
315     @include panel-risk-levels($brand-warning, lighten($brand-warning,30));
316 }
317
318 .panel-feature {
319     @include panel-variant($brand-success, #fff, $brand-success, $brand-success);
320     @include panel-risk-levels($brand-success, lighten($brand-success,40));
321 }
322
323 .panel-important {
324     @include panel-variant($brand-info, #fff, $brand-info, $brand-info);
325     @include panel-risk-levels($brand-info, lighten($brand-info,30));
326 }
327
328 .upgrade_analysis_item_to_filter pre a {
329     text-decoration: underline;
330 }