[BUGFIX] Fix height of the modal content
[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
64 .modal-body {
65     flex: 1 1 auto;
66     overflow-y: auto;
67 }
68
69 .modal-header,
70 .modal-footer {
71     padding: 10px 15px;
72 }
73
74 .modal-footer {
75     .btn {
76         margin-right: 0;
77         padding-left: 1em;
78         padding-right: 1em;
79
80         .icon {
81             margin-left: -2px;
82             margin-right: 4px;
83         }
84
85         span {
86             vertical-align: middle;
87         }
88     }
89 }
90
91 .modal-content {
92     transition: margin-top 0.1s ease-in;
93     border: none;
94
95     .loadmessage {
96         text-align: center;
97         color: $gray-darker;
98     }
99 }
100
101 //
102 // Image manipulation
103 //
104 .modal-image-manipulation {
105     .modal-body {
106         padding: 0;
107         display: flex;
108     }
109
110     .modal-panel-main {
111         overflow: visible;
112         background-image: url("../Images/cropper-background.png");
113         display: flex;
114         align-items: center;
115         justify-content: center;
116         padding: 20px;
117         width: 100%;
118
119         img {
120             max-width: 100%;
121         }
122     }
123
124     .modal-panel-sidebar {
125         padding: 15px;
126         flex-shrink: 0;
127         border-left: 1px solid rgba(0, 0, 0, 0.25);
128         position: relative;
129         overflow: auto;
130         -webkit-overflow-scrolling: touch;
131         width: 200px;
132
133         @media (min-width: $screen-sm-min) {
134             width: 250px;
135         }
136
137         @media (min-width: $screen-md-min) {
138             width: 300px;
139         }
140     }
141 }
142
143 //
144 // Iframe
145 //
146 .modal-type-iframe {
147     padding: 0;
148
149     .modal-body {
150         padding: 0;
151     }
152 }
153
154 .modal-iframe {
155     display: block;
156     border: 0;
157     height: 100%;
158     width: 100%;
159 }
160
161 //
162 // Size
163 //
164 .modal-size-small {
165     .modal-content {
166         width: 440px;
167     }
168 }
169
170 .modal-size-default {
171     .modal-content {
172         width: 600px;
173     }
174 }
175
176 .modal-size-large {
177     .modal-content {
178         width: 1000px;
179         height: 800px;
180     }
181 }
182
183 .modal-size-full {
184     .modal-content {
185         width: 1800px;
186         height: 1200px;
187     }
188 }
189
190 //
191 // Severity
192 //
193 .modal-severity-notice {
194     .modal-header {
195         background-color: $modal-notice-bg;
196         color: $modal-notice-color;
197         border-bottom-color: $modal-notice-border;
198     }
199 }
200
201 .modal-severity-info {
202     .modal-header {
203         background-color: $modal-info-bg;
204         color: $modal-info-color;
205         border-bottom-color: $modal-info-border;
206     }
207 }
208
209 .modal-severity-success {
210     .modal-header {
211         background-color: $modal-success-bg;
212         color: $modal-success-color;
213         border-bottom-color: $modal-success-border;
214     }
215 }
216
217 .modal-severity-warning {
218     .modal-header {
219         background-color: $modal-warning-bg;
220         color: $modal-warning-color;
221         border-bottom-color: $modal-warning-border;
222     }
223 }
224
225 .modal-severity-danger {
226     .modal-header {
227         background-color: $modal-danger-bg;
228         color: $modal-danger-color;
229         border-bottom-color: $modal-danger-border;
230     }
231 }
232
233 //
234 // Variant
235 //
236 .modal-style-dark {
237     color: #fff;
238
239     .modal-header {
240         color: #fff;
241         background-color: #484848;
242         border-bottom-color: #000;
243     }
244
245     .modal-content {
246         overflow: hidden;
247         background-color: #292929;
248     }
249
250     .modal-body,
251     .modal-footer {
252         background-color: #292929;
253         color: #fff;
254     }
255
256     .modal-footer {
257         border-top: 1px solid #000;
258     }
259 }