2017-11-21 23:12:31 -05:00
|
|
|
.contact-page-component {
|
|
|
|
$trans-speed: 100ms;
|
2019-05-12 21:27:55 -04:00
|
|
|
padding-top: pxrem(35);
|
2018-04-26 20:09:00 -04:00
|
|
|
padding-bottom: 0px;
|
2016-01-26 23:20:08 -05:00
|
|
|
|
2017-11-21 23:12:31 -05:00
|
|
|
input, textarea {
|
2019-05-12 21:27:55 -04:00
|
|
|
margin-bottom: pxrem(20);
|
2017-11-21 23:12:31 -05:00
|
|
|
width: 100%;
|
2019-05-12 21:27:55 -04:00
|
|
|
padding: pxrem(5) pxrem(10);
|
2024-07-25 12:40:56 -04:00
|
|
|
border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
|
2017-11-21 23:12:31 -05:00
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
2019-05-12 21:27:55 -04:00
|
|
|
font-size: pxrem(14);
|
2017-11-21 23:12:31 -05:00
|
|
|
transition: border $trans-speed;
|
2018-04-26 00:02:56 -04:00
|
|
|
|
|
|
|
&:focus {
|
2024-07-25 12:40:56 -04:00
|
|
|
border: pxrem(2) solid color.adjust($c-accent, $alpha: -0.4);
|
2018-04-26 00:02:56 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
&.error {
|
2022-07-06 13:44:25 -04:00
|
|
|
border: pxrem(2) solid $c-error;
|
2018-04-26 00:02:56 -04:00
|
|
|
}
|
2017-11-21 23:12:31 -05:00
|
|
|
}
|
2016-01-26 23:20:08 -05:00
|
|
|
|
2017-11-21 23:12:31 -05:00
|
|
|
textarea {
|
|
|
|
resize: none;
|
2019-05-12 21:27:55 -04:00
|
|
|
height: pxrem(150);
|
2017-11-21 23:12:31 -05:00
|
|
|
}
|
2016-01-26 23:20:08 -05:00
|
|
|
|
2017-11-21 23:12:31 -05:00
|
|
|
.submit {
|
2018-04-26 00:02:56 -04:00
|
|
|
@include font-sans-bold;
|
2024-07-25 12:40:56 -04:00
|
|
|
background-color: color.adjust($c-accent, $lightness: 5%);
|
2017-11-21 23:12:31 -05:00
|
|
|
color: $c-text-light;
|
|
|
|
text-align: center;
|
|
|
|
transition: background-color $trans-speed;
|
2018-04-26 00:02:56 -04:00
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: $c-accent;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled {
|
|
|
|
background-color: $c-base;
|
|
|
|
}
|
2017-11-21 23:12:31 -05:00
|
|
|
}
|
2016-01-26 23:20:08 -05:00
|
|
|
|
2017-11-21 23:12:31 -05:00
|
|
|
.notification {
|
2019-05-12 21:27:55 -04:00
|
|
|
margin: 0px auto pxrem(15) auto;
|
|
|
|
padding: pxrem(5) pxrem(10);
|
2024-07-25 12:40:56 -04:00
|
|
|
background-color: color.adjust($c-error, $lightness: 15%);
|
2017-11-21 23:12:31 -05:00
|
|
|
color: $c-text-light;
|
2019-05-12 21:27:55 -04:00
|
|
|
font-size: pxrem(14);
|
2017-11-21 23:12:31 -05:00
|
|
|
text-align: center;
|
|
|
|
opacity: 0;
|
|
|
|
transition: opacity $trans-speed;
|
2018-04-26 00:02:56 -04:00
|
|
|
|
|
|
|
&.visible {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2016-01-26 23:20:08 -05:00
|
|
|
|
2017-11-21 23:12:31 -05:00
|
|
|
&.success {
|
2018-04-26 00:02:56 -04:00
|
|
|
@include font-sans-bold;
|
2017-11-21 23:12:31 -05:00
|
|
|
background-color: transparent;
|
|
|
|
color: $c-text;
|
2018-04-26 00:02:56 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
span {
|
|
|
|
@include font-sans-bold;
|
2016-01-26 23:20:08 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|