2015-09-29 11:22:48 -04:00
|
|
|
@import "../../colors";
|
2016-06-23 07:27:43 -04:00
|
|
|
@import "../../frameless";
|
2015-09-29 11:22:48 -04:00
|
|
|
|
2016-06-23 07:27:43 -04:00
|
|
|
$base-bg: $ui-light-gray;
|
2015-09-29 11:22:48 -04:00
|
|
|
$pass-bg: lighten($ui-aqua, 35%);
|
|
|
|
|
2015-09-21 09:18:00 -04:00
|
|
|
.input {
|
2016-06-23 07:27:43 -04:00
|
|
|
transition: all .5s ease;
|
2016-06-23 14:06:36 -04:00
|
|
|
margin: .75rem 0;
|
2015-09-29 11:22:48 -04:00
|
|
|
border: 1px solid $active-gray;
|
2015-09-24 19:27:50 -04:00
|
|
|
border-radius: 5px;
|
2015-09-29 11:22:48 -04:00
|
|
|
background-color: $base-bg;
|
2016-06-23 07:27:43 -04:00
|
|
|
padding: 0 1rem;
|
|
|
|
height: 3rem;
|
2015-09-29 11:22:48 -04:00
|
|
|
color: $type-gray;
|
2016-06-23 07:27:43 -04:00
|
|
|
font-size: .875rem;
|
2015-09-24 19:27:50 -04:00
|
|
|
|
2015-09-21 09:52:53 -04:00
|
|
|
&:focus {
|
2016-06-23 07:27:43 -04:00
|
|
|
transition: all .5s ease;
|
2015-09-24 19:27:50 -04:00
|
|
|
outline: none;
|
2016-06-23 07:27:43 -04:00
|
|
|
border: 1px solid $ui-blue;
|
2015-09-21 09:52:53 -04:00
|
|
|
}
|
2015-09-24 19:27:50 -04:00
|
|
|
|
2015-09-21 09:52:53 -04:00
|
|
|
&.fail {
|
2016-06-23 07:27:43 -04:00
|
|
|
border: 1px solid $ui-orange;
|
2015-09-21 09:52:53 -04:00
|
|
|
}
|
2015-09-24 19:27:50 -04:00
|
|
|
|
2015-09-21 09:52:53 -04:00
|
|
|
&.pass {
|
2015-09-29 11:22:48 -04:00
|
|
|
border: 1px solid $active-dark-gray;
|
|
|
|
background-color: $pass-bg;
|
2015-09-21 09:52:53 -04:00
|
|
|
}
|
2016-06-23 07:27:43 -04:00
|
|
|
|
|
|
|
label {
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
2015-09-21 09:18:00 -04:00
|
|
|
}
|