Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _items-list.scss @ fd47d618

History | View | Annotate | Download (2.7 kB)

1
/* List view for VMs, networks  */
2

    
3
.items-list {
4
	@include block-grid(2, 0, true);
5
	padding-left:1px;
6
	@media #{$small} {
7
		@include block-grid(4, 0, true);
8
		padding-left:1px;
9
	};
10
	background:url(../images/dashed_atom.png) repeat-y left center;
11

    
12
	&>li {
13
		text-align:center;
14
		padding:20px;
15
		position: relative;
16
		list-style:none;
17
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
18
		height: 215px;
19
		.img-wrap {
20
			margin-bottom: 16px;
21
			position: relative;
22
			height:60px;
23
			display: inline-block;
24
			overflow: hidden;
25
		}
26
		.container {
27
			height:160px;
28
			margin: 16px 20px 20px;
29
			position: relative;
30
			line-height:120%;
31
			.tags {
32
				width: 100%;
33
				min-height: 12px;
34
				position: absolute;
35
				bottom: 6px;
36
			}
37
			.status {
38
				font-size: emCalc(12px);
39
				a {
40
					color: $secondary-color;
41
				}
42
				span {
43
					color: $secondary-color;
44
					display: block;
45
				}
46
			}
47
		}
48
		.more {
49
			$col-height: 200px;
50
			display: none;
51
			background: #fff;
52
			left:-10px;
53
			top: -10px;
54
			z-index:101;
55
			position: absolute;
56
			@include clearfix;
57
			@include box-shadow(-5px 5px 5px #ccc);
58
			.col {
59
				width: 50%;
60
				float: left;
61
				font-size: emCalc(14px);
62
				height: $col-height;
63
				ul {
64
					margin: 0;
65
					padding: 0;
66
					list-style: none outside none;
67
					li {
68
						padding: 0;
69
						text-align: left;
70
						a {
71
							color: $body-font-color;
72
							display: block;
73
							width:100%;
74
							padding: 5px 5px 5px 30px;
75
							&:hover {
76
								background-color: $secondary-color;
77
								color:  #fff;
78
							}
79
						}
80
					}
81
				}
82
				&.lt {
83
					ul {
84
						padding-top:10px;
85
					}
86
				}
87
				&.rt {
88
					ul {
89
						li {
90
							height: $col-height/2;
91
							a {
92
								height: 100%;
93
								padding:0 0 0 30px;
94
								line-height: $col-height/2;
95
							}
96
						}
97
					}
98
				}
99
			}
100
			.vm-name {
101
				background:url(../images/dashed_atom-x.png) repeat-x center top;
102
				padding: 10px;
103
				font-size: emCalc(10px);
104
			}
105
		}
106
		h4 {
107
			font-size: emCalc(12px);
108
			color:$body-font-color;
109
			overflow: hidden;
110
			margin-bottom: 4px;
111
			height: 30px;
112
			font-weight: normal;
113
		}
114
		&[data-status="add-new"] {
115
			background-color: $secondary-color;
116
			@include transition(background-color, 300ms, linear);
117
			.container {
118
				.img-wrap {
119
					span:first-child {
120
					color: white;
121
					}
122
					.symbol {
123
						background-image: none;
124
						color: $secondary-color;
125
						font-size: 30px;
126
						text-indent: 0;
127
					}
128
				}
129
				h4 {
130
					color: white;
131
				}
132
			}
133
			&:hover {
134
				background-color: $overlay-color;
135
				@include transition(background-color, 300ms, linear);
136
				cursor: pointer;
137
				.container {
138
					.img-wrap {
139
						.symbol {
140
							color: $overlay-color;
141
						}
142
					}
143
				}
144
			}
145
		}
146
	}
147
	&.list-view {
148
		li {
149
			width:100%;
150
		}
151
	}
152
}