Synnefo

/* List view for VMs, networks  */

.entities {

	position:relative;

}

.grid-view {

	.lt-bar {

		display: none;

	}

	.items-list {

		@include block-grid(2, 0, true);

		padding-left:1px;

		@media #{$small} {

			@include block-grid(4, 0, true);

			padding-left:1px;

		};

		background:url(../images/dashed_atom.png) repeat-y left center;

		&>li {

			height:215px;

			.check {

				display: none;

			}

			.info {

				display: none;

			}

			.img-wrap {

				margin-bottom: 16px;

				height:60px;

			}

			.container {

				height:160px;

				margin: 16px 20px 20px;

				position: relative;

				line-height:120%;

				.tags {

					width: 100%;

					min-height: 12px;

					position: absolute;

					bottom: 6px;

				}

			}

		}

	}

}

.items-list {

	&>li {

		text-align:center;

		padding:20px;

		position: relative;

		list-style:none;

		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;

		height: 215px;

		.img-wrap {

			position: relative;

			display: inline-block;

			overflow: hidden;

		}

		.status {

			font-size: emCalc(12px);

			a {

				color: $secondary-color;

			}

			span {

				color: $secondary-color;

				display: block;

			}

		}

		.more {

			$col-height: 200px;

			display: none;

			background: #fff;

			left:-10px;

			top: -10px;

			z-index:101;

			position: absolute;

			@include clearfix;

			@include box-shadow(0 0 10px #ccc);

			.col {

				width: 50%;

				float: left;

				font-size: emCalc(14px);

				height: $col-height;

				ul {

					margin: 0;

					padding: 0;

					list-style: none outside none;

					li {

						padding: 0;

						text-align: left;

						a {

							color: $body-font-color;

							display: block;

							width:100%;

							padding: 5px 5px 5px 30px;

							&:hover {

								//background-color: $secondary-color;

								color:  $secondary-color;

							}

						}

					}

				}

				&.lt {

					ul {

						padding-top:10px;

					}

				}

				&.rt {

					ul {

						li {

							height: $col-height/2;

							a {

								height: 100%;

								padding:0 0 0 30px;

								line-height: $col-height/2;

							}

						}

					}

				}

			}

			.name {

				background:url(../images/dashed_atom-x.png) repeat-x center top;

				padding: 10px;

				font-size: emCalc(10px);

			}

		}

		h4 {

			font-size: emCalc(12px);

			color:$body-font-color;

			overflow: hidden;

			margin-bottom: 4px;

			height: 30px;

			font-weight: normal;

		}

		&.add-new {

			background-color: $secondary-color;

			@include transition(background-color, 300ms, linear);

			.container {

				.img-wrap {

					span:first-child {

					color: white;

					}

					.symbol {

						background-image: none;

						color: $secondary-color;

						font-size: 30px;

						text-indent: 0;

					}

				}

				h4 {

					color: white;

				}

			}

			&:hover {

				background-color: $overlay-color;

				@include transition(background-color, 300ms, linear);

				cursor: pointer;

				.container {

					.img-wrap {

						.symbol {

							color: $overlay-color;

						}

					}

				}

			}

		}

	}

}

.list-view {

	.btn5 {

		display: none;

	}

	.lt-bar {

		position: fixed;

		width: $lt-bar-width;

		left:50%;

		top:$header-height + $bar-height;

		padding:8px 10px;

		margin-left:-($row-width - 2*$main-padding-horizontal)/2;

		@include box-shadow(3px -2px 8px #ccc);

		background:#fff;

		a {

			color:$overlay-color;

			&:hover{

				color:$secondary-color;

			}

		}

		ul {

			list-style: none outside none;

			font-size:emCalc(12px);

			li  {

				list-style: none outside none;

				padding:12px 0 ;

				&.select {

					span {

						font-size: 16px;

						margin-right: 5px;

						position: relative;

						top: 2px;

						&.snf-checkbox-checked {

							color:$secondary-color;

						}

					}

					em {

						display: none;

						font-style: normal;

					}

					&:hover {

						cursor: pointer;

					}

				}

			}

		}

	}

	.items-list {

		$check-w : 60px;

		$img-wrap-w : 70px;

		$h4-w :40%;

		$tags-w :8%;

		$info-w: 30%;

		overflow:hidden;

		& >li {

			@extend .clearfix;

			height:auto;

			width:100%;

			padding:15px 15px 15px $lt-bar-width;

			background-image: none;

			&:hover{

				background-color:lighten($primary-color,30%);

			}

			.check {

				width:$check-w;

				text-align: center;

				float:left;

				&:hover {

					cursor: pointer;

					color:$secondary-color;

				}

			}

			.img-wrap {

				width:$img-wrap-w;

				float:left;

				text-align: center;

				height: $list-vm-height;

				.os {

					@include sprite('../images/os-unknown.png', 16px, 16px);

					background-size:100%;

					position: absolute;

					display: block;

					text-align: center;

					line-height:18px;

					left:50%;

					margin-left:-8px;

					top:3px;

				}

				.snf-PC_fill {

					font-size: $list-vm-height;

				}

			}

			h4 {

				width:$h4-w

				;

				float:left;

				text-align: left;

				height:20px;

			}

			.tags {

				float:left;

				width:$tags-w;

				min-height: 1px;

				height:$list-vm-height;

				line-height: $list-vm-height;

				a {

					vertical-align: text-top;

				}

			}

			.status {

				position: absolute;

				left: $img-wrap-w+$check-w + $lt-bar-width;

				text-align: left;

				top:30px;

				width:$h4-w;

				span {

					display: inline;

				}

			}

			.info {

				float: left;

				width: $info-w;

				font-size: emCalc(12px);

				color:$overlay-color;

				a {

					color: $overlay-color;

					&:hover {

						color:$secondary-color;

					}

				}

			}

			&.add-new {

				height: $bar-height;

				line-height: $bar-height;

				padding:0 0 0 $lt-bar-width;

				&:hover {

					background: $overlay-color;

				}

				.check {

					visibility: hidden;

				}

				.img-wrap {

					margin: 0;

					height:$bar-height;

					line-height: $bar-height;

					.symbol {

						font-size:emCalc(16px);

						position: absolute;

						left:0;

						top:-3px;

						width: 100%;

						height: 100%;

						margin: 0 auto;

					}

					span {

						font-size:20px;

						line-height: 30px;

					}

				}

				h4 {

					height:auto;

					line-height: $bar-height;

					margin:0;

				}

			}

			&[data-status="building"] {

				.img-wrap {

					.incomplete {

						width:$list-vm-height;

						margin:0 auto;

					}

					.complete {

						top:-$list-vm-height;

						margin:0 auto;

					}

				}

			}

		}

	}

}