blob: 4e6fa88208eca8203a12b3d57761700638453718 [file] [log] [blame]
Matteo Scandolod9e1c412015-12-15 14:37:27 -08001#xosCeilometerDashboard{
2 position: relative;
3}
Matteo Scandolo52193d32015-12-05 18:44:45 -08004
Matteo Scandolod9e1c412015-12-15 14:37:27 -08005/* Panel Layout */
6.panel {
7 margin-top: 10px;
8}
9
10.panel-body:not(:first-child) {
11 border-top: 1px solid #e3e3e3;
12}
13
14.panel-body .row {
15 margin-top: 10px;
16}
17
18/* Chart details */
19.chart {
20 width: 100%;
21 height: 300px;
22}
23
24.btn-chart, .btn-chart:hover {
25 color: #fff;
26}
27
28.side-container {
29 position: relative;
30}
31
32.service-list {
33 margin-top: -10px;
34}
35
36.service-list h3 {
37 margin-top: 0px;
38 margin-bottom: 0px;
39}
40
41.service-list a {
42 text-decoration: none;
43 color: #333;
44}
45
46.meters, .stats {
47 margin-top: 25px;
48 position: absolute;
49 top: 0;
50 left: 0;
51 width: 100%;
Matteo Scandoloc8eefd12015-12-17 16:31:02 -080052 margin-bottom: 50px;
Matteo Scandolod9e1c412015-12-15 14:37:27 -080053}
54
55/* LOADER */
56.loader {
57 font-size: 10px;
58 margin: 150px auto;
59 text-indent: -9999em;
60 width: 11em;
61 height: 11em;
62 border-radius: 50%;
63 background: #ffffff;
64 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
65 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
66 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
67 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
68 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
69 position: relative;
70 -webkit-animation: load3 1.4s infinite linear;
71 animation: load3 1.4s infinite linear;
72 -webkit-transform: translateZ(0);
73 -ms-transform: translateZ(0);
74 transform: translateZ(0);
75}
76.loader:before {
77 width: 50%;
78 height: 50%;
79 background: #105E9E;
80 border-radius: 100% 0 0 0;
81 position: absolute;
82 top: 0;
83 left: 0;
84 content: '';
85}
86.loader:after {
87 background: #fff;
88 width: 75%;
89 height: 75%;
90 border-radius: 50%;
91 content: '';
92 margin: auto;
93 position: absolute;
94 top: 0;
95 left: 0;
96 bottom: 0;
97 right: 0;
98}
99@-webkit-keyframes load3 {
100 0% {
101 -webkit-transform: rotate(0deg);
102 transform: rotate(0deg);
103 }
104 100% {
105 -webkit-transform: rotate(360deg);
106 transform: rotate(360deg);
107 }
108}
109@keyframes load3 {
110 0% {
111 -webkit-transform: rotate(0deg);
112 transform: rotate(0deg);
113 }
114 100% {
115 -webkit-transform: rotate(360deg);
116 transform: rotate(360deg);
117 }
118}
119
120/* VIEW ANIMATION */
121
122[ui-view] {
123 position: absolute;
124 top: 0;
Matteo Scandoloe1d959f2015-12-17 16:26:09 -0800125 left: 0;
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800126 width: 100%;
Matteo Scandoloe1d959f2015-12-17 16:26:09 -0800127 margin-bottom: 100px;
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800128}
129
130/* FROM DASHBOARD TO DETAIL */
131
132/* dash out */
133[ui-view].ceilometerDashboard.ng-leave {
134 animation:1s bounceOutLeft ease;
135}
136/* samples in */
137[ui-view].samples.ng-enter {
138 animation:1s bounceInRight ease;
139}
140
141/* FROM DETAIL TO DASHBOARD */
142
143/* samples out */
144[ui-view].samples.ng-leave {
145 animation:1s bounceOutRight ease;
146}
147/* dash in */
148[ui-view].ceilometerDashboard.ng-enter {
149 animation:1s bounceInLeft ease;
150}
151
152/* COLUMS ANIMATION */
153/* when showing the thing */
154.animate .animate-slide-left.ng-hide-remove {
155 animation:0.5s bounceInRight ease;
156}
157
158/* when hiding the picture */
159.animate .animate-slide-left.ng-hide-add {
160 animation:0.5s bounceOutRight ease;
161}
162
163/* ANIMATIONS */
164
165@keyframes bounceInRight {
166 from, 60%, 75%, 90%, to {
167 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
Matteo Scandoloa918ea82015-12-14 14:26:20 -0800168 }
169
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800170 from {
171 opacity: 0;
172 transform: translate3d(3000px, 0, 0);
Matteo Scandoloe3de73d2015-12-04 10:14:40 -0800173 }
Matteo Scandolo52193d32015-12-05 18:44:45 -0800174
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800175 60% {
176 opacity: 1;
177 transform: translate3d(-25px, 0, 0);
Matteo Scandoloe3de73d2015-12-04 10:14:40 -0800178 }
Matteo Scandolo52193d32015-12-05 18:44:45 -0800179
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800180 75% {
181 transform: translate3d(10px, 0, 0);
Matteo Scandoloe3de73d2015-12-04 10:14:40 -0800182 }
Matteo Scandolo52193d32015-12-05 18:44:45 -0800183
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800184 90% {
185 transform: translate3d(-5px, 0, 0);
Matteo Scandoloe3de73d2015-12-04 10:14:40 -0800186 }
Matteo Scandolo52193d32015-12-05 18:44:45 -0800187
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800188 to {
189 transform: none;
190 }
191}
192
193@keyframes bounceInLeft {
194 from, 60%, 75%, 90%, to {
195 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
Matteo Scandoloc6a78982015-12-08 16:39:57 -0800196 }
197
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800198 0% {
199 opacity: 0;
200 transform: translate3d(-3000px, 0, 0);
Matteo Scandolo5dd94182015-12-09 17:09:55 -0800201 }
202
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800203 60% {
204 opacity: 1;
205 transform: translate3d(25px, 0, 0);
Matteo Scandolo0f5e1632015-12-09 16:09:59 -0800206 }
207
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800208 75% {
209 transform: translate3d(-10px, 0, 0);
Matteo Scandolo0f5e1632015-12-09 16:09:59 -0800210 }
211
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800212 90% {
213 transform: translate3d(5px, 0, 0);
Matteo Scandolo0f5e1632015-12-09 16:09:59 -0800214 }
215
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800216 to {
217 transform: none;
218 }
219}
220
221@keyframes slideInUp {
222 from {
223 transform: translate3d(0, 100%, 0);
224 visibility: visible;
Matteo Scandolo0f5e1632015-12-09 16:09:59 -0800225 }
226
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800227 to {
228 transform: translate3d(0, 0, 0);
Matteo Scandolo52193d32015-12-05 18:44:45 -0800229 }
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800230}
231
232@keyframes bounceOutRight {
233 20% {
234 opacity: 1;
235 transform: translate3d(-20px, 0, 0);
Matteo Scandolo52193d32015-12-05 18:44:45 -0800236 }
237
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800238 to {
239 opacity: 0;
240 transform: translate3d(2000px, 0, 0);
241 }
242}
Matteo Scandolo52193d32015-12-05 18:44:45 -0800243
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800244@keyframes bounceOutLeft {
245 20% {
246 opacity: 1;
247 transform: translate3d(20px, 0, 0);
Matteo Scandolo52193d32015-12-05 18:44:45 -0800248 }
249
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800250 to {
251 opacity: 0;
252 transform: translate3d(-2000px, 0, 0);
Matteo Scandoloc2d31102015-12-08 14:35:55 -0800253 }
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800254}
255
256@keyframes slideOutDown {
257 from {
258 transform: translate3d(0, 0, 0);
Matteo Scandolo52193d32015-12-05 18:44:45 -0800259 }
260
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800261 to {
262 visibility: hidden;
263 transform: translate3d(0, 100%, 0);
Matteo Scandolo52193d32015-12-05 18:44:45 -0800264 }
Matteo Scandolod9e1c412015-12-15 14:37:27 -0800265}