1ebbf3f051c661fc6d113e7900da897d858ed88b
[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 @import "bootstrap/navbar";
18
19 //
20 // Include tagsort CSS file
21 //
22 @import "tagsort";
23
24 .content-area {
25 padding-bottom: 35px;
26
27 > h3 {
28 margin-top: 0;
29 }
30
31 > *:last-child {
32 margin-bottom: 0;
33 }
34 }
35
36 .logo-pageheader {
37 img {
38 padding-bottom: 3px;
39 }
40 }
41
42 img.logo {
43 vertical-align: bottom;
44 }
45
46 .typo3-message > h4 {
47 margin-bottom: 0;
48 }
49
50 .typo3-message p {
51 margin-top: 9px;
52 }
53
54 .t3-install-displaytwinimageimages {
55 border: 1px solid #ccc;
56 padding: 10px;
57 }
58
59 .t3-install-displaytwinimagetextarea {
60 pre {
61 border-top: 0;
62 }
63 }
64
65 .bg-transparent-emulation {
66 padding: 10px;
67 text-align: center;
68 background: url("#{$path-sysext}/install/Resources/Public/Images/bg_transparent_emulation.png");
69
70 img {
71 max-width: 300px;
72 }
73 }
74 $alert-success-text: $gray-darker;
75 $alert-success-border: #79a548;
76 $alert-success-bg: lighten(#79a548, 20%);
77 $alert-info-text: $gray-darker;
78 $alert-info-border: #6daae0;
79 $alert-info-bg: lighten(#6daae0, 20%);
80 $alert-warning-text: $gray-darker;
81 $alert-warning-border: #e8a33d;
82 $alert-warning-bg: lighten(#e8a33d, 20%);
83 $alert-danger-text: $gray-darker;
84 $alert-danger-border: #c83c3c;
85 $alert-danger-bg: lighten(#c83c3c, 30%);
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
168 a[data-toggle="collapse"] {
169 display: block;
170 }
171
172 @media (min-width: $screen-md-min) {
173 .affix-bottom {
174 position: absolute;
175 }
176
177 body.standalone .affix-top {
178 position: relative;
179 }
180
181 .affix {
182 position: fixed;
183 top: 35px;
184 }
185
186 body.backend .affix-top {
187 position: fixed;
188 top: 35px;
189 }
190
191 body.backend .leftNavigation {
192 min-height: 425px;
193 }
194 }
195
196 hr {
197 border-top-color: $panel-default-heading-bg;
198 }
199
200 .copyright .panel-default:last-child {
201 margin-bottom: 0;
202 }
203
204 #fixed-footer-handler {
205 height: 32px;
206 }
207
208 .fixed {
209 position: fixed;
210 bottom: 0;
211 background-color: grey;
212
213 .footer-innerWrap {
214 padding: 1.5em;
215 }
216 }
217
218 // override 'position: fixed' (set by bootstrap affix via JS) if viewport < MD
219 // menu is placed above the content
220 #menuWrapper {
221 @media (max-width: $screen-sm-max) {
222 position: relative !important;
223 margin-bottom: 30px;
224 }
225 }
226
227 #install-menu-button {
228 .navbar-toggle {
229 .icon-bar {
230 background-color: black;
231 }
232 }
233 }
234
235 //
236 // Styles for the "clearable" jquery plugin.
237 //
238 .form-control-clearable {
239 position: relative;
240
241 .form-control {
242 padding-right: 2.3em;
243 }
244
245 .close {
246 position: absolute;
247 z-index: 3;
248 font-size: 1.2em;
249 top: 50%;
250 right: 0.5em;
251 margin-top: -0.55em;
252
253 &:before {
254 line-height: 1.5em;
255 }
256 }
257 }
258
259 .input-group {
260 .form-control-clearable {
261 display: table-cell;
262
263 .form-control {
264 display: block;
265 }
266 }
267 }