mCordPortal/src/sass/main.scss

@import './vars.scss';
@import '../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import './bootstrap_overrides.scss';
@import './loader.scss';
@import './home.scss';

/* Global styles
-------------------------------------------------- */

body {
  background-color: $background-color;
  background-image: url($background-image);
}

.primary {
  color: $brand-primary;
}

/* Navigation styles
-------------------------------------------------- */
nav {
  .navbar-brand {
    padding-top: 0;
    img {
      width: 130px;
    }
  }

  @media (max-width: $screen-sm-min){
    .navbar-nav.pull-right{
      float: none !important;
    }
  }

  li:hover,
  li.active {
    border-bottom: 2px solid $brand-primary;
  }

  li {
    border-bottom: 2px solid transparent;

    a {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      margin-top: 5px;
    }
  }
}

body {
  padding-top: 51px;
  padding-bottom: 30px;
}

#icon-defs {
  display: none;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  margin: 0px;
  padding: 0px;
}

html, body {
  position: relative;
  min-height: 100%;
  height: 100%;
}

.app-wrapper {
  position: relative;
}

[ui-view] {
  position: absolute;
  width: 100%;
}

[ui-view],
.app-wrapper {
  min-height: 100%;
  height: 100%;
}

[ui-view] .container {
  padding-bottom: 30px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
  z-index: 100;
  box-shadow: 0 10px 5px 10px gray;
}

/* Buttons addictional styles
-------------------------------------------------- */
.btn-primary-border {
  @include button-variant($btn-primary-bg, $btn-primary-color, $btn-primary-border);
}

/* Login page styles
-------------------------------------------------- */
.login {
  background: url('../imgs/login.jpg');
  background-size: contain;
  min-height: 100%;
  background-repeat: no-repeat ;
  background-position: center ;

  display: flex;
  align-items: center;
  justify-content: center;

  .login-wrapper {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 5px 15px #666;
    width: 260px;
    padding: 20px;
  }

  @media (max-width: $screen-sm-min){
    .login-wrapper{
      width: 100%;
    }
  }
}

/* Bundle page styles
-------------------------------------------------- */
[bundle-available] {
  margin-top: 20px;
}

img {
  animation: fadein 2s ease-in-out;
}


/* ng-view-animation
-------------------------------------------------- */
.fade {
  opacity: 1;
}
.fade.ng-enter,
.fade.ng-leave {
  transition: all .5s ease-in-out;
}
.fade.ng-enter {
  opacity: 0;
}
.fade.ng-enter-active {
  opacity: 1;
}
.fade.ng-leave {
  opacity: 1;
}
.fade.ng-leave-active {
  opacity: 0;
}

  /* ng-show-animation
  -------------------------------------------------- */

  .animate.ng-hide-add {
    animation:0.5s slideOutRight ease-in-out;
  }
  .animate.ng-hide-remove {
    animation:0.5s slideInRight ease-in-out;
  }

  /* ng-repeat-animation
  -------------------------------------------------- */
  .animate-repeat.ng-move,
  .animate-repeat.ng-enter,
  .animate-repeat.ng-leave {
    transition:all linear 0.5s;
  }

  .animate-repeat.ng-leave.ng-leave-active,
  .animate-repeat.ng-move,
  .animate-repeat.ng-enter {
    opacity:0;
    animation: 0.5s slideOutRight ease-in-out;
  }

  .animate-repeat.ng-leave,
  .animate-repeat.ng-move.ng-move-active,
  .animate-repeat.ng-enter.ng-enter-active {
    opacity:1;
    height:60px;
    animation: 0.5s slideInRight ease-in-out;
  }

  .animate-repeat.ng-enter-stagger,
  .animate-repeat.ng-leave-stagger{
    transition-delay: 0.1s;
    animation-delay: 0.1s;
  }

  /* animations
  -------------------------------------------------- */

  @keyframes slideOutRight {
    from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  @keyframes slideInRight {
    from {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }

    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

@keyframes fadein {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    transform: scale3d(1, 1, 1);
  }
  to   { opacity: 1; }
}