Displaying service coarse graph
Change-Id: Iee05e9114255a20ebf600337768d180514239299
diff --git a/views/ngXosViews/serviceGrid/src/css/side-panel.css b/views/ngXosViews/serviceGrid/src/css/side-panel.css
new file mode 100644
index 0000000..3cde922
--- /dev/null
+++ b/views/ngXosViews/serviceGrid/src/css/side-panel.css
@@ -0,0 +1,33 @@
+xos-side-panel .xos-side-panel-content {
+ position: fixed;
+ width: 30%;
+ height: 100%;
+ padding: 25px;
+ background: #fff;
+ overflow: scroll; }
+ xos-side-panel .xos-side-panel-content.right {
+ border-left: 1px solid #555555;
+ top: 0;
+ right: 0;
+ visibility: hidden;
+ box-shadow: -10px 0px 20px -8px rgba(0, 0, 0, 0.75); }
+ xos-side-panel .xos-side-panel-content.right.out {
+ animation: 0.5s slideOutRight ease-in-out;
+ visibility: visible; }
+ xos-side-panel .xos-side-panel-content.right.in {
+ animation: 0.5s slideInRight ease-in-out;
+ visibility: visible; }
+
+@keyframes slideInRight {
+ from {
+ transform: translate3d(100%, 0, 0);
+ visibility: visible; }
+ to {
+ transform: translate3d(0, 0, 0); } }
+
+@keyframes slideOutRight {
+ from {
+ transform: translate3d(0, 0, 0); }
+ to {
+ visibility: hidden;
+ transform: translate3d(100%, 0, 0); } }