1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @use '../../../styles/theming' as *;
|
8 |
|
9 | ::ng-deep nb-layout.modal-half {
|
10 | .layout {
|
11 | transition: transform 0.6s, opacity 0.6s;
|
12 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
13 | }
|
14 | }
|
15 |
|
16 | ::ng-deep nb-layout.modal-half.with-search {
|
17 | .layout {
|
18 | transform: scale3d(0.8, 0.8, 1);
|
19 | pointer-events: none;
|
20 | }
|
21 | }
|
22 |
|
23 | :host.modal-half {
|
24 | .search {
|
25 | text-align: center;
|
26 | position: fixed;
|
27 | z-index: 1050;
|
28 | top: 0;
|
29 | left: 0;
|
30 | overflow: hidden;
|
31 | width: 100%;
|
32 | height: 100vh;
|
33 | background: none;
|
34 | pointer-events: none;
|
35 |
|
36 | &::before {
|
37 | content: '';
|
38 | position: absolute;
|
39 | top: 0;
|
40 | left: 0;
|
41 | width: 100%;
|
42 | height: 100%;
|
43 | pointer-events: none;
|
44 | opacity: 0;
|
45 | transition: opacity 0.6s;
|
46 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
47 | }
|
48 |
|
49 | button {
|
50 | font-size: 2.5rem;
|
51 | position: absolute;
|
52 | top: 3rem;
|
53 | @include nb-ltr(right, 3rem);
|
54 | @include nb-rtl(left, 3rem);
|
55 | display: block;
|
56 | z-index: 100;
|
57 | opacity: 0;
|
58 | transform: scale3d(0.8, 0.8, 1);
|
59 | transition: opacity 0.6s, transform 0.6s;
|
60 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
61 | }
|
62 |
|
63 | .form-wrapper {
|
64 | position: absolute;
|
65 | display: flex;
|
66 | justify-content: center;
|
67 | align-items: center;
|
68 | width: 100%;
|
69 | height: 50%;
|
70 | transition: transform 0.6s;
|
71 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
72 | transform: translate3d(0, -100%, 0);
|
73 | }
|
74 |
|
75 | form {
|
76 | width: 75%;
|
77 | margin: 0 auto;
|
78 | }
|
79 |
|
80 | input {
|
81 | font-size: 7vw;
|
82 | width: 100%;
|
83 | }
|
84 | }
|
85 |
|
86 | &.show {
|
87 | .search {
|
88 | pointer-events: auto;
|
89 |
|
90 | &::before {
|
91 | opacity: 1;
|
92 | }
|
93 |
|
94 | button {
|
95 | opacity: 1;
|
96 | transform: scale3d(1, 1, 1);
|
97 | }
|
98 |
|
99 | .form-wrapper {
|
100 | transform: translate3d(0, 0, 0);
|
101 | }
|
102 | }
|
103 | }
|
104 | }
|