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