xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css

/*ceilometer-dashboard{*/

  #xosCeilometerDashboard{
    position: relative;
  }

  /* Panel Layout */
  .panel {
    margin-top: 10px;
  }

  .panel-body:not(:first-child) {
    border-top: 1px solid #e3e3e3;
  }

  .panel-body .row {
    margin-top: 10px;
  }

  /* Chart details */
  .chart {
    width: 100%;
    height: 300px;
  }

  .btn-chart, .btn-chart:hover {
    color: #fff;
  }

  .side-container {
    position: relative;
  }

  .service-list {
    margin-top: -10px;
  }

  .service-list h3 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .service-list a {
    text-decoration: none;
    color: #333;
  }

  .meters, .stats {
    margin-top: 25px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* LOADER */
  .loader {
    font-size: 10px;
    margin: 150px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  .loader:before {
    width: 50%;
    height: 50%;
    background: #105E9E;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
  }
  .loader:after {
    background: #fff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  @-webkit-keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  /* VIEW ANIMATION */

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

  /* FROM DASHBOARD TO DETAIL */

  /* dash out */
  [ui-view].ceilometerDashboard.ng-leave {
    animation:1s bounceOutLeft ease; 
  }
  /* samples in */
  [ui-view].samples.ng-enter {
    animation:1s bounceInRight ease;
  }

  /* FROM DETAIL TO DASHBOARD */

  /* samples out */
  [ui-view].samples.ng-leave {
    animation:1s bounceOutRight ease; 
  }
  /* dash in */
  [ui-view].ceilometerDashboard.ng-enter {
    animation:1s bounceInLeft ease;
  }

  /* COLUMS ANIMATION */
  /* when showing the thing */
  .animate .animate-slide-left.ng-hide-remove { 
    animation:0.5s bounceInRight ease; 
  }

  /* when hiding the picture */
  .animate .animate-slide-left.ng-hide-add {
    animation:0.5s bounceOutRight ease;
  }
  
  /* ANIMATIONS */

  @keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
      opacity: 0;
      transform: translate3d(3000px, 0, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(-25px, 0, 0);
    }

    75% {
      transform: translate3d(10px, 0, 0);
    }

    90% {
      transform: translate3d(-5px, 0, 0);
    }

    to {
      transform: none;
    }
  }

  @keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: translate3d(-3000px, 0, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(25px, 0, 0);
    }

    75% {
      transform: translate3d(-10px, 0, 0);
    }

    90% {
      transform: translate3d(5px, 0, 0);
    }

    to {
      transform: none;
    }
  }

  @keyframes slideInUp {
    from {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

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

  @keyframes bounceOutRight {
    20% {
      opacity: 1;
      transform: translate3d(-20px, 0, 0);
    }

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

  @keyframes bounceOutLeft {
    20% {
      opacity: 1;
      transform: translate3d(20px, 0, 0);
    }

    to {
      opacity: 0;
      transform: translate3d(-2000px, 0, 0);
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translate3d(0, 0, 0);
    }

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

/*}