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

107 lines
2.3 KiB
SCSS

.contact {
padding: 3rem 8.5rem 3rem 1rem;
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;
text-align: start;
font-size: .825rem;
margin-inline-end: 12px;
margin-bottom: 8px;
font-weight: 600;
opacity: 1;
line-height: 1;
margin-left: 4px;
text-transform: uppercase;
span {
color: $error;
margin: 0 0 0 .25rem;
}
}
textarea,
select,
input {
position: relative;
width: 100%;
min-width: 0px;
height: 40px;
color: $f-color;
background: #faf3ea;
outline: 2px solid transparent;
font-size: .925rem;
font-weight: 400;
padding: 0 16px;
border-radius: .375rem;
border: 1px solid #e6dfd6;
&:focus {
border-color: $btns-color;
box-shadow: 0 0 0 1px $btns-color;
}
&::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='%23000000' 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;
background-position: calc(100% - 0.75rem) center;
background-color: #faf3ea;
appearance: none;
padding-right: 2rem;
}
textarea {
min-height: 6rem;
padding: .5rem 1rem;
}
.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: $btns-color;
font-family: $p-font;
font-size: 0.925rem;
font-weight: 600;
padding: .5rem 1.5rem;
border: none;
border-radius: .375rem;
&:hover {
background: $btnsh-color;
text-decoration: none;
cursor: pointer;
}
}
}
}
@media only screen and (max-width: 600px) {
.contact {
padding: 3rem 2rem;
}
}