[BUGFIX] Move SCSS instructions from modal to install.scss
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / component / _modal.scss
1 //
2 // Modals
3 //
4
5 //
6 // Variables
7 //
8 $modal-notice-bg: $btn-default-bg;
9 $modal-notice-color: $btn-default-color;
10 $modal-notice-border: $btn-default-border;
11 $modal-info-bg: $btn-info-bg;
12 $modal-info-color: $btn-info-color;
13 $modal-info-border: $btn-info-border;
14 $modal-success-bg: $btn-success-bg;
15 $modal-success-color: $btn-success-color;
16 $modal-success-border: $btn-success-border;
17 $modal-warning-bg: $btn-warning-bg;
18 $modal-warning-color: $btn-warning-color;
19 $modal-warning-border: $btn-warning-border;
20 $modal-danger-bg: $btn-danger-bg;
21 $modal-danger-color: $btn-danger-color;
22 $modal-danger-border: $btn-danger-border;
23
24 //
25 // Component
26 //
27 .modal {
28     .close {
29         color: inherit;
30         padding: 0;
31         margin: 0;
32         text-shadow: rgba(0, 0, 0, 0.5) 0 0 3px;
33         opacity: 0.5;
34         user-select: none;
35
36         &:hover,
37         &:active {
38             box-shadow: none;
39             outline: none;
40             background: none;
41             opacity: 1;
42         }
43     }
44 }
45
46 .modal-dialog {
47     display: flex;
48     flex-direction: column;
49     align-items: stretch;
50     justify-content: center;
51     margin: 0 auto !important;
52     height: 100vh;
53     width: 100vw;
54 }
55
56 .modal-content {
57     display: flex;
58     flex-direction: column;
59     margin: 0 auto;
60     max-height: calc(100vh - 40px);
61     max-width: calc(100vw - 40px);
62
63     .help-block {
64         margin-bottom: 0;
65     }
66 }
67
68 .modal-body {
69     flex: 1 1 auto;
70     overflow-y: auto;
71     padding-bottom: 0;
72
73     &:after {
74         content: "";
75         display: block;
76         height: $modal-inner-padding;
77     }
78 }
79
80 .modal-header,
81 .modal-footer {
82     padding: 10px 15px;
83 }
84
85 .modal-footer {
86     .btn {
87         margin-right: 0;
88         padding-left: 1em;
89         padding-right: 1em;
90
91         .icon {
92             margin-left: -2px;
93             margin-right: 4px;
94         }
95
96         span {
97             vertical-align: middle;
98         }
99     }
100 }
101
102 .modal-content {
103     transition: margin-top 0.1s ease-in;
104     border: none;
105
106     .modal-loading {
107         position: absolute;
108         display: flex;
109         height: 100%;
110         width: 100%;
111         justify-content: center;
112         align-items: center;
113     }
114 }
115
116 //
117 // Image manipulation
118 //
119 .modal-image-manipulation {
120     .modal-body {
121         padding: 0;
122         display: flex;
123     }
124
125     .modal-panel-main {
126         overflow: visible;
127         background-image: url("../Images/cropper-background.png");
128         display: flex;
129         align-items: center;
130         justify-content: center;
131         padding: 20px;
132         width: 100%;
133
134         img {
135             max-width: 100%;
136         }
137     }
138
139     .modal-panel-sidebar {
140         padding: 15px;
141         flex-shrink: 0;
142         border-left: 1px solid rgba(0, 0, 0, 0.25);
143         position: relative;
144         overflow: auto;
145         -webkit-overflow-scrolling: touch;
146         width: 200px;
147
148         @media (min-width: $screen-sm-min) {
149             width: 250px;
150         }
151
152         @media (min-width: $screen-md-min) {
153             width: 300px;
154         }
155     }
156 }
157
158 //
159 // Iframe
160 //
161 .modal-type-iframe {
162     padding: 0;
163
164     .modal-body {
165         padding: 0;
166     }
167 }
168
169 .modal-iframe {
170     display: block;
171     border: 0;
172     height: 100%;
173     width: 100%;
174     position: absolute;
175     top: 0;
176     left: 0;
177 }
178
179 //
180 // Size
181 //
182 .modal-size-small {
183     .modal-content {
184         width: 440px;
185     }
186 }
187
188 .modal-size-default {
189     .modal-content {
190         width: 600px;
191     }
192 }
193
194 .modal-size-medium {
195     .modal-content {
196         width: 800px;
197         height: 520px;
198     }
199 }
200
201 .modal-size-large {
202     .modal-content {
203         width: 1000px;
204         height: 800px;
205     }
206 }
207
208 .modal-size-full {
209     .modal-content {
210         width: 1800px;
211         height: 1200px;
212     }
213 }
214
215 //
216 // Severity
217 //
218 .modal-severity-notice {
219     .modal-header {
220         background-color: $modal-notice-bg;
221         color: $modal-notice-color;
222         border-bottom-color: $modal-notice-border;
223     }
224 }
225
226 .modal-severity-info {
227     .modal-header {
228         background-color: $modal-info-bg;
229         color: $modal-info-color;
230         border-bottom-color: $modal-info-border;
231     }
232 }
233
234 .modal-severity-success {
235     .modal-header {
236         background-color: $modal-success-bg;
237         color: $modal-success-color;
238         border-bottom-color: $modal-success-border;
239     }
240 }
241
242 .modal-severity-warning {
243     .modal-header {
244         background-color: $modal-warning-bg;
245         color: $modal-warning-color;
246         border-bottom-color: $modal-warning-border;
247     }
248 }
249
250 .modal-severity-danger {
251     .modal-header {
252         background-color: $modal-danger-bg;
253         color: $modal-danger-color;
254         border-bottom-color: $modal-danger-border;
255     }
256 }
257
258 //
259 // Variant
260 //
261 .modal-style-dark {
262     color: #fff;
263
264     .modal-header {
265         color: #fff;
266         background-color: #484848;
267         border-bottom-color: #000;
268     }
269
270     .modal-content {
271         overflow: hidden;
272         background-color: #292929;
273     }
274
275     .modal-body,
276     .modal-footer {
277         background-color: #292929;
278         color: #fff;
279     }
280
281     .modal-footer {
282         border-top: 1px solid #000;
283     }
284 }
285
286 //
287 // T3JS-Modal
288 //
289 .t3js-modal-footer {
290     .form-inline {
291         display: block;
292         margin: 1em 0;
293         width: 100%;
294     }
295
296     label {
297         margin-right: 10px;
298     }
299 }