-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathform.sass
192 lines (153 loc) · 3.76 KB
/
form.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
body
background: #222
display: flex
justify-content: center
align-items: center
height: 100vh
*
font-family: 'Raleway'
.form-container
width: 600px
max-width: 100%
background: #fff
box-shadow: 0px 10px 25px -5px rgba(0,0,0,0.3)
border-radius: 5px
overflow: hidden
background: #222
border: 2px solid #FF785A
.ion-android-done
color: #FF785A
font-size: 60px
align-self: center
&.transitioned-3
animation: swoosh 1s 1
.belt
width: 300%
display: flex
transition: transform 300ms ease-in-out
&.transitioned-1
transform: translateX(-33%)
&.transitioned-2
transform: translateX(-66%)
.progress-wrapper, .success-wrapper,
.form
width: 50%
display: flex
flex-direction: column
justify-content: space-around
align-items: center
position: relative
padding: 20px
.form-header
// background: #FF785A
width: 100%
margin: 0 0 20px
padding: 10px 0
display: flex
align-items: center
justify-content: center
border-radius: 4px
// box-shadow: 10px 10px 13px -10px rgba(0,0,0,0.4)
h2
color: #FF785A
input, textarea
display: block
width: 95%
max-width: 93%
margin: 10px 0
padding: 10px
outline: none
border: none
border-bottom: 2px solid #FF785A
background: #333
color: #FF785A
caret-color: #FF785A
&::placeholder
color: transparentize(#FF785A,.2)
transition: color .2s
font-size: 14px
&:focus::placeholder
color: transparent
button
background: #FF785A
border: none
color: #222
padding: 12px
border-radius: 20%
align-self: flex-end
margin: 10px 10px 10px 0
box-shadow: 0px 10px 13px -12px rgba(0,0,0,0.3)
outline: none
transition: all 300ms ease-in-out
cursor: pointer
font-size: 14px
font-weight: bold
text-transform: uppercase
h2
color: #fff
font-weight: 300
.progress-div
height: 150px
display: flex
align-items: center
justify-content: center
flex-direction: column
h3
color: transparentize(#fff,.1)
.progress-outer
width: 150px
height: 20px
background: #fff
padding: 5px
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3)
border-radius: 5px
.progress-inner
background-color: #FF785A
border-radius: 5px
height: 20px
width: 0%
&.loading
animation: loading 3s 1 300ms forwards
.success
display: flex
flex-direction: column
align-tems: center
justify-content: center
height: 200px
h2
color: transparentize(#fff,.1)
button
align-self: center
font-size: 14px
button:hover
transform: translateY(-3px)
box-shadow: 0px 10px 23px -17px rgba(0,0,0,0.3)
@keyframes swoosh
0%
transform: translateY(0)
opacity: 1
10%
transform: translateY(10px)
opacity: 1
50%, 70%
transform: translateY(-150%)
opacity: 0
80%
transform: translateY(-50%)
opacity: .5
100%
transform: translateY(0)
opacity: 1
@keyframes loading
0%, 30%
width: 0%
30%
width: 10%
40%
width: 40%
50%
width: 50%
60%, 70%
width: 70%
100%
width: 100%