1 | @import '../../styles/common/colors';
|
2 | @import '../../styles/common/_config';
|
3 | @import '../../styles/common/functions';
|
4 | @import '../../styles/common/screen';
|
5 |
|
6 | .modal-component {
|
7 | position: fixed;
|
8 | z-index: z('modal');
|
9 |
|
10 | &.modal-open {
|
11 | height: 100%;
|
12 | left: 0;
|
13 | overflow: auto;
|
14 | top: 0;
|
15 | width: 100%;
|
16 |
|
17 | .modal-content {
|
18 | opacity: 1;
|
19 | visibility: visible;
|
20 | transform: scale(1);
|
21 | z-index: z('modal');
|
22 | }
|
23 | }
|
24 |
|
25 | .modal-scroll-container {
|
26 | align-items: center;
|
27 | box-sizing: border-box;
|
28 | display: flex;
|
29 | padding: 80px 0;
|
30 | justify-content: center;
|
31 | width: 100%;
|
32 | }
|
33 |
|
34 | .modal-content {
|
35 | background: $white;
|
36 | border-radius: 3px;
|
37 | box-shadow: 0 8px 24px 0 rgba($primary-3, 0.5);
|
38 | display: flex;
|
39 | flex-direction: column;
|
40 | opacity: 0;
|
41 | max-width: 708px;
|
42 | position: relative;
|
43 | padding: 24px;
|
44 | transform: scale(0.7);
|
45 | transition: scale 0.3s, opacity 0.3s, transform 0.3s, width 0.3s, max-width 0.3s;
|
46 | visibility: hidden;
|
47 | width: 75%;
|
48 | will-change: scale, opacity, transform;
|
49 | z-index: z('below');
|
50 |
|
51 | .modal-header {
|
52 | .modal-close {
|
53 | position: absolute;
|
54 | right: 24px;
|
55 |
|
56 | > svg {
|
57 | cursor: pointer;
|
58 | }
|
59 | }
|
60 |
|
61 | h1 {
|
62 | margin: 0 0 16px;
|
63 | }
|
64 | }
|
65 |
|
66 | .modal-body {
|
67 | font-size: 14px;
|
68 | color: $navy-text;
|
69 | margin: 0 -16px;
|
70 | padding: 0 16px;
|
71 |
|
72 | p:last-child {
|
73 | margin-bottom: 0;
|
74 | }
|
75 | }
|
76 |
|
77 | .modal-footer {
|
78 | display: block;
|
79 | }
|
80 |
|
81 | .modal-actions {
|
82 | margin-top: 24px;
|
83 | float: right;
|
84 |
|
85 | button {
|
86 | margin-right: 0;
|
87 | margin-left: 12px;
|
88 | }
|
89 | }
|
90 |
|
91 | @media (max-width: 600px) {
|
92 | bottom: 0;
|
93 | box-sizing: border-box;
|
94 | overflow: auto;
|
95 | position: fixed;
|
96 | left: 0;
|
97 | right: 0;
|
98 | top: 0;
|
99 | width: 100%;
|
100 | }
|
101 |
|
102 | &.modal-sm {
|
103 | max-width: 320px;
|
104 |
|
105 | @media (max-width: 600px) {
|
106 | max-width: 100%;
|
107 | }
|
108 | }
|
109 |
|
110 | &.modal-md {
|
111 | max-width: 588px;
|
112 |
|
113 | @media (max-width: 600px) {
|
114 | max-width: 100%;
|
115 | }
|
116 | }
|
117 |
|
118 | &.modal-lg {
|
119 | max-width: 1200px;
|
120 |
|
121 | @media (max-width: 600px) {
|
122 | max-width: 100%;
|
123 | }
|
124 | }
|
125 | }
|
126 | }
|