source: sources/client/src/components/user/Landing/styles.js@ bc20307

Last change on this file since bc20307 was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 2 years ago

Push before video

  • Property mode set to 100644
File size: 2.4 KB
Line 
1import styled, { keyframes } from 'styled-components';
2import LocalParkingIcon from '@mui/icons-material/LocalParking';
3import Button from '@mui/material/Button';
4
5const breath = keyframes`
6 0% {
7 opacity: 0.4;
8 transform: scale(0.7);
9 transform: translate(-50%, -50%);
10 }
11 25% {
12 opacity: 0.6;
13 transform: scale(0.8);
14 transform: translate(-50%, -50%);
15 }
16 50% {
17 opacity: 0.8;
18 transform: scale(0.9);
19 transform: translate(-50%, -50%);
20 }
21 100% {
22 opacity: 0.1;
23 transform: scale(1.1);
24 transform: translate(-50%, -50%);
25 }
26`;
27
28const buttonBreath = keyframes`
29 0% {
30 transform: scale(0.8) ;
31 }
32 25% {
33 transform: scale(0.85) ;
34 }
35 50% {
36 transform: scale(0.9) ;
37 }
38 75% {
39 transform: scale(0.95) ;
40 }
41 100% {
42 transform: scale(1) ;
43 }
44`;
45
46export const Wrapper = styled.div`
47 width: 100%;
48 height: calc(100vh - 66px);
49 padding: 10px 0;
50 position: relative;
51`;
52
53export const ParkingSpace = styled.div`
54 width: 50%;
55 height: 40vh;
56 margin: auto;
57 position: relative;
58 border: 10px solid white;
59 border-bottom: 0;
60`;
61
62export const ParkingIcon = styled(LocalParkingIcon).attrs({
63 sx: {
64 fontSize: 120,
65 },
66})`
67 color: ${(props) => props.theme.palette.primary.dark};
68 left: 50%;
69 top: 50%;
70 transform: translate(-50%, -50%);
71 position: absolute;
72 animation: ${breath} 2s linear infinite normal;
73`;
74
75export const ParkingSpaceHelper = styled.div`
76 position: absolute;
77 width: 20%;
78 border-bottom: 10px solid white;
79`;
80
81export const ArrowsWrapper = styled.div`
82 position: absolute;
83 width: 100%;
84 height: 50vh;
85 bottom: 10vh;
86`;
87
88export const CarWrapper = styled.div`
89 width: 35%;
90 height: 35vh;
91 position: absolute;
92 bottom: 5vh;
93 left: 50%;
94 transform: translateX(-50%);
95`;
96
97export const Car = styled.img`
98 width: 32%;
99 height: 30vh;
100 z-index: 1000;
101 position: absolute;
102 bottom: 5vh;
103 left: 34%;
104 // transform: transalteX(-50%);
105`;
106
107export const PreviewCar = styled.img`
108 width: 35%;
109 height: 30vh;
110 z-index: 1001;
111`;
112
113export const YouAreParkedButton = styled(Button).attrs((props) => ({
114 variant: 'contained',
115 size: 'large',
116 sx: {
117 backgroundColor: `${props.theme.palette.primary.main}`,
118 },
119}))`
120 position: absolute;
121 left: 20%;
122 bottom: 20vh;
123 width: fit-content;
124 font-size: 25px;
125 animation: ${buttonBreath} 2s linear infinite alternate;
126 :hover {
127 background-color: ${(props) => props.theme.palette.primary.dark};
128 }
129`;
Note: See TracBrowser for help on using the repository browser.