hypothetical/resources/assets/sass/pages/_contact.scss

54 lines
1.5 KiB
SCSS
Raw Normal View History

.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;
}
}
}
}