commit b4c26e76f188e5c239f5689a950491b7f37be08d
Author: Athina Bekakou <athinabek@grnet.gr>
Date:   Tue Nov 5 12:05:43 2013 +0200

    new ui: modify the style of "new machine" button

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
index 6eee539..e6c25da 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
@@ -13,19 +13,7 @@
 		list-style:none;
 		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
 		height: 215px;
-		.add-new {
-			a {
-				margin:0 20px;
-				display: block;
-				font-weight: bold;
-				height: 100%;
-				width:100%;
-				&:hover {
-					border-color:$third-color;
-				}
-			}			
-		}
-		.img-wrap {
+				.img-wrap {
 			// height: 78px;
 			// margin: 0 60px;
 			text-align: center;
@@ -145,7 +133,6 @@
 			}
 		}
 		.visible-info {
-			// margin: 0 25px;
 			text-align: center;
 			font-size: 12px;
 			position:relative;
@@ -154,7 +141,6 @@
 			margin-bottom: 4px;
 			span {
 				&.title {
-					// white-space: nowrap;
 					height: 3em;
 					overflow: hidden;
 				}
@@ -166,6 +152,65 @@
 				}
 			}
 		}
+		&[data-status="add-new"] {
+			background-color: $secondary-color;
+			-webkit-transition: background-color 300ms linear;
+			-moz-transition: background-color 300ms linear;
+			-o-transition: background-color 300ms linear;
+			-ms-transition: background-color 300ms linear;
+			transition: background-color 300ms linear;
+			.container {
+				.img-wrap {
+					.img {
+						a {
+							span:first-child {
+								color: white;
+
+							}
+							.symbol {
+								background-image: none;
+								color: $secondary-color;
+								font-size: 30px;
+								text-indent: 0;
+							}
+						}
+					}
+				}
+				.visible-info a{
+					color: white;
+				}
+			}
+			&:hover {
+			background-color: white;
+			-webkit-transition: background-color 300ms linear;
+			-moz-transition: background-color 300ms linear;
+			-o-transition: background-color 300ms linear;
+			-ms-transition: background-color 300ms linear;
+			transition: background-color 300ms linear;
+			.container {
+				.img-wrap {
+					.img {
+						a {
+							span:first-child {
+								color: $secondary-color;
+								-webkit-transition: color 300ms linear;
+								-moz-transition: color 300ms linear;
+								-o-transition: color 300ms linear;
+								-ms-transition: color 300ms linear;
+								transition: color 300ms linear;
+							}
+							.symbol {
+								color: white;
+							}
+						}
+					}
+				}
+				.visible-info a{
+					color: $secondary-color;
+				}
+			}
+			}
+		}
 	}
 	&.list-view {
 		li {
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 ce42004..be7e222 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
@@ -7569,30 +7569,18 @@ body {
   background: url(../images/dashed-bg-corner.png) no-repeat right bottom;
   height: 215px;
 }
-/* line 17, ../sass/_items-list.scss */
-.items-list > li .add-new a {
-  margin: 0 20px;
-  display: block;
-  font-weight: bold;
-  height: 100%;
-  width: 100%;
-}
-/* line 23, ../sass/_items-list.scss */
-.items-list > li .add-new a:hover {
-  border-color: #30c79e;
-}
-/* line 28, ../sass/_items-list.scss */
+/* line 16, ../sass/_items-list.scss */
 .items-list > li .img-wrap {
   text-align: center;
 }
-/* line 33, ../sass/_items-list.scss */
+/* line 21, ../sass/_items-list.scss */
 .items-list > li .img {
   margin-bottom: 16px;
   position: relative;
   height: 58px;
   display: inline-block;
 }
-/* line 39, ../sass/_items-list.scss */
+/* line 27, ../sass/_items-list.scss */
 .items-list > li .container {
   height: 160px;
   border: 1px solid transparent;
@@ -7600,36 +7588,36 @@ body {
   position: relative;
   line-height: 120%;
 }
-/* line 40, ../sass/_items-list.scss */
+/* line 28, ../sass/_items-list.scss */
 .items-list > li .container.set-bg {
   background: #f3f3f4;
 }
-/* line 41, ../sass/_items-list.scss */
+/* line 29, ../sass/_items-list.scss */
 .items-list > li .container.set-border {
   border-color: #30c79e;
 }
-/* line 47, ../sass/_items-list.scss */
+/* line 35, ../sass/_items-list.scss */
 .items-list > li .container .tags {
   width: 100%;
   min-height: 12px;
   position: absolute;
   bottom: 6px;
 }
-/* line 54, ../sass/_items-list.scss */
+/* line 42, ../sass/_items-list.scss */
 .items-list > li .container .status {
   font-size: 12px;
   text-align: center;
 }
-/* line 57, ../sass/_items-list.scss */
+/* line 45, ../sass/_items-list.scss */
 .items-list > li .container .status a {
   color: #30c79e;
 }
-/* line 61, ../sass/_items-list.scss */
+/* line 49, ../sass/_items-list.scss */
 .items-list > li .container .status span {
   color: #30c79e;
   display: block;
 }
-/* line 67, ../sass/_items-list.scss */
+/* line 55, ../sass/_items-list.scss */
 .items-list > li .more {
   display: none;
   background: #fff;
@@ -7651,60 +7639,60 @@ body {
 .items-list > li .more:after {
   clear: both;
 }
-/* line 80, ../sass/_items-list.scss */
+/* line 68, ../sass/_items-list.scss */
 .items-list > li .more .col {
   width: 50%;
   float: left;
   font-size: 0.875em;
   height: 200px;
 }
-/* line 85, ../sass/_items-list.scss */
+/* line 73, ../sass/_items-list.scss */
 .items-list > li .more .col ul {
   margin: 0;
   padding: 0;
   list-style: none outside none;
 }
-/* line 89, ../sass/_items-list.scss */
+/* line 77, ../sass/_items-list.scss */
 .items-list > li .more .col ul li {
   padding: 0;
   text-align: left;
 }
-/* line 92, ../sass/_items-list.scss */
+/* line 80, ../sass/_items-list.scss */
 .items-list > li .more .col ul li a {
   color: #222222;
   display: block;
   width: 100%;
 }
-/* line 96, ../sass/_items-list.scss */
+/* line 84, ../sass/_items-list.scss */
 .items-list > li .more .col ul li a:hover {
   background-color: #30c79e;
   color: #fff;
 }
-/* line 104, ../sass/_items-list.scss */
+/* line 92, ../sass/_items-list.scss */
 .items-list > li .more .col.lt ul {
   padding-top: 10px;
 }
-/* line 107, ../sass/_items-list.scss */
+/* line 95, ../sass/_items-list.scss */
 .items-list > li .more .col.lt ul li a {
   padding: 5px 5px 5px 30px;
 }
-/* line 115, ../sass/_items-list.scss */
+/* line 103, ../sass/_items-list.scss */
 .items-list > li .more .col.rt ul li {
   height: 100px;
 }
-/* line 117, ../sass/_items-list.scss */
+/* line 105, ../sass/_items-list.scss */
 .items-list > li .more .col.rt ul li a {
   height: 100%;
   padding: 5px 5px 5px 30px;
   line-height: 100px;
 }
-/* line 126, ../sass/_items-list.scss */
+/* line 114, ../sass/_items-list.scss */
 .items-list > li .more .vm-name {
   background: url(../images/dashed_atom-x.png) repeat-x center top;
   padding: 10px;
   font-size: 0.625em;
 }
-/* line 132, ../sass/_items-list.scss */
+/* line 120, ../sass/_items-list.scss */
 .items-list > li .check {
   position: absolute;
   right: 10px;
@@ -7715,16 +7703,16 @@ body {
   cursor: pointer;
   z-index: 10;
 }
-/* line 142, ../sass/_items-list.scss */
+/* line 130, ../sass/_items-list.scss */
 .items-list > li .check span {
   position: relative;
   z-index: 10;
 }
-/* line 143, ../sass/_items-list.scss */
+/* line 131, ../sass/_items-list.scss */
 .items-list > li .check.active {
   color: #30c79e;
 }
-/* line 147, ../sass/_items-list.scss */
+/* line 135, ../sass/_items-list.scss */
 .items-list > li .visible-info {
   text-align: center;
   font-size: 12px;
@@ -7733,28 +7721,78 @@ body {
   overflow: hidden;
   margin-bottom: 4px;
 }
-/* line 155, ../sass/_items-list.scss */
+/* line 142, ../sass/_items-list.scss */
 .items-list > li .visible-info span {
   display: block;
   position: relative;
 }
-/* line 156, ../sass/_items-list.scss */
+/* line 143, ../sass/_items-list.scss */
 .items-list > li .visible-info span.title {
   height: 3em;
   overflow: hidden;
 }
-/* line 163, ../sass/_items-list.scss */
+/* line 149, ../sass/_items-list.scss */
 .items-list > li .visible-info span em {
   font-style: normal;
   position: relative;
 }
-/* line 171, ../sass/_items-list.scss */
+/* line 155, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"] {
+  background-color: #30c79e;
+  -webkit-transition: background-color 300ms linear;
+  -moz-transition: background-color 300ms linear;
+  -o-transition: background-color 300ms linear;
+  -ms-transition: background-color 300ms linear;
+  transition: background-color 300ms linear;
+}
+/* line 166, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"] .container .img-wrap .img a span:first-child {
+  color: white;
+}
+/* line 170, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"] .container .img-wrap .img a .symbol {
+  background-image: none;
+  color: #30c79e;
+  font-size: 30px;
+  text-indent: 0;
+}
+/* line 179, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"] .container .visible-info a {
+  color: white;
+}
+/* line 183, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"]:hover {
+  background-color: white;
+  -webkit-transition: background-color 300ms linear;
+  -moz-transition: background-color 300ms linear;
+  -o-transition: background-color 300ms linear;
+  -ms-transition: background-color 300ms linear;
+  transition: background-color 300ms linear;
+}
+/* line 194, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"]:hover .container .img-wrap .img a span:first-child {
+  color: #30c79e;
+  -webkit-transition: color 300ms linear;
+  -moz-transition: color 300ms linear;
+  -o-transition: color 300ms linear;
+  -ms-transition: color 300ms linear;
+  transition: color 300ms linear;
+}
+/* line 202, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"]:hover .container .img-wrap .img a .symbol {
+  color: white;
+}
+/* line 208, ../sass/_items-list.scss */
+.items-list > li[data-status="add-new"]:hover .container .visible-info a {
+  color: #30c79e;
+}
+/* line 216, ../sass/_items-list.scss */
 .items-list.list-view li {
   width: 100%;
 }
 
 @media only screen and (min-width: 68.75em) {
-  /* line 181, ../sass/_items-list.scss */
+  /* line 226, ../sass/_items-list.scss */
   .entities .items-list.list-view li {
     width: 100%;
   }
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
index 92b2d6b..da21874 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
@@ -748,10 +748,24 @@ Confirm that the options you have selected are correct</p>
 		<section class="main row">
 			<div class="vms entities">
 				<ul class="items-list sortable">
-					<li data-order="0">
-						<div class="add-new"><a href="vm_create_a.html" data-overlay-id="#vm-wizard">NEW<br>MACHINE</a></div>
+					<li data-status="add-new">
+						<div class="container">
+							<div class="img-wrap">
+								<div class="img">
+								<a href="" data-overlay-id="#vm-wizard">
+									<span class="snf-PC_fill"></span>
+									<span class="os symbol">+</span>
+									</a>
+								</div>
+							</div>
+							<p class="visible-info">
+								<span class="title">
+									<a><em>New Machine</em></a>
+								</span>
+							</p>
+						</div>
 					</li>
-					<li data-order="1" data-status="running">
+					<li data-status="building">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -776,7 +790,7 @@ Confirm that the options you have selected are correct</p>
 							<div class="img-wrap">
 								<div class="img running">
 									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
-									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
+									<span class="os" data-reveal-id="vm-connect">unknown</span>
 								</div>
 							</div>
 							<p class="visible-info">
@@ -787,10 +801,12 @@ Confirm that the options you have selected are correct</p>
 							<div class="tags">
 							</div>
 							<div class= "status">
+								<span class="state"><a href="">BUILDING</a></span>
+								<span class="logs">798.56 MB of 4.33 GB<br>(18%)</span>
 							</div>
 						</div>
 					</li>
-					<li data-order="2" data-status="building">
+					<li data-status="error">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -809,7 +825,7 @@ Confirm that the options you have selected are correct</p>
 									</ul>
 								</div>
 							</div>
-							<div class="vm-name">vm name 1 really large name vm name vm 1 really large name vm</div>
+							<div class="vm-name">short name</div>
 						</div>
 						<div class="container">
 							<div class="img-wrap">
@@ -820,18 +836,18 @@ Confirm that the options you have selected are correct</p>
 							</div>
 							<p class="visible-info">
 								<span class="title">
-									<a href="vm_details.html"><em>vm name 1 really large name vm name vm 1 really large name vm</em></a>
+									<a href="vm_details.html"><em>short name</em></a>
 								</span>
 							</p>
 							<div class="tags">
 							</div>
 							<div class= "status">
-								<span class="state"><a href="">BUILDING</a></span>
-								<span class="logs">798.56 MB of 4.33 GB<br>(18%)</span>
+								<span class="state"><a href="">ERROR</a></span>
+								<span class="logs">Image customization failed.<br>Did not finish on time.</span>
 							</div>
 						</div>
 					</li>
-					<li  data-order="3" data-status="off">
+					<li data-status="running">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -854,9 +870,9 @@ Confirm that the options you have selected are correct</p>
 						</div>
 						<div class="container">
 							<div class="img-wrap">
-								<div class="img off">
-									<span class="snf-PC_fill"></span>
-									<span class="os fedora">fedora</span>
+								<div class="img running">
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
 								</div>
 							</div>
 							<p class="visible-info">
@@ -865,13 +881,12 @@ Confirm that the options you have selected are correct</p>
 								</span>
 							</p>
 							<div class="tags">
-								<a href="" class="tag1">&nbsp;</a>
-								<a href="" class="tag2">&nbsp;</a>
-								<a href="" class="tag3">&nbsp;</a>
+							</div>
+							<div class= "status">
 							</div>
 						</div>
 					</li>
-					<li  data-order="4" data-status="rebooting">
+					<li data-status="rebooting">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -913,7 +928,7 @@ Confirm that the options you have selected are correct</p>
 							</div>
 						</div>
 					</li>
-					 <li  data-order="5" data-status="starting">
+					<li data-status="starting">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -953,7 +968,7 @@ Confirm that the options you have selected are correct</p>
 							</div>
 						</div>
 					</li>
-					<li data-order="6" data-status="off">
+					<li  data-status="shutting">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -978,7 +993,7 @@ Confirm that the options you have selected are correct</p>
 							<div class="img-wrap">
 								<div class="img running">
 									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
-									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
+									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
 								</div>
 							</div>
 							<p class="visible-info">
@@ -986,13 +1001,16 @@ Confirm that the options you have selected are correct</p>
 									<a href="vm_details.html"><em>short name</em></a>
 								</span>
 							</p>
-							<div class="tags">
-							</div>
 							<div class= "status">
+								<span class="state"><a href="">SHUTTING DOWN</a></span>
+							</div>
+							<div class="tags">
+								<a href="" class="tag1">&nbsp;</a>
+								<a href="" class="tag2">&nbsp;</a>
 							</div>
 						</div>
 					</li>
-					<li data-order="7" data-status="error">
+					 <li data-status="running">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -1017,7 +1035,7 @@ Confirm that the options you have selected are correct</p>
 							<div class="img-wrap">
 								<div class="img running">
 									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
-									<span class="os" data-reveal-id="vm-connect">unknown</span>
+									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
 								</div>
 							</div>
 							<p class="visible-info">
@@ -1025,15 +1043,12 @@ Confirm that the options you have selected are correct</p>
 									<a href="vm_details.html"><em>short name</em></a>
 								</span>
 							</p>
-							<div class="tags">
-							</div>
 							<div class= "status">
-								<span class="state"><a href="">ERROR</a></span>
-								<span class="logs">Image customization failed.<br>Did not finish on time.</span>
+								<span class="state"><a href="">RUNNING</a></span>
 							</div>
 						</div>
 					</li>
-					<li  data-order="8" data-status="off">
+					<li data-status="off">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -1056,9 +1071,9 @@ Confirm that the options you have selected are correct</p>
 						</div>
 						<div class="container">
 							<div class="img-wrap">
-								<div class="img">
-									<span class="snf-PC_fill"></span>
-									<span class="os fedora">fedora</span>
+								<div class="img running">
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
 								</div>
 							</div>
 							<p class="visible-info">
@@ -1067,13 +1082,12 @@ Confirm that the options you have selected are correct</p>
 								</span>
 							</p>
 							<div class="tags">
-								<a href="" class="tag1">&nbsp;</a>
-								<a href="" class="tag2">&nbsp;</a>
-								<a href="" class="tag3">&nbsp;</a>
+							</div>
+							<div class= "status">
 							</div>
 						</div>
 					</li>
-					<li  data-order="9" data-status="shutting">
+					<li data-status="off">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -1092,30 +1106,28 @@ Confirm that the options you have selected are correct</p>
 									</ul>
 								</div>
 							</div>
-							<div class="vm-name">short name</div>
+							<div class="vm-name">vm name 1 really large name vm name vm 1 really large name vm</div>
 						</div>
 						<div class="container">
 							<div class="img-wrap">
-								<div class="img running">
-									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
-									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
+								<div class="img off">
+									<span class="snf-PC_fill"></span>
+									<span class="os fedora">fedora</span>
 								</div>
 							</div>
 							<p class="visible-info">
 								<span class="title">
-									<a href="vm_details.html"><em>short name</em></a>
+									<a href="vm_details.html"><em>vm name 1 really large name vm name vm 1 really large name vm</em></a>
 								</span>
 							</p>
-							<div class= "status">
-								<span class="state"><a href="">SHUTTING DOWN</a></span>
-							</div>
 							<div class="tags">
 								<a href="" class="tag1">&nbsp;</a>
 								<a href="" class="tag2">&nbsp;</a>
+								<a href="" class="tag3">&nbsp;</a>
 							</div>
 						</div>
 					</li>
-					 <li  data-order="10" data-status="running">
+					<li data-status="off">
 						<div class="more">
 							<div class="clearfix">
 								<div class="col lt">
@@ -1138,9 +1150,9 @@ Confirm that the options you have selected are correct</p>
 						</div>
 						<div class="container">
 							<div class="img-wrap">
-								<div class="img running">
-									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
-									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
+								<div class="img">
+									<span class="snf-PC_fill"></span>
+									<span class="os fedora">fedora</span>
 								</div>
 							</div>
 							<p class="visible-info">
@@ -1148,8 +1160,10 @@ Confirm that the options you have selected are correct</p>
 									<a href="vm_details.html"><em>short name</em></a>
 								</span>
 							</p>
-							<div class= "status">
-								<span class="state"><a href="">RUNNING</a></span>
+							<div class="tags">
+								<a href="" class="tag1">&nbsp;</a>
+								<a href="" class="tag2">&nbsp;</a>
+								<a href="" class="tag3">&nbsp;</a>
 							</div>
 						</div>
 					</li>
