/*
 * animations css stylesheet
 */

/* UI Bootstrap Dropdown menu fade
   http://stackoverflow.com/questions/26776433/adding-angular-animation-to-bootstrap-dropdown */
.dropdown.ng-animate-start {
  border-spacing: 0;
}

.open-add > .dropdown-menu,
.open-remove > .dropdown-menu {
  display: block !important;
}

.open-add > .dropdown-menu {
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
}

.open-add.open-add-active > .dropdown-menu {
  opacity: 1;
}

.open-remove > .dropdown-menu {
  opacity: 1;
  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -ms-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
}

.open-remove.open-remove-active > .dropdown-menu {
  opacity: 0;
}

/* Fade in and out element with ngIf */
.hm-fade.ng-enter {
  transition: 0.8s linear all;
  opacity: 0;
}

.hm-fade-init .hm-fade.ng-enter {
  opacity: 1;
}

.hm-fade.ng-enter.ng-enter-active {
  opacity: 1;
}

.hm-fade.ng-leave {
  transition: 0.3s linear all;
  opacity: 1;
}

.hm-fade.ng-leave.ng-leave-active {
  opacity: 0;
}

/* UI View animations using fades not 3d transforms */
/* Have to set height explicitly on ui-view to prevent collapsing during animation*/
/* Element must have both id element with value of "animated-view" and ui-view attribute: */
/*   <div id="animated-view" ui-view></div> */
/* This is to control which views have animations applied to them */
.ui-view-container {
  position: relative;
  height: 65px;
}

#animated-view.ng-enter,
#animated-view.ng-leave {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#animated-view.ng-enter {
  -webkit-animation: 0.5s fade-in;
  -moz-animation: 0.5s fade-in;
  -o-animation: 0.5s fade-in;
  animation: 0.5s fade-in;
  z-index: 100;
}

#animated-view.ng-leave {
  -webkit-animation: 0.5s fade-out;
  -moz-animation: 0.5s fade-out;
  -o-animation: 0.5s fade-out;
  animation: 0.5s fade-out;
  z-index: 99;
}

/* ANIMATION DEFINITIONS
============================================================================= */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-webkit-keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-webkit-keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* slide out to the left */
@keyframes slideOutLeft {
  to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {
  to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
  to      { -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
  from    { transform:translateX(200%); }
  to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
  from    { -moz-transform:translateX(200%); }
  to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
  from    { -webkit-transform:translateX(200%); }
  to      { -webkit-transform: translateX(0); }
}

/* UI View animations using 3d transforms */
/* Have to set height explicitly on ui-view
to prevent collapsing during animation*/
/*.ui-view-container {*/
  /*position: relative;*/
  /*height: 65px;*/
/*}*/

/*#animated-view.ng-enter,*/
/*#animated-view.ng-leave {*/
  /*position: absolute;*/
  /*left: 0;*/
  /*right: 0;*/
  /*-webkit-transition:all .5s ease-in-out;*/
  /*-moz-transition:all .5s ease-in-out;*/
  /*-o-transition:all .5s ease-in-out;*/
  /*transition:all .5s ease-in-out;*/
/*}*/

/*#animated-view.ng-enter {*/
  /*opacity: 0;*/
  /*-webkit-transform:scale3d(0.5, 0.5, 0.5);*/
  /*-moz-transform:scale3d(0.5, 0.5, 0.5);*/
  /*transform:scale3d(0.5, 0.5, 0.5);*/
/*}*/

/*#animated-view.ng-enter-active {*/
  /*opacity: 1;*/
  /*-webkit-transform:scale3d(1, 1, 1);*/
  /*-moz-transform:scale3d(1, 1, 1);*/
  /*transform:scale3d(1, 1, 1);*/
/*}*/

/*#animated-view.ng-leave {*/
  /*opacity: 1;*/
  /*-webkit-transform:translate3d(0, 0, 0);*/
  /*-moz-transform:translate3d(0, 0, 0);*/
  /*transform:translate3d(0, 0, 0);*/
/*}*/

/*#animated-view.ng-leave-active {*/
  /*opacity: 0;*/
  /*-webkit-transform:translate3d(100px, 0, 0);*/
  /*-moz-transform:translate3d(100px, 0, 0);*/
  /*transform:translate3d(100px, 0, 0);*/
/*}*/