blob: 220d2ab41dd32dd0bce916fd075d260aef0a840b [file] [log] [blame]
Matteo Scandolobe9b13d2016-01-21 11:21:03 -08001service-canvas {
2 height: 100%;
3 width: 100%;
4 display: block;
5}
6
7.node {
8 cursor: pointer;
9}
10
11.node circle {
12 fill: #fff;
13 stroke: steelblue;
14 stroke-width: 3px;
15}
16
Matteo Scandolo793e1dd2016-01-22 09:33:26 -080017.node rect.slice-detail{
18 fill: #fff;
19 stroke: steelblue;
20 stroke-width: 3px;
21}
22
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080023.node text {
24 font: 12px sans-serif;
25}
26
27.link {
28 fill: none;
29 stroke: #ccc;
30 stroke-width: 2px;
Matteo Scandolo68236262016-01-21 15:38:06 -080031}
32
33.service-details{
34 width: 200px;
35 position: absolute;
36 top: 20px;
37 right: 20px;
Matteo Scandolo53a02262016-01-21 16:02:57 -080038}
39
40/* when showing the thing */
41
42.animate.ng-hide-remove {
43 animation:0.5s bounceInRight ease;
44}
45
46/* when hiding the picture */
47.animate.ng-hide-add {
48 animation:0.5s bounceOutRight ease;
49}
50
51/* ANIMATIONS */
52
53@keyframes bounceInRight {
54 from, 60%, 75%, 90%, to {
55 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
56 }
57
58 from {
59 opacity: 0;
60 transform: translate3d(3000px, 0, 0);
61 }
62
63 60% {
64 opacity: 1;
65 transform: translate3d(-25px, 0, 0);
66 }
67
68 75% {
69 transform: translate3d(10px, 0, 0);
70 }
71
72 90% {
73 transform: translate3d(-5px, 0, 0);
74 }
75
76 to {
77 transform: none;
78 }
79}
80
81@keyframes bounceInLeft {
82 from, 60%, 75%, 90%, to {
83 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
84 }
85
86 0% {
87 opacity: 0;
88 transform: translate3d(-3000px, 0, 0);
89 }
90
91 60% {
92 opacity: 1;
93 transform: translate3d(25px, 0, 0);
94 }
95
96 75% {
97 transform: translate3d(-10px, 0, 0);
98 }
99
100 90% {
101 transform: translate3d(5px, 0, 0);
102 }
103
104 to {
105 transform: none;
106 }
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800107}