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