forked from thingsboard/thingsboard.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact-us.sass
306 lines (299 loc) · 9.31 KB
/
contact-us.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
#docsContent
#content
h1.contact-us-title
z-index: 1
text-align: center
position: relative
padding: 0
margin: 0 0 56px
font-size: 36px
line-height: 54px
&:before
content: none
.background
z-index: 0
position: absolute
top: 524px
left: 50%
img
position: absolute
top: -650px
left: 134px
box-shadow: none !important
div
position: absolute
-ms-transform: skewY(-6deg)
transform: skewY(-6deg)
width: 436px
height: 90px
&.main1
top: -900px
width: 2560px
height: 700px
left: -1280px
background-color: #F7F9FC
transition: opacity 0.5s
opacity: 1
&.small1
top: -345px
right: -989px
background-color: #305680
transition: top 0.5s, right 0.5s
&.small2
top: -177px
right: 566px
background-color: #2A7DEC
transition: top 0.5s, right 0.5s
&.small3
top: -406px
left: 808px
background-color: #2A7DEC
transition: top 0.5s, left 0.5s
&.small4
top: -96px
right: 750px
border: 2px solid #0D2743
transition: top 0.5s, right 0.5s
&.opened
div
&.main1
opacity: 0
&.small1
top: -370px
right: -1128px
&.small2
top: -152px
right: 705px
&.small3
top: -430px
left: 944px
&.small4
top: -71px
right: 889px
.contact-form
z-index: 2
position: relative
background: #fff
color: #212529
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.04), 0px 50px 50px -20px rgba(0, 0, 0, 0.15)
border-radius: 6px
margin-bottom: 20px
padding: 54px 56px
.form-section
width: 100%
display: inline-block
&.mb30
margin-bottom: 30px
.form-element
display: inline-block
position: relative
width: 100%
float: none
clear: both
&.half
width: 100%
float: left
margin-left: 0
clear: both
&.first
clear: both
margin-left: 0
input.form-control, select.form-control
height: 44px
input.form-control
padding: 0 16px
&:hover
padding: 1px 15px
&:focus
padding: 1px 15px
+autofill
select.form-control
position: relative
padding: 0 36px 0 12px
cursor: pointer
-webkit-appearance: none
-moz-appearance: none
appearance: none
&::-ms-expand
display: none
&:hover
padding: 1px 35px 1px 11px
&:focus
padding: 1px 35px 1px 11px
option[value=""][disabled]
display: none
label.select-label
&:after
content: ""
background-image: url(/images/pe/read-more-arrow.svg)
background-size: contain
display: block
position: absolute
top: 42px
right: 18px
width: 10px
height: 10px
transform: rotate(90deg)
transition: transform .3s
border: none
&:hover
&:after
filter: invert(35%) sepia(96%) saturate(1837%) hue-rotate(202deg) brightness(98%) contrast(89%)
//&:active
// &:after
// transform: rotate(-90deg)
textarea.form-control
padding: 8px 16px
&:hover
padding: 7px 15px
&:focus
padding: 7px 15px
.form-control
width: 100%
margin: 24px 0 0 0
line-height: 30px
font-size: 18px
vertical-align: middle
border: 1px solid #ebebeb
background-color: transparent
border-radius: 4px
color: #212529
box-shadow: none
+placeholder
color: #212529
opacity: 0.6
&:hover
border: 2px solid #000
cursor: pointer
&:focus
cursor: initial
border: 2px solid #2a7dec
color: #212529
+placeholder
opacity: 0.2
&.select.input--empty
color: rgba(33, 37, 41, 0.6)
&:focus
color: rgba(33, 37, 41, 0.2)
option
color: #212529
label
float: left
width: 100%
line-height: 100%
font-size: 14px
margin-bottom: 24px
p
cursor: text
position: absolute
margin: 0 0 0 10px
padding: 11px 0
font-size: 18px
transition: 150ms
transform: scale(1) translate(-10px, -86px)
pointer-events: none
&.text-area-label
position: absolute
top: 68px
.form-control:focus + p, .form-control:not(.input--empty) + p
color: inherit
.submit-button-container
float: right
//label
display: block
position: relative
margin-bottom: 5px
margin-left: 2px
font-weight: bold
font-size: 16px
//.text-input, .text-area, .select
outline: none
font-size: 16px
margin-bottom: 0
background-color: #f8f8f8
border: 2px solid #e1e1e1
color: #666666
width: 100%
display: inline
min-width: 50px
padding: 6px
border-radius: 4px
box-shadow: none
transition: 0.3s
&:focus
background-color: $light-grey
color: $dark-grey
border-color: #2fd1ff
box-shadow: 0 0 8px rgba(0, 201, 255, .5)
//input.button
width: 150px
input.button
min-width: 150px
#contact-us-thanks
position: relative
height: 619px
padding: 30px
color: #212529
display: flex
align-items: center
justify-content: center
transition: margin-bottom 0.5s
margin: auto
margin-bottom: 130px
&.opened
margin-bottom: 0
.thanks-content
p
font-size: 18px
font-weight: normal
color: #75767C
&.thank-you
font-size: 36px
font-weight: 600
color: #212529
a.homepage
margin-top: 48px
position: relative
display: inline-block
font-size: 18px
font-weight: 500
&:after
content: ""
background-image: url(/images/pe/read-more-arrow.svg)
background-size: contain
display: block
position: absolute
top: 6px
right: -22px
width: 12px
height: 12px
border: none
filter: invert(35%) sepia(96%) saturate(1837%) hue-rotate(202deg) brightness(98%) contrast(89%)
@media screen and (max-width: 768px)
.contact-form
padding: 32px!important
@media screen and (min-width: 1025px)
#docsContent
.contact-form
.form-element
float: left
&.half
width: calc(50% - 12px)
float: left
margin-left: 24px
clear: none
&.first
clear: both
margin-left: 0
@media screen and (min-width: 1700px)
#docsContent
.contact-form, #contact-us-thanks
width: 75%
.contact-form
left: 12.5%
@media screen and (min-width: 1921px)
#docsContent
.contact-form, #contact-us-thanks
width: 1050px
.contact-form
left: calc(50% - 525px)