Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 1 | /*ceilometer-dashboard{*/ |
| 2 | |
| 3 | /* Panel Layout */ |
| 4 | .panel { |
| 5 | margin-top: 10px; |
Matteo Scandolo | 68c2e72 | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 6 | } |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 7 | |
| 8 | .panel-body:not(:first-child) { |
| 9 | border-top: 1px solid #e3e3e3; |
Matteo Scandolo | 68c2e72 | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 10 | } |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 11 | |
| 12 | .panel-body .row { |
| 13 | margin-top: 10px; |
Matteo Scandolo | 68c2e72 | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 14 | } |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 15 | |
| 16 | /* Chart details */ |
| 17 | .chart { |
| 18 | width: 100%; |
| 19 | height: 300px; |
Matteo Scandolo | 68c2e72 | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 20 | } |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 21 | |
Matteo Scandolo | 324df09 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 22 | .btn-chart, .btn-chart:hover { |
| 23 | color: #fff; |
| 24 | } |
| 25 | |
Matteo Scandolo | 41f5c15 | 2015-12-09 17:09:55 -0800 | [diff] [blame^] | 26 | .side-container { |
| 27 | position: relative; |
| 28 | } |
| 29 | |
Matteo Scandolo | c058211 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 30 | .service-list { |
| 31 | margin-top: -10px; |
| 32 | } |
| 33 | |
| 34 | .service-list h3 { |
| 35 | margin-top: 0px; |
| 36 | margin-bottom: 0px; |
| 37 | } |
| 38 | |
| 39 | .service-list a { |
| 40 | text-decoration: none; |
| 41 | color: #333; |
| 42 | } |
| 43 | |
Matteo Scandolo | 41f5c15 | 2015-12-09 17:09:55 -0800 | [diff] [blame^] | 44 | .meters, .stats { |
Matteo Scandolo | c058211 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 45 | margin-top: 25px; |
Matteo Scandolo | 41f5c15 | 2015-12-09 17:09:55 -0800 | [diff] [blame^] | 46 | position: absolute; |
| 47 | top: 0; |
| 48 | left: 0; |
| 49 | width: 100%; |
Matteo Scandolo | c058211 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 50 | } |
| 51 | |
Matteo Scandolo | 324df09 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 52 | /* LOADER */ |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 53 | .loader { |
| 54 | font-size: 10px; |
Matteo Scandolo | 9824197 | 2015-12-08 17:41:46 -0800 | [diff] [blame] | 55 | margin: 150px auto; |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 56 | text-indent: -9999em; |
| 57 | width: 11em; |
| 58 | height: 11em; |
| 59 | border-radius: 50%; |
| 60 | background: #ffffff; |
| 61 | background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); |
| 62 | background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); |
| 63 | background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); |
| 64 | background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); |
| 65 | background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); |
| 66 | position: relative; |
| 67 | -webkit-animation: load3 1.4s infinite linear; |
| 68 | animation: load3 1.4s infinite linear; |
| 69 | -webkit-transform: translateZ(0); |
| 70 | -ms-transform: translateZ(0); |
| 71 | transform: translateZ(0); |
| 72 | } |
| 73 | .loader:before { |
| 74 | width: 50%; |
| 75 | height: 50%; |
| 76 | background: #105E9E; |
| 77 | border-radius: 100% 0 0 0; |
| 78 | position: absolute; |
| 79 | top: 0; |
| 80 | left: 0; |
| 81 | content: ''; |
| 82 | } |
| 83 | .loader:after { |
| 84 | background: #fff; |
| 85 | width: 75%; |
| 86 | height: 75%; |
| 87 | border-radius: 50%; |
| 88 | content: ''; |
| 89 | margin: auto; |
| 90 | position: absolute; |
| 91 | top: 0; |
| 92 | left: 0; |
| 93 | bottom: 0; |
| 94 | right: 0; |
| 95 | } |
| 96 | @-webkit-keyframes load3 { |
| 97 | 0% { |
| 98 | -webkit-transform: rotate(0deg); |
| 99 | transform: rotate(0deg); |
| 100 | } |
| 101 | 100% { |
| 102 | -webkit-transform: rotate(360deg); |
| 103 | transform: rotate(360deg); |
| 104 | } |
| 105 | } |
| 106 | @keyframes load3 { |
| 107 | 0% { |
| 108 | -webkit-transform: rotate(0deg); |
| 109 | transform: rotate(0deg); |
| 110 | } |
| 111 | 100% { |
| 112 | -webkit-transform: rotate(360deg); |
| 113 | transform: rotate(360deg); |
| 114 | } |
| 115 | } |
| 116 | |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 117 | /* VIEW ANIMATION */ |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 118 | |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 119 | [ui-view] { |
| 120 | position: absolute; |
| 121 | top: 0; |
| 122 | bottom: 0; |
| 123 | width: 100%; |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 124 | } |
| 125 | |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 126 | /* FROM DASHBOARD TO DETAIL */ |
| 127 | |
| 128 | /* dash out */ |
| 129 | [ui-view].ceilometerDashboard.ng-leave { |
| 130 | animation:1s bounceOutLeft ease; |
| 131 | } |
| 132 | /* samples in */ |
| 133 | [ui-view].samples.ng-enter { |
| 134 | animation:1s bounceInRight ease; |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 135 | } |
| 136 | |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 137 | /* FROM DETAIL TO DASHBOARD */ |
| 138 | |
| 139 | /* samples out */ |
| 140 | [ui-view].samples.ng-leave { |
| 141 | animation:1s bounceOutRight ease; |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 142 | } |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 143 | /* dash in */ |
| 144 | [ui-view].ceilometerDashboard.ng-enter { |
| 145 | animation:1s bounceInLeft ease; |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 146 | } |
| 147 | |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 148 | /* COLUMS ANIMATION */ |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 149 | /* when showing the thing */ |
| 150 | .animate .animate-slide-left.ng-hide-remove { |
| 151 | animation:0.5s bounceInRight ease; |
| 152 | } |
| 153 | |
| 154 | /* when hiding the picture */ |
| 155 | .animate .animate-slide-left.ng-hide-add { |
| 156 | animation:0.5s bounceOutRight ease; |
| 157 | } |
| 158 | |
| 159 | /* ANIMATIONS */ |
| 160 | |
| 161 | @keyframes bounceInRight { |
| 162 | from, 60%, 75%, 90%, to { |
| 163 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
| 164 | } |
| 165 | |
| 166 | from { |
| 167 | opacity: 0; |
| 168 | transform: translate3d(3000px, 0, 0); |
| 169 | } |
| 170 | |
| 171 | 60% { |
| 172 | opacity: 1; |
| 173 | transform: translate3d(-25px, 0, 0); |
| 174 | } |
| 175 | |
| 176 | 75% { |
| 177 | transform: translate3d(10px, 0, 0); |
| 178 | } |
| 179 | |
| 180 | 90% { |
| 181 | transform: translate3d(-5px, 0, 0); |
| 182 | } |
| 183 | |
| 184 | to { |
| 185 | transform: none; |
| 186 | } |
| 187 | } |
| 188 | |
| 189 | @keyframes bounceInLeft { |
| 190 | from, 60%, 75%, 90%, to { |
| 191 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
| 192 | } |
| 193 | |
| 194 | 0% { |
| 195 | opacity: 0; |
| 196 | transform: translate3d(-3000px, 0, 0); |
| 197 | } |
| 198 | |
| 199 | 60% { |
| 200 | opacity: 1; |
| 201 | transform: translate3d(25px, 0, 0); |
| 202 | } |
| 203 | |
| 204 | 75% { |
| 205 | transform: translate3d(-10px, 0, 0); |
| 206 | } |
| 207 | |
| 208 | 90% { |
| 209 | transform: translate3d(5px, 0, 0); |
| 210 | } |
| 211 | |
| 212 | to { |
| 213 | transform: none; |
| 214 | } |
| 215 | } |
| 216 | |
Matteo Scandolo | c058211 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 217 | @keyframes slideInUp { |
| 218 | from { |
| 219 | transform: translate3d(0, 100%, 0); |
| 220 | visibility: visible; |
| 221 | } |
| 222 | |
| 223 | to { |
| 224 | transform: translate3d(0, 0, 0); |
| 225 | } |
| 226 | } |
| 227 | |
Matteo Scandolo | 6885608 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 228 | @keyframes bounceOutRight { |
| 229 | 20% { |
| 230 | opacity: 1; |
| 231 | transform: translate3d(-20px, 0, 0); |
| 232 | } |
| 233 | |
| 234 | to { |
| 235 | opacity: 0; |
| 236 | transform: translate3d(2000px, 0, 0); |
| 237 | } |
| 238 | } |
| 239 | |
| 240 | @keyframes bounceOutLeft { |
| 241 | 20% { |
| 242 | opacity: 1; |
| 243 | transform: translate3d(20px, 0, 0); |
| 244 | } |
| 245 | |
| 246 | to { |
| 247 | opacity: 0; |
| 248 | transform: translate3d(-2000px, 0, 0); |
| 249 | } |
| 250 | } |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 251 | |
Matteo Scandolo | c058211 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 252 | @keyframes slideOutDown { |
| 253 | from { |
| 254 | transform: translate3d(0, 0, 0); |
| 255 | } |
| 256 | |
| 257 | to { |
| 258 | visibility: hidden; |
| 259 | transform: translate3d(0, 100%, 0); |
| 260 | } |
| 261 | } |
| 262 | |
Matteo Scandolo | 1d8627f | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 263 | /*} |