AngularJS ng-class after :active or :focus - css

Question

I have a form I am trying to create using CSS to achieve a halfway "material" feel. I achieved a lot of the animations by ditching the stock bootstrap forms entirely and rewriting them to get the maximum amount of flexibility.
EDIT: Forgot to link Codepen - http://codepen.io/h3xc0ntr0l/pen/ONwdLm
Essentially, the "form groups" are set to position:relative and used to position the input and a couple pseudo elements absolutely, yada yada. I am using angular and am not able to incorporate jquery into the project.
my problem is as follows
<div class="-form-group">
<input type="email" class="-form-input" ng-class='{"content":"user.email"}' ng-model="user.email"/>
<span class="in-email"></span>
</div>
this does not have the behavior i need. I guess if I have "ng-model", then whatever is in there is going to evaluate to true.
I also tried the following with scss:
.-form-input{
border: none;
box-shadow: none;
border-radius: 0;
font-size: 1rem;
background: none;
outline: none;
width: 100%;
margin-top: 2em;
position: relative;
z-index:4;
&:active, &:focus{
.in-email &{ //
&:before{
top: -50%;
color: transparent;
border-bottom: transparent;
}
}
}
}
the effects are achieved via
.in-email, .in-pwd{
&:before{
position: absolute;
top: 50%;
left: 0%;
width: 100%;
z-index:3;
color: black;
transition: 500ms ease all;
border-bottom: 1.5px solid rgba(128,128,128, .5);
}
}
I can not think of anything else that would prevent the span from coming back down after i leave the hover regardless of whether or not there is any content. does anyone have any tips?
(function(){
angular.module('app').controller([
'$scope', function($scope){
$scope.user = undefined;
}
]);
})();
form {
width: 100%;
padding: 1em;
border: .25px solid #e9e9e9;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.33);
height: 20rem;
margin: 0 auto;
}
form .-form-group {
position: relative;
width: 100%;
height: auto;
transition: 500ms ease;
margin: 0 1em 2em 0;
}
form .-form-group .-form-input {
border: none;
box-shadow: none;
border-radius: 0;
font-size: 1rem;
background: none;
outline: none;
width: 100%;
margin-top: 2em;
position: relative;
z-index: 4;
}
.in-email form .-form-group .-form-input:active:before, .in-email form .-form-group .-form-input:focus:before {
top: -50%;
color: transparent;
border-bottom: transparent;
}
form .-form-group input:-webkit-autofill {
background-color: #e9e9e9 !important;
}
form .-form-group:after {
content: "";
display: block;
transition: 250ms 500ms ease all;
border-bottom: 1.5px solid #288690;
width: 0;
}
form .-form-group:hover:after, form .-form-group:focus:after, form .-form-group:active:after {
content: "";
width: 100%;
top: 90%;
}
form .-form-group:hover .in-email:before, form .-form-group:hover .in-pwd:before, form .-form-group:focus .in-email:before, form .-form-group:focus .in-pwd:before, form .-form-group:active .in-email:before, form .-form-group:active .in-pwd:before {
top: -50%;
color: transparent;
border-bottom: transparent;
}
form .button {
border-radius: 1px;
border: none;
}
form .in-email:before, form .in-pwd:before {
position: absolute;
top: 50%;
left: 0%;
width: 100%;
z-index: 3;
color: black;
transition: 500ms ease all;
border-bottom: 1.5px solid rgba(128, 128, 128, 0.5);
}
.content:before {
content: "" !important;
}
.in-email:before {
content: "Email Address";
}
.in-pwd:before {
content: "Password";
}
.nav, .pagination, .carousel, .panel-title a {
cursor: pointer;
}
#ui-root {
margin-top: 5rem;
padding: 1rem;
}
.ui-container {
position: relative;
width: 100%;
padding: 0 10% 0 10%;
}
.button {
background-color: #288690 !important;
}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div class="container">
<div class="ui-container">
<div class="row" id="ui-root">
<div class="col-sm-12 col-md-4 col-md-offset-4">
<form autocomplete="off" class="text-center">
<!-- chrome autcomplete -->
<div class="-form-group">
<input type="email" class="-form-input" ng-class='{"content": "user.email"}' ng-model="user.email"/>
<span class="in-email"></span>
</div>
<div class="-form-group">
<input type="password" class="-form-input" ng-class='{"content": "user.password"}' ng-model="user.password" />
<span ng-class='{"content": "user.password"}' class="in-pwd"></span>
</div>
<button class="btn btn-primary button">Login</button>
</form>
</div>
</div>
</div>
</div>