-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmain.sass
401 lines (349 loc) · 8.9 KB
/
main.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
$primaryOne: #0084E3
$primaryTwo: #5B53FF
$primaryThree: #193E58
$danger: #EB5757
$success: #75E394
$gray6: #f2f2f2
$lightBlack: rgba(51, 51, 51, 0.5)
@mixin font($family, $weight, $size, $spacing)
font-family: $family
font-style: normal
font-weight: $weight
font-size: $size
letter-spacing: $spacing
#header
height: 50px
background-color: $primaryThree
border: none
padding: 0 15px
.logo-container
img
margin: 15px 0
height: 20px
object-fit: contain
.head-avatar
img
float: right
margin: 10px 0
height: 30px
.avatar-img, .menu-icon
vertical-align: middle
object-fit: contain
border-radius: 50%
.search
display: flex
width: 100%
height: auto
padding: 5px 15px
background-color: #ffffff
border: none
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15)
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15)
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15)
input
margin: 0 5px
padding: 0
width: 100%
height: 37px
@include font('Roboto', 500, 12px, 0.15em)
text-transform: uppercase
border: none
img, a
margin: auto
vertical-align: middle
display: inline-block
.filter-widget
border-bottom: 0.25px solid #e2e2e2
padding: 20px 10px
margin-bottom: 10px
.page-title
@include font('Roboto', 900, 16px, 0.1em)
background: linear-gradient(146.75deg, #5B53FF 9.21%, #56B7FF 90.79%)
-webkit-background-clip: text
-webkit-text-fill-color: transparent
text-shadow: none
text-transform: uppercase
//No Items
.no-items
padding: 10px 15px
display: none
img
margin: 20px auto
display: block
width: 50%
p
@include font('Roboto', 700, 22px, 0.1em)
text-align: center
text-transform: uppercase
color: #5a5a5a
//Form elements
//Buttons
.prime-btn
@include font('Roboto', 900, 14px, 0.15em)
text-transform: uppercase
width: 100%
height: 46px
margin: 5px 0
padding: 13px 15px
line-height: 16px
color: #ffffff
background: linear-gradient(149.59deg, #5B53FF 9.21%, #56B7FF 90.79%)
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
border-radius: 5px
border: none
.navigate-btn
@include font('Roboto', 700, 16px, 0.15em)
text-transform: uppercase
text-align: left
width: 100%
height: 46px
margin: 5px 0
padding: 13px 15px
line-height: 16px
color: #ffffff
background: linear-gradient(148.06deg, #5B53FF 9.21%, #56B7FF 90.79%)
border-radius: 10px
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
border: none
.cancel-btn
@include font('Roboto', 900, 14px, 0.15em)
text-transform: uppercase
width: 100%
height: 46px
margin: 5px 0
padding: 13px 15px
line-height: 16px
color: #EB5757
border: 2px solid #EB5757
background-color: transparent
box-sizing: border-box
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
border-radius: 10px
.lds-hourglass
margin: auto
display: none
position: relative
width: 80px
height: 80px
&:after
content: " "
display: block
border-radius: 50%
width: 0
height: 0
margin: 8px
box-sizing: border-box
border: 32px solid #60b2ff
border-color: #60b2ff transparent #60b2ff transparent
animation: lds-hourglass 1.2s infinite
@keyframes lds-hourglass
0%
transform: rotate(0)
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
50%
transform: rotate(900deg)
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
100%
transform: rotate(1800deg)
.load-ellipsis
margin: auto
display: none
position: relative
width: 80px
height: 56px
& div
position: absolute
top: 23px
width: 13px
height: 13px
border-radius: 50%
background: $primaryTwo
animation-timing-function: cubic-bezier(0, 1, 1, 0)
& div:nth-child(1)
left: 8px
animation: load-ellipsis1 0.6s infinite
& div:nth-child(2)
left: 8px
animation: load-ellipsis2 0.6s infinite
& div:nth-child(3)
left: 32px
animation: load-ellipsis2 0.6s infinite
& div:nth-child(4)
left: 56px
animation: load-ellipsis3 0.6s infinite
@keyframes load-ellipsis1
0%
transform: scale(0)
100%
transform: scale(1)
@keyframes load-ellipsis3
0%
transform: scale(1)
100%
transform: scale(0)
@keyframes load-ellipsis2
0%
transform: translate(0, 0)
100%
transform: translate(24px, 0)
.drop-downs
select
width: 98%
//Input label
label
@include font('Roboto', 900 !important, 10px !important, 0.1em)
text-transform: uppercase
.email-error-label, .pw-error-label
@include font('Roboto', 500 !important, 11px !important, 0.1em)
text-transform: uppercase
color: $danger
display: none
select
@include font('Roboto', 900 !important, 10px !important, 0.1em)
text-transform: uppercase
height: 42px !important
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15) !important
border: none !important
margin-bottom: 10px
.text-input
width: 100%
height: 42px
background: #FFFFFF
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15)
-webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15)
-moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15)
border: none
border-radius: 5px
@include font('Roboto', 400, 15px, 0.1em)
color: $primaryThree
padding: 12px 16px
margin-bottom: 10px
background-color: white !important
-webkit-appearance: none
.text-input::placeholder
color: #1a1a1a56
font-weight: 400
.text-input::-webkit-input-placeholder
color: #1a1a1a56
font-weight: 400
.text-input::-ms-input-placeholder
color: #1a1a1a56
font-weight: 400
.file-input
width: 100%
height: 42px
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15)
border: 0.5px solid $primaryTwo !important
border-radius: 5px
@include font('Roboto', 400, 15px, 0.1em)
color: $primaryThree
padding: 6px
margin-bottom: 10px
background-color: white !important
// Slider
input[type="range"]
width: 100%
height: 5px
-webkit-appearance: none
outline: none
border: 0
padding: 0 8px
margin: 8px 0
input[type="range"]::-webkit-slider-runnable-track
background: $primaryOne
height: 2px
border-radius: 4px
transition: 0.3s
input[type="range"]::-webkit-slider-thumb
-webkit-appearance: none
background: $primaryTwo
width: 20px
height: 20px
border-radius: 50%
margin-top: -9px
cursor: pointer
border: 3px solid #fff
transition: 0.3s
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb
background: $primaryTwo
output
position: absolute
width: 70px
height: 30px
display: none
background-color: $primaryTwo
border-radius: 3px
color: #ffffff
@include font('Lato', 700, 18px, 0.15em)
text-align: center
input[type=range]:active + output
display: block
transform: translateX(-50%)
.range-slider
p
@include font('Roboto', 900, 12px, 0.15em)
p#range-val
color: $primaryTwo
border: 1px solid $primaryTwo
border-radius: 10px
margin: 5px 20px
.floating-btn
position: fixed
bottom: 76px
z-index: 15
width: 100%
button
@include font('Roboto', 500, 12px, 0.15em)
text-transform: uppercase
color: #ffffff !important
text-shadow: none !important
background: linear-gradient(280.99deg, #0084E3 0%, #00D1ED 100%) !important
border: none !important
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15)
border-radius: 15px !important
height: 27px
width: 150px
margin: auto !important
padding: 0 15px
svg
margin: 0 5px 0 0
vertical-align: middle
.navigation-bar
position: fixed
bottom: 0
border-top: 0.5px solid $lightBlack
width: 100%
height: auto
padding: 13px 0
z-index: 5
background-color: white
img
vertical-align: top
#footer
@include font('Roboto', 300, 9px, 0.05em)
height: 160px
width: 100%
background-color: $primaryThree
border: none
padding: 20px 10px
margin-top: 100px
position: sticky
bottom: 0
text-transform: uppercase
color: $gray6
text-shadow: none
p
text-align: center
margin: 5px
ul
text-decoration: none
list-style: none
padding: 0
@media screen and ( min-width: 768px)
#footer
position: sticky
margin-top: 250px