126 lines
2 KiB
SCSS
126 lines
2 KiB
SCSS
|
.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;
|
||
|
}
|
||
|
}
|