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