//
// WP NG framework
// --------------------------------------------------

//== Flexbox
@import "../../bower_components/zessx-sass-flexbox/sass-flexbox.scss";
@import "util/ng-gallery";

.wp-ng-flex {
 @include display-flex;
}

.wp-ng-inline {
  float: left;
}

.wp-ng-fit {
  height: 100%;
  width: 100%;
}

.wp-ng-fit-abs {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
}


//== Loading Spinner
@import "mixins/spinner";

.wp-ng-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;

  .wp-ng-loader {
    position: relative;
    text-align: center;
    padding: 1em;

    &.spinner-ripple {

      @include spinner(ripple, 128px, 128px, auto, 0.4, #000000);

      top: calc(50% - 64px);
    }
  }
}

//== Animation Fade
.wp-ng-fade {

  //Only animation on enter for 2 element in position relative.
  //Only animation on leave for loading-main class. It is in position absolute.
  > .ng-enter, .wp-ng-loading.ng-leave {
    transition: opacity cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  }

  > .ng-enter,
  > .ng-leave.ng-leave-active {
    opacity:0;
  }

  > .ng-leave,
  > .ng-enter.ng-enter-active {
    opacity:1;
  }
}