commit eda4930ee3da67e5fc4f2d92c55c6ee3f3905ca2
Author: Athina Bekakou <athinabek@grnet.gr>
Date:   Wed Jan 22 12:49:12 2014 +0200

    new ui: add loader for disconnect procedure

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/images/gear-485057.GIF b/snf-cyclades-app/synnefo/ui/new_ui/ui/images/gear-485057.GIF
new file mode 100644
index 0000000..99c7e68
Binary files /dev/null and b/snf-cyclades-app/synnefo/ui/new_ui/ui/images/gear-485057.GIF differ
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_connected.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_connected.scss
index c2b1d43..9f82f85 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_connected.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_connected.scss
@@ -97,12 +97,14 @@ $lt-width: $details-lt-width/2 + $details-top-more-padding-lt ;
 						color: $act-btn-color-hover;
 					}
 					&.open {
-						border-color:white;
+							border-color:white;
 							width: 29px;
-							line-height: 16px;
-							color: $gray-0;
+							height: 29px;
+							// line-height: 16px;
+							// color: $gray-0;
+							background:url(../images/gear-485057.GIF) no-repeat 0 0 #fff;
 						&:before {
-							content: "...";
+							content: "";
 						}
 						// background:url(../images/disconnected.png) no-repeat 0 0 #fff;
 						// -moz-transition: none;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index 169d8d1..46a12c7 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -10824,47 +10824,47 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
 .connected .item .connections > li .act.open {
   border-color: white;
   width: 29px;
-  line-height: 16px;
-  color: #2d3338;
+  height: 29px;
+  background: url(../images/gear-485057.GIF) no-repeat 0 0 white;
 }
-/* line 104, ../sass/_connected.scss */
+/* line 106, ../sass/_connected.scss */
 .connected .item .connections > li .act.open:before {
-  content: "...";
+  content: "";
 }
-/* line 113, ../sass/_connected.scss */
+/* line 115, ../sass/_connected.scss */
 .connected .item .connections > li .data {
   float: left;
   position: relative;
   top: -15px;
   width: 350px;
 }
-/* line 118, ../sass/_connected.scss */
+/* line 120, ../sass/_connected.scss */
 .connected .item .connections > li .data ul {
   padding: 5px 0 0;
   margin: 0;
   background-color: #bebebe;
 }
-/* line 122, ../sass/_connected.scss */
+/* line 124, ../sass/_connected.scss */
 .connected .item .connections > li .data ul li {
   font-size: 0.75em;
   list-style: none outside none;
   padding: 0 10px 10px 10px;
 }
-/* line 126, ../sass/_connected.scss */
+/* line 128, ../sass/_connected.scss */
 .connected .item .connections > li .data ul li h5 {
   float: left;
   margin: 0;
   line-height: 1.3em;
 }
-/* line 130, ../sass/_connected.scss */
+/* line 132, ../sass/_connected.scss */
 .connected .item .connections > li .data ul li h5.ip-data {
   width: 10%;
 }
-/* line 133, ../sass/_connected.scss */
+/* line 135, ../sass/_connected.scss */
 .connected .item .connections > li .data ul li h5.volume-data {
   width: 35%;
 }
-/* line 137, ../sass/_connected.scss */
+/* line 139, ../sass/_connected.scss */
 .connected .item .connections > li .data ul li p {
   overflow: hidden;
   padding-left: 10px;
@@ -10872,7 +10872,7 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
   line-height: 1.3em;
 }
 
-/* line 151, ../sass/_connected.scss */
+/* line 153, ../sass/_connected.scss */
 .connect-new {
   position: absolute;
   bottom: -150px;
@@ -10884,7 +10884,7 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
   margin-bottom: 50px;
   margin-left: -1px;
 }
-/* line 161, ../sass/_connected.scss */
+/* line 163, ../sass/_connected.scss */
 .connect-new .img-wrap {
   position: relative;
   display: block;
@@ -10893,7 +10893,7 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
   background: url(../images/dashed_atom-x.png) repeat-x left top;
   overflow: inherit;
 }
-/* line 168, ../sass/_connected.scss */
+/* line 170, ../sass/_connected.scss */
 .connect-new .img-wrap > a {
   display: block;
   position: absolute;
@@ -10903,17 +10903,17 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
   text-align: center;
   margin: -20px 0 0;
 }
-/* line 176, ../sass/_connected.scss */
+/* line 178, ../sass/_connected.scss */
 .connect-new .img-wrap > a .snf-font {
   color: #485057;
   font-size: 3.75em;
 }
-/* line 180, ../sass/_connected.scss */
+/* line 182, ../sass/_connected.scss */
 .connect-new .img-wrap > a .snf-network-full {
   position: relative;
   top: -9px;
 }
-/* line 186, ../sass/_connected.scss */
+/* line 188, ../sass/_connected.scss */
 .connect-new p {
   position: absolute;
   left: 165px;
@@ -10922,27 +10922,27 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
   font-size: 0.875em;
   top: 90px;
 }
-/* line 194, ../sass/_connected.scss */
+/* line 196, ../sass/_connected.scss */
 .connect-new.network p {
   top: 90px;
 }
-/* line 197, ../sass/_connected.scss */
+/* line 199, ../sass/_connected.scss */
 .connect-new.disk p {
   top: 94px;
 }
-/* line 201, ../sass/_connected.scss */
+/* line 203, ../sass/_connected.scss */
 .connect-new:hover .img-wrap > a .snf-font, .connect-new:hover span, .connect-new:hover a {
   color: #30c79e;
 }
 
-/* line 208, ../sass/_connected.scss */
+/* line 210, ../sass/_connected.scss */
 .network .connected {
   left: 143px;
   top: -80px;
   padding-top: 80px;
 }
 
-/* line 212, ../sass/_connected.scss */
+/* line 214, ../sass/_connected.scss */
 .firewall {
   float: left;
   margin-left: 20px;
@@ -10955,46 +10955,46 @@ body .body-wrapper .overlay-area-reveal .secondary-wizard ul li:hover {
   white-space: nowrap;
   background-color: #fff;
 }
-/* line 223, ../sass/_connected.scss */
+/* line 225, ../sass/_connected.scss */
 .firewall p {
   margin: 0;
 }
-/* line 225, ../sass/_connected.scss */
+/* line 227, ../sass/_connected.scss */
 .firewall p em {
   color: #30c79e;
 }
-/* line 229, ../sass/_connected.scss */
+/* line 231, ../sass/_connected.scss */
 .firewall .more {
   margin-top: 10px;
   margin-left: 0;
   list-style: none;
   display: none;
 }
-/* line 236, ../sass/_connected.scss */
+/* line 238, ../sass/_connected.scss */
 .firewall .more li {
   min-width: 200px;
 }
-/* line 238, ../sass/_connected.scss */
+/* line 240, ../sass/_connected.scss */
 .firewall .more li span {
   float: right;
   font-size: 0.875em;
   height: 14px;
   line-height: 22px;
 }
-/* line 244, ../sass/_connected.scss */
+/* line 246, ../sass/_connected.scss */
 .firewall .more li em {
   float: right;
   margin: 0 5px 0 20px;
   width: 15px;
   display: inline-block;
 }
-/* line 253, ../sass/_connected.scss */
+/* line 255, ../sass/_connected.scss */
 .firewall.unprotected > p em,
 .firewall .unprotected a em {
   color: #e02b2b;
 }
 
-/* line 258, ../sass/_connected.scss */
+/* line 260, ../sass/_connected.scss */
 .details .placeholder {
   height: 100px;
 }
