1
0
Fork 0
ryanmoon.com/assets/style/pages/_contact.scss

108 lines
2.2 KiB
SCSS
Raw Normal View History

2023-07-11 06:03:57 +00:00
.contact {
padding: 3rem 8.5rem 3rem 1rem;
2023-11-27 01:36:09 +00:00
.success {
padding: 2rem 0;
2023-11-27 01:36:09 +00:00
}
2023-07-11 06:03:57 +00:00
form {
display: grid;
grid-row-gap: 1.25rem;
grid-column-gap: 1rem;
grid-template-columns: 1fr 1fr;
margin: 2rem 0;
.group {
width: 100%;
position: relative;
}
label {
display: block;
color: $f-color;
2023-07-11 06:03:57 +00:00
font-size: .825rem;
font-weight: 600;
margin: 0 .25rem .5rem .25rem;
2023-07-11 06:03:57 +00:00
text-transform: uppercase;
span {
color: $error;
margin: 0 0 0 .25rem;
}
}
textarea,
select,
input {
position: relative;
width: 100%;
2023-11-27 01:36:09 +00:00
height: 2.5rem;
2023-07-11 06:03:57 +00:00
color: $f-color;
background: $b-color;
2023-11-27 01:36:09 +00:00
font-family: $p-font;
2023-07-11 06:03:57 +00:00
font-size: .925rem;
font-weight: 400;
2023-11-27 01:36:09 +00:00
padding: 0 1rem;
border: .1rem solid $btn-color;
2023-11-27 01:36:09 +00:00
border-radius: .375rem;
outline: none;
2023-07-11 06:03:57 +00:00
&:focus {
border-color: $s-color;
2023-07-11 06:03:57 +00:00
}
&::placeholder {
font-family: $p-font;
font-size: .925rem;
opacity: .4;
}
}
select {
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23b9bcc4' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
2023-07-11 06:03:57 +00:00
background-position: calc(100% - 0.75rem) center;
background-color: $b-color;
2023-07-11 06:03:57 +00:00
appearance: none;
padding-right: 2rem;
}
textarea {
min-height: 6rem;
2023-10-31 19:40:35 +00:00
font-family: $p-font;
2023-11-27 01:36:09 +00:00
padding: 1rem;
2023-10-31 19:40:35 +00:00
resize: vertical;
2023-07-11 06:03:57 +00:00
}
.message {
grid-column: 1/3;
}
button {
height: 2.5rem;
width: max-content;
white-space: nowrap;
align-items: center;
vertical-align: middle;
color: $w-color;
background: $btn-color;
2023-07-11 06:03:57 +00:00
font-family: $p-font;
font-size: 0.925rem;
font-weight: 600;
padding: .5rem 1.5rem;
border: none;
border-radius: .375rem;
&:hover {
background: $btnh-color;
2023-07-11 06:03:57 +00:00
text-decoration: none;
cursor: pointer;
}
}
}
}
@media only screen and (max-width: 600px) {
.contact {
padding: 3rem 2rem;
}
}