portfolio/assets/styles/components/contact.scss

126 lines
2 KiB
SCSS
Raw Normal View History

.means-of-contact {
p {
margin-bottom: 1em;
}
}
.contact-form-container {
form {
border-radius: 3px;
border: 1px dashed #80808054;
padding: 1em;
}
.contact-form-first-group {
display: flex;
.contact-form-input:first-of-type {
margin-right: .4em;
}
.contact-form-input:nth-of-type(2) {
margin-left: .4em;
}
}
.contact-form-input {
width: 100%;
margin-top: 1em;
}
input, textarea {
width: 100%;
margin-top: .6em;
border-radius: 3px;
padding: .6em;
border: 1px solid #dbdbdb;
box-shadow: 1px 2px 4px 0 rgba(0,0,0,.1);
}
.contact-form-message textarea {
min-height: 8em;
}
label {
display: block;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading-button {
display: none;
svg {
animation: rotating 2s linear infinite;
}
}
.contact-form-submit {
}
.contact-form-container {
display: flex;
justify-content: end;
}
}
.alert {
padding: 1em;
margin-bottom: 1em;
border-radius: 3px;
.alert-content {
display: flex;
align-items: center;
}
}
.alert.alert-success {
background: green;
color: white;
}
.alert.alert-error {
background: red;
color: white;
}
.alert .alert-icon {
padding-right: 0.6em;
}
@media (min-width: $sm-breakpoint) {
.contact-form-first-group {
.contact-form-input {
margin-top: 0;
}
}
}
@media (max-width: $sm-breakpoint) {
.contact-form {
.contact-form-first-group {
display: block;
.contact-form-input {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
}
.contact-form-input:first-of-type {
margin-top: 0;
}
}