b63d1425a65acbff5752af9d7ab9de92a4c9c91e
[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 // Components
19 //
20 @import "component/modal";
21
22 //
23 // Include chosen CSS file
24 //
25 @import "libs/chosen";
26 @import "libs/gridder";
27 @import "component/card";
28 @import "component/colorpicker";
29 @import "typo3/main_form";
30 @import "typo3/icons";
31
32 //
33 // Include elements
34 //
35 @import "typo3/element_docheader";
36 @import "typo3/element_message";
37 @import "typo3/element_table";
38 @import "typo3/element_tab";
39
40 //
41 // Include modules
42 //
43 @import "typo3/module_install";
44
45 body.backend .module {
46 background: $gray-lighter;
47 }
48
49 .content-area {
50 padding-bottom: 35px;
51
52 > h3 {
53 margin-top: 0;
54 }
55
56 > *:last-child {
57 margin-bottom: 0;
58 }
59 }
60
61 .logo-pageheader {
62 img {
63 padding-bottom: 3px;
64 }
65 }
66
67 img.logo {
68 vertical-align: bottom;
69 }
70
71 .typo3-message > h4 {
72 margin-bottom: 0;
73 }
74
75 .typo3-message p {
76 margin-top: 9px;
77 }
78
79 .t3-install-displaytwinimageimages {
80 border: 1px solid #ccc;
81 padding: 10px;
82 }
83
84 .t3-install-displaytwinimagetextarea {
85 pre {
86 border-top: 0;
87 }
88 }
89
90 .t3-languagePacks-inactive {
91 color: #aaa;
92 }
93
94 .bg-transparent-emulation {
95 padding: 10px;
96 text-align: center;
97 background: url("#{$path-sysext}/install/Resources/Public/Images/bg_transparent_emulation.png");
98
99 img {
100 max-width: 300px;
101 }
102 }
103
104 .alert-notice {
105 @include alert-variant($btn-default-bg, $btn-default-border, $btn-default-color);
106 }
107
108 h1:first-child {
109 margin-top: 0;
110 }
111
112 .typo3-docheader {
113 &-functions,
114 &-buttons {
115 min-height: 20px;
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 .message {
155 display: block;
156 padding-left: 16px;
157 margin-top: 5px;
158 }
159 }
160
161 a[data-toggle="collapse"] {
162 display: block;
163 }
164
165 @media (min-width: $screen-md-min) {
166 .affix-bottom {
167 position: absolute;
168 }
169
170 body.standalone .affix-top {
171 position: relative;
172 }
173
174 .affix {
175 position: fixed;
176 top: 35px;
177 }
178
179 body.backend .affix-top {
180 position: fixed;
181 top: 35px;
182 }
183
184 body.backend .leftNavigation {
185 min-height: 425px;
186 }
187 }
188
189 hr {
190 border-top-color: $panel-default-heading-bg;
191 }
192
193 .copyright .panel-default:last-child {
194 margin-bottom: 0;
195 }
196
197 #fixed-footer-handler {
198 height: 32px;
199 }
200
201 .fixed {
202 position: fixed;
203 bottom: 0;
204 background-color: grey;
205
206 .footer-innerWrap {
207 padding: 1.5em;
208 }
209 }
210
211 // override 'position: fixed' (set by bootstrap affix via JS) if viewport < MD
212 // menu is placed above the content
213 #menuWrapper {
214 @media (max-width: $screen-sm-max) {
215 position: relative !important;
216 margin-bottom: 30px;
217 }
218 }
219
220 #mobileMenuWrapper {
221 margin-bottom: 10px;
222 }
223
224 #install-menu-button {
225 float: right;
226 margin-bottom: 20px;
227
228 .navbar-toggle {
229 border: 0;
230 background: #fff;
231
232 .icon-bar {
233 display: block;
234 width: 22px;
235 height: 2px;
236 border-radius: 1px;
237 background-color: black;
238
239 & + .icon-bar {
240 margin-top: 4px;
241 }
242 }
243 }
244 }
245
246 //
247 // Styles for the "clearable" jquery plugin.
248 //
249 .form-control-clearable {
250 position: relative;
251
252 .form-control {
253 padding-right: 2.3em;
254 }
255
256 .close {
257 position: absolute;
258 height: 16px;
259 z-index: 3;
260 top: 50%;
261 right: 0.5em;
262 transform: translate(0, -50%);
263
264 .icon {
265 vertical-align: 0;
266 }
267 }
268 }
269
270 .input-group {
271 .form-control-clearable {
272 display: table-cell;
273
274 .form-control {
275 display: block;
276 }
277 }
278 }
279
280 a[data-toggle="collapse"] {
281 text-decoration: none;
282 }
283
284 .upgrade_analysis_item_to_filter pre a {
285 text-decoration: underline;
286 }
287
288 #phpinfo table {
289 width: 100%;
290 table-layout: fixed;
291 word-wrap: break-word;
292 }
293
294 .upgradeWizards-wizards-output {
295 .row-explanation {
296 white-space: pre-wrap;
297 }
298 }