mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-10 03:26:38 -05:00
53 lines
1.5 KiB
SCSS
53 lines
1.5 KiB
SCSS
.page-contact {
|
|
#contact-form {
|
|
$trans-speed: 100ms;
|
|
margin-top: 35px;
|
|
margin-bottom: 20px;
|
|
|
|
input, textarea {
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
padding: 5px 10px;
|
|
border: 2px solid fade-out($c-text, 0.75);
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
transition: border $trans-speed;
|
|
&:focus { border: 2px solid fade-out($c-base, 0.4); }
|
|
&.error { border: 2px solid $c-error; }
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
height: 150px;
|
|
}
|
|
|
|
#submit {
|
|
background-color: lighten($c-base, 5%);
|
|
color: $c-text-light;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
transition: background-color $trans-speed;
|
|
&:hover { background-color: $c-base; }
|
|
&.disabled { background-color: $c-base; }
|
|
}
|
|
|
|
#notification {
|
|
margin: 0px auto 15px auto;
|
|
padding: 5px 10px;
|
|
background-color: lighten($c-error, 15%);
|
|
color: $c-text-light;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: opacity $trans-speed;
|
|
span { font-weight: bold; }
|
|
&.visible { opacity: 1; }
|
|
|
|
&.success {
|
|
background-color: transparent;
|
|
color: $c-text;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|