[TASK] Finetune large modal size
[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 }