Displaying service coarse graph
Change-Id: I88e6c83421d0f9fee1f34595fb640e4987e93514
diff --git a/views/ngXosViews/serviceGrid/src/css/main.css b/views/ngXosViews/serviceGrid/src/css/main.css
index ae13614..c36e56d 100644
--- a/views/ngXosViews/serviceGrid/src/css/main.css
+++ b/views/ngXosViews/serviceGrid/src/css/main.css
@@ -1,3 +1,37 @@
+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); } }
+
#xosServiceGrid service-graph {
display: block;
width: 100%;