UNPKG

2.06 kBSCSSView Raw
1/**
2 * @license
3 * Copyright Akveo. All Rights Reserved.
4 * Licensed under the MIT License. See License.txt in the project root for license information.
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}