65a77df556464629215fb5c3b67bde38a28c594b
[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 position: absolute;
160 top: 0;
161 left: 0;
162 }
163
164 //
165 // Size
166 //
167 .modal-size-small {
168 .modal-content {
169 width: 440px;
170 }
171 }
172
173 .modal-size-default {
174 .modal-content {
175 width: 600px;
176 }
177 }
178
179 .modal-size-large {
180 .modal-content {
181 width: 1000px;
182 height: 800px;
183 }
184 }
185
186 .modal-size-full {
187 .modal-content {
188 width: 1800px;
189 height: 1200px;
190 }
191 }
192
193 //
194 // Severity
195 //
196 .modal-severity-notice {
197 .modal-header {
198 background-color: $modal-notice-bg;
199 color: $modal-notice-color;
200 border-bottom-color: $modal-notice-border;
201 }
202 }
203
204 .modal-severity-info {
205 .modal-header {
206 background-color: $modal-info-bg;
207 color: $modal-info-color;
208 border-bottom-color: $modal-info-border;
209 }
210 }
211
212 .modal-severity-success {
213 .modal-header {
214 background-color: $modal-success-bg;
215 color: $modal-success-color;
216 border-bottom-color: $modal-success-border;
217 }
218 }
219
220 .modal-severity-warning {
221 .modal-header {
222 background-color: $modal-warning-bg;
223 color: $modal-warning-color;
224 border-bottom-color: $modal-warning-border;
225 }
226 }
227
228 .modal-severity-danger {
229 .modal-header {
230 background-color: $modal-danger-bg;
231 color: $modal-danger-color;
232 border-bottom-color: $modal-danger-border;
233 }
234 }
235
236 //
237 // Variant
238 //
239 .modal-style-dark {
240 color: #fff;
241
242 .modal-header {
243 color: #fff;
244 background-color: #484848;
245 border-bottom-color: #000;
246 }
247
248 .modal-content {
249 overflow: hidden;
250 background-color: #292929;
251 }
252
253 .modal-body,
254 .modal-footer {
255 background-color: #292929;
256 color: #fff;
257 }
258
259 .modal-footer {
260 border-top: 1px solid #000;
261 }
262 }