blob: 283967ccbebab1446c06e5c62ffd09a42b323a78 [file] [log] [blame]
Matteo Scandolobe9b13d2016-01-21 11:21:03 -08001service-canvas {
2 height: 100%;
3 width: 100%;
4 display: block;
5}
6
Matteo Scandolo65d6fc42016-01-25 16:24:42 -08007service-canvas .subscriber-select{
Matteo Scandolo39f49472016-01-25 13:55:09 -08008 z-index: 1000;
9 position: absolute;
10 width: 200px;
11 top: 10px;
12 left: 10px;
13}
14
Matteo Scandolo4889f5a2016-01-25 12:00:42 -080015service-canvas svg {
16 position: absolute;
17 top: 0;
18}
19
Matteo Scandolo65d6fc42016-01-25 16:24:42 -080020/* LEGEND */
21
22.legend {
23 fill: #fff;
24 stroke: #ccc;
25 stroke-width: 1px;
26 position: relative;
27}
28
29.legend text {
30 stroke: #000;
31}
32
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080033.node {
34 cursor: pointer;
35}
36
Matteo Scandoloc86b4c12016-01-25 17:36:08 -080037.node circle,
38.node rect{
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080039 fill: #fff;
40 stroke: steelblue;
41 stroke-width: 3px;
42}
43
Matteo Scandolofb46f5b2016-01-25 10:10:38 -080044.node.subscriber circle,
45.node.internet circle {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -080046 stroke: #05ffcb;
Matteo Scandolofb46f5b2016-01-25 10:10:38 -080047}
48
Matteo Scandoloc86b4c12016-01-25 17:36:08 -080049.node.slice rect {
Matteo Scandolo4889f5a2016-01-25 12:00:42 -080050 stroke: #b01dff;
51}
52
Matteo Scandoloc86b4c12016-01-25 17:36:08 -080053.node.instance rect {
Matteo Scandolo998e4652016-01-28 12:02:57 -080054 stroke: #ccc;
55}
56
57.node.instance rect.active {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -080058 stroke: #ff8b00;
Matteo Scandolo4889f5a2016-01-25 12:00:42 -080059}
60
Matteo Scandolo793e1dd2016-01-22 09:33:26 -080061.node rect.slice-detail{
62 fill: #fff;
63 stroke: steelblue;
64 stroke-width: 3px;
65}
66
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080067.node text {
68 font: 12px sans-serif;
69}
70
71.link {
72 fill: none;
73 stroke: #ccc;
74 stroke-width: 2px;
Matteo Scandolo68236262016-01-21 15:38:06 -080075}
76
Matteo Scandolo65d6fc42016-01-25 16:24:42 -080077.link.slice {
Matteo Scandolo39f49472016-01-25 13:55:09 -080078 stroke: rgba(157, 4, 183, 0.29);
79}
Matteo Scandolo65d6fc42016-01-25 16:24:42 -080080.link.instance{
Matteo Scandolo998e4652016-01-28 12:02:57 -080081 stroke: #ccc;
82}
83
84.link.instance.active{
Matteo Scandolo65d6fc42016-01-25 16:24:42 -080085 stroke: rgba(255, 138, 0, 0.65);
86}
Matteo Scandolo39f49472016-01-25 13:55:09 -080087
Matteo Scandolo68236262016-01-21 15:38:06 -080088.service-details{
89 width: 200px;
90 position: absolute;
91 top: 20px;
92 right: 20px;
Matteo Scandolo53a02262016-01-21 16:02:57 -080093}
94
95/* when showing the thing */
96
97.animate.ng-hide-remove {
98 animation:0.5s bounceInRight ease;
99}
100
101/* when hiding the picture */
102.animate.ng-hide-add {
103 animation:0.5s bounceOutRight ease;
104}
105
106/* ANIMATIONS */
107
108@keyframes bounceInRight {
109 from, 60%, 75%, 90%, to {
110 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
111 }
112
113 from {
114 opacity: 0;
115 transform: translate3d(3000px, 0, 0);
116 }
117
118 60% {
119 opacity: 1;
120 transform: translate3d(-25px, 0, 0);
121 }
122
123 75% {
124 transform: translate3d(10px, 0, 0);
125 }
126
127 90% {
128 transform: translate3d(-5px, 0, 0);
129 }
130
131 to {
132 transform: none;
133 }
134}
135
136@keyframes bounceInLeft {
137 from, 60%, 75%, 90%, to {
138 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
139 }
140
141 0% {
142 opacity: 0;
143 transform: translate3d(-3000px, 0, 0);
144 }
145
146 60% {
147 opacity: 1;
148 transform: translate3d(25px, 0, 0);
149 }
150
151 75% {
152 transform: translate3d(-10px, 0, 0);
153 }
154
155 90% {
156 transform: translate3d(5px, 0, 0);
157 }
158
159 to {
160 transform: none;
161 }
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800162}