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