1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @use '../../../styles/theming' as *;
|
8 |
|
9 | ::ng-deep nb-layout.modal-drop .layout {
|
10 | position: relative;
|
11 | transition: transform 0.4s, opacity 0.4s;
|
12 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
13 | }
|
14 |
|
15 | ::ng-deep nb-layout.modal-drop.with-search .layout {
|
16 | opacity: 0;
|
17 | transform: scale3d(0.9, 0.9, 1);
|
18 | pointer-events: none;
|
19 | }
|
20 |
|
21 | :host.modal-drop {
|
22 | .search {
|
23 | display: flex;
|
24 | flex-direction: column;
|
25 | justify-content: center;
|
26 | align-items: center;
|
27 | text-align: center;
|
28 | z-index: 1050;
|
29 | position: fixed;
|
30 | top: 0;
|
31 | left: 0;
|
32 | width: 100%;
|
33 | height: 100vh;
|
34 | background: none;
|
35 | pointer-events: none;
|
36 |
|
37 | &::before {
|
38 | content: '';
|
39 | position: absolute;
|
40 | top: 0;
|
41 | right: 0;
|
42 | width: 100%;
|
43 | height: 100%;
|
44 | opacity: 0;
|
45 | transition: opacity 0.4s;
|
46 | }
|
47 |
|
48 | button {
|
49 | font-size: 2.5rem;
|
50 | position: absolute;
|
51 | top: 3rem;
|
52 | @include nb-ltr(right, 3rem);
|
53 | @include nb-rtl(left, 3rem);
|
54 | display: block;
|
55 | opacity: 0;
|
56 | transition: opacity 0.4s;
|
57 | }
|
58 |
|
59 | form {
|
60 | position: relative;
|
61 | margin: 5rem 0 2rem;
|
62 | }
|
63 |
|
64 | input {
|
65 | font-size: 6vw;
|
66 | width: 60%;
|
67 | padding: 0.25rem;
|
68 | text-align: center;
|
69 | opacity: 0;
|
70 | transition: opacity 0.4s;
|
71 | }
|
72 |
|
73 | span {
|
74 | position: relative;
|
75 | z-index: 9;
|
76 | display: block;
|
77 | width: 60%;
|
78 | padding: 0.85rem 0;
|
79 | opacity: 0;
|
80 | transform: translate3d(0, -50px, 0);
|
81 | transition: opacity 0.4s, transform 0.4s;
|
82 | }
|
83 |
|
84 | .form-content {
|
85 | position: relative;
|
86 | z-index: 10;
|
87 | overflow: hidden;
|
88 | transform: translate3d(0, -50px, 0);
|
89 | transition: transform 0.4s;
|
90 |
|
91 | &::after {
|
92 | content: '';
|
93 | position: absolute;
|
94 | top: 0;
|
95 | left: 20%;
|
96 | width: 60%;
|
97 | height: 105%;
|
98 | opacity: 0;
|
99 | transform-origin: 50% 0;
|
100 | }
|
101 | }
|
102 | }
|
103 |
|
104 | &.show {
|
105 | .search {
|
106 | pointer-events: auto;
|
107 |
|
108 | &::before {
|
109 | opacity: 1;
|
110 | }
|
111 |
|
112 | button {
|
113 | opacity: 1;
|
114 | }
|
115 |
|
116 | .form-content {
|
117 | transform: translate3d(0, 0, 0);
|
118 | transition: none;
|
119 |
|
120 | &::after {
|
121 | animation: scaleUpDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
122 | }
|
123 | }
|
124 |
|
125 | input {
|
126 | opacity: 1;
|
127 | transition: opacity 0s 0.4s;
|
128 | }
|
129 |
|
130 | span {
|
131 | opacity: 1;
|
132 | transform: translate3d(0, 0, 0);
|
133 | transition-delay: 0.4s;
|
134 | transition-timing-function: ease-out;
|
135 | }
|
136 | }
|
137 | }
|
138 |
|
139 | @keyframes scaleUpDown {
|
140 | 0% {
|
141 | opacity: 1;
|
142 | transform: scale3d(1, 0, 1);
|
143 | }
|
144 | 50% {
|
145 | transform: scale3d(1, 1, 1);
|
146 | transform-origin: 50% 0;
|
147 | transition-timing-function: ease-out;
|
148 | }
|
149 | 50.1% {
|
150 | transform-origin: 50% 100%;
|
151 | transition-timing-function: ease-out;
|
152 | }
|
153 | 100% {
|
154 | opacity: 1;
|
155 | transform: scale3d(1, 0, 1);
|
156 | transform-origin: 50% 100%;
|
157 | transition-timing-function: ease-out;
|
158 | }
|
159 | }
|
160 |
|
161 | @media screen and (max-width: 40rem) {
|
162 | form {
|
163 | margin: 2rem 0;
|
164 | }
|
165 |
|
166 | input {
|
167 | width: 100%;
|
168 | left: 0;
|
169 | }
|
170 | }
|
171 | }
|