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

71 lines
1.6 KiB
SCSS
Raw Normal View History

.contact-page-component {
$trans-speed: 100ms;
padding-top: px2rem(35px);
padding-bottom: 0px;
input, textarea {
margin-bottom: px2rem(20px);
width: 100%;
padding: px2rem(5px) px2rem(10px);
border: 2px solid fade-out($c-base, 0.75);
background-color: rgba(255, 255, 255, 0.8);
font-size: px2rem(14px);
transition: border $trans-speed;
&:focus {
border: 2px solid fade-out($c-accent, 0.4);
}
&.error {
border: 2px solid $c-error;
}
}
textarea {
resize: none;
height: px2rem(150px);
}
.submit {
@include font-sans-bold;
background-color: lighten($c-accent, 5%);
color: $c-text-light;
text-align: center;
transition: background-color $trans-speed;
cursor: pointer;
&:hover {
background-color: $c-accent;
}
&.disabled {
background-color: $c-base;
}
}
.notification {
margin: 0px auto px2rem(15px) auto;
padding: px2rem(5px) px2rem(10px);
background-color: lighten($c-error, 15%);
color: $c-text-light;
font-size: px2rem(14px);
text-align: center;
opacity: 0;
transition: opacity $trans-speed;
&.visible {
opacity: 1;
}
&.success {
@include font-sans-bold;
background-color: transparent;
color: $c-text;
}
span {
@include font-sans-bold;
}
}
}