views/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css

/*
 * Copyright 2017-present Open Networking Foundation

 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at

 * http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


#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%;
  margin-bottom: 50px;
}

/* 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;
  left: 0;
  width: 100%;
  margin-bottom: 100px;
}

/* 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);
  }
}