-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.css
164 lines (129 loc) · 2.72 KB
/
contact.css
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
/* This stylesheet is for the contact form only in conjunction with the basestyles.css to be applied on
all pages. */
/* Base Styles */
/* The basestyles.css sets the body display to flex. To prevent any issues with IE 10 and IE: 11
with flex due to a bug with IE in respect to flex, the flex 1 0 auto is used. */
.contactForm {
flex: 1 0 auto;
width: 97.5%;
background: white;
margin: 10px auto;
border-radius: 25px;
box-shadow: 5px 5px 5px rgb(113, 119, 119);
}
form {
margin: 10px auto;
width: 95%;
}
h2,
p,
legend {
text-align: center;
}
h2,
p {
margin: 5px 0;
}
input {
margin-bottom: 5px;
border-radius: 5px;
}
.asterisk {
color: red;
padding-right: 1px;
}
.inputs,
.checks {
margin: 0 auto 5px auto;
width: 55%;
padding: 5px 0;
}
.inputs input {
width: 100%;
}
input:focus,
textarea:focus {
background-color: rgba(255, 255, 0, 0.308);
border: 2px solid rgb(33, 128, 33);
}
fieldset {
border-radius: 5px;
}
.checks input {
margin-right: 2px;
margin-left: 5px;
}
/* This ensures that the comments will take up a large area on smaller screens for maximum visiblilty. */
.comments {
width: 85%;
margin: 0 auto;
}
/* This will make sure that the textarea fills the entire div for comments that is specified above and in media queries
/* and does not need a col specified in the HTML */
.comments textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 5px;
}
/* Button Styles */
.buttons {
text-align: center;
padding-top: 5px;
font-size: 1.5em;
}
.buttons input {
background-color: rgb(33, 128, 33);
border-radius: 25px;
padding: 2px 20px;
display: inline-block;
color: white;
box-shadow: 5px 5px 5px rgb(113, 119, 119);
}
input[type="reset"] {
margin-right: 10px;
}
input[type="button"] {
margin-left: 10px;
}
/* Media Queries */
/* Tablets */
@media (min-width: 640px) {
.contactForm {
width: 95%;
margin: 97.5px auto 10px;
}
.inputs,
.checks {
width: 35%;
}
/* Takes down the comments width some for tablet-sized screens so that the form doesn't appear imbalanced. */
.comments {
width: 75%;
}
.buttons {
margin-top: 5px;
}
}
/* Desktop and Laptop */
@media (min-width: 1025px) {
.contactForm {
width: 92.5%;
margin: 72px auto 10px;
}
.inputs,
.checks {
width: 35%;
}
/* Decreases the comments div width for large screen balance. */
.comments {
width: 65%;
}
/* Button Styles */
.buttons {
font-size: 1em;
margin-top: 0px;
}
}