1 |
|
2 | $color-overlay: rgba(0, 0, 0, .5) !default;
|
3 |
|
4 |
|
5 | $dialog-position-top: 5% !default;
|
6 |
|
7 |
|
8 |
|
9 | $transition-duration: 500ms !default;
|
10 |
|
11 |
|
12 |
|
13 | $transition-timing-function: ease-in-out !default;
|
14 |
|
15 |
|
16 | body.dialog-open {
|
17 | overflow: hidden;
|
18 |
|
19 | ngx-smart-modal {
|
20 | position: absolute;
|
21 | left: 0;
|
22 | top: 0;
|
23 | right: 0;
|
24 | bottom: 0;
|
25 | overflow-y: auto;
|
26 | }
|
27 | }
|
28 |
|
29 |
|
30 | .nsm-dialog-btn-close {
|
31 | border: 0;
|
32 | background: none;
|
33 | color: #2d2d2d;
|
34 | position: absolute;
|
35 | top: 8px;
|
36 | right: 8px;
|
37 | font-size: 1.2em;
|
38 | cursor: pointer;
|
39 | }
|
40 |
|
41 |
|
42 | .overlay {
|
43 | position: fixed;
|
44 | top: 0;
|
45 | bottom: 0;
|
46 | left: 0;
|
47 | right: 0;
|
48 | overflow-y: auto;
|
49 | transition: all $transition-duration;
|
50 | background-color: $color-overlay;
|
51 | z-index: 999;
|
52 |
|
53 | &.nsm-overlay-close,
|
54 | &.transparent {
|
55 | background-color: transparent;
|
56 | }
|
57 | }
|
58 |
|
59 |
|
60 | .nsm-dialog {
|
61 | position: absolute;
|
62 |
|
63 |
|
64 | &:not(.nsm-dialog-open),
|
65 | &:not(.nsm-dialog-close) {
|
66 | opacity: 0;
|
67 | min-height: 0;
|
68 | width: 0;
|
69 | max-width: 0;
|
70 | visibility: hidden;
|
71 | overflow: hidden;
|
72 | }
|
73 |
|
74 |
|
75 | &.nsm-dialog-open {
|
76 | opacity: 1;
|
77 | visibility: visible;
|
78 | min-height: 200px;
|
79 | width: 90%;
|
80 | max-width: 520px;
|
81 | background-color: #fff;
|
82 | border-radius: 2px;
|
83 | right: 0;
|
84 | left: 0;
|
85 | top: $dialog-position-top;
|
86 | margin-bottom: 20px;
|
87 | margin-right: auto;
|
88 | margin-left: auto;
|
89 | padding: 12px;
|
90 | box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12);
|
91 |
|
92 | @media (min-width: 768px) {
|
93 | margin-bottom: 40px;
|
94 | }
|
95 | }
|
96 |
|
97 |
|
98 | &.nsm-dialog-close {
|
99 | opacity: 0;
|
100 | }
|
101 | }
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 | .nsm-dialog-animation-fade {
|
109 | transition: opacity $transition-duration;
|
110 | }
|
111 |
|
112 |
|
113 | .nsm-dialog-animation-ltr {
|
114 | left: -50%;
|
115 | transition: left $transition-duration $transition-timing-function, opacity $transition-duration;
|
116 |
|
117 | &.nsm-dialog-open {
|
118 | left: 0;
|
119 | }
|
120 |
|
121 | &.nsm-dialog-close {
|
122 | left: -50%;
|
123 | }
|
124 | }
|
125 |
|
126 |
|
127 | .nsm-dialog-animation-rtl {
|
128 | right: -50%;
|
129 | transition: right $transition-duration $transition-timing-function, opacity $transition-duration;
|
130 |
|
131 | &.nsm-dialog-open {
|
132 | right: 0;
|
133 | }
|
134 |
|
135 | &.nsm-dialog-close {
|
136 | right: -50%;
|
137 | }
|
138 | }
|
139 |
|
140 |
|
141 | .nsm-dialog-animation-ttb {
|
142 | top: -50%;
|
143 | transition: top $transition-duration $transition-timing-function, opacity $transition-duration;
|
144 |
|
145 | &.nsm-dialog-open {
|
146 | top: $dialog-position-top;
|
147 | }
|
148 |
|
149 | &.nsm-dialog-close {
|
150 | top: -50%;
|
151 | }
|
152 | }
|
153 |
|
154 |
|
155 | .nsm-dialog-animation-btt {
|
156 | top: 100%;
|
157 | transition: top $transition-duration $transition-timing-function, opacity $transition-duration;
|
158 |
|
159 | &.nsm-dialog-open {
|
160 | top: $dialog-position-top;
|
161 | }
|
162 |
|
163 | &.nsm-dialog-close {
|
164 | top: 100%;
|
165 | }
|
166 | }
|