Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.8 kB)

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

    
3
.items-list {
4
	@include block-grid(2, 0, true);
5
	@media #{$small} {
6
		@include block-grid(4, 0, true);
7
	};
8
	background:url(../images/dashed_atom.png) repeat-y left center;
9
	&>li {
10
		text-align:center;
11
		padding:20px;
12
		list-style:none;
13
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
14
		min-height: 215px;
15
		.add-new {
16
			a {
17
				margin:0 20px;
18
				display: block;
19
				font-weight: bold;
20
				height: 100%;
21
				width:100%;
22
				&:hover {
23
					border-color:$third-color;
24
				}
25
			}			
26
		}
27
		.img-wrap {
28
			height: 78px;
29
			margin: 0 60px;
30
		}
31
		.img {
32
			margin-bottom: 20px;
33
			position: relative;
34
			height:58px;
35
			display: inline-block;
36
		}
37
		.container {
38
			&.set-bg {	background:lighten($primary-color,38%); }
39
			&.set-border {	border-color:$secondary-color; }
40
			border:1px solid transparent;
41
			margin: 0 20px;
42
			padding:25px 0;
43
			position: relative;
44
		}
45
		.more {
46
			$col-height: 200px;
47
			display: none;
48
			height:180px;
49
			background: #fff;
50
			margin: -30px;
51
			height: 100%;
52
			z-index:101;
53
			position: relative;
54
			@include clearfix;
55
			-moz-box-shadow: -5px 5px 5px #ccc;
56
			-webkit-box-shadow: -5px 5px 5px #ccc;
57
			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
							&:hover {
75
								background-color: $secondary-color;
76
								color:  #fff;
77
							}
78
						}
79
					}
80
				}
81
				&.lt {
82
					ul {
83
						padding-top:10px;
84
						li {
85
							a {
86
								padding: 5px 5px 5px 30px;
87
							}
88
						}
89
					}
90
				}
91
				&.rt {
92
					ul {
93
						li {
94
							height: $col-height/2;
95
							a {
96
								height: 100%;
97
								padding: 5px 5px 5px 30px;
98
								line-height: $col-height/2;
99
							}
100
						}
101
					}
102
				}
103
			}
104
			.vm-name {
105
				background:url(../images/dashed_atom-x.png) repeat-x center top;
106
				padding: 10px;
107
				font-size: emCalc(10px);
108
			}
109
		}
110
		.check {
111
			position:absolute;
112
			right:10px;
113
			top:5px;
114

    
115
			color:lighten($primary-color,35%);
116
			font-weight: bold;
117
			font-size:emCalc(27px);
118
			cursor: pointer;
119
			z-index: 10;
120
			span { position:relative; z-index:10;}
121
			&.active {
122
				color:$secondary-color;
123
			}
124
		}
125
		.visible-info {
126
			margin: 0 25px;
127
			position:relative;
128
			color:$primary-color;
129
			overflow: hidden;
130
			span {
131
				&.title {
132
					white-space: nowrap;
133
				}
134
				display: block;
135
				position: relative;
136
				em {
137
					font-style:normal;
138
					position: relative;
139
				}
140
			}
141
		}
142
	}
143
	&.list-view {
144
		li {
145
			width:100%;
146
		}
147
	}
148
}
149

    
150
@media #{$entities-large} {
151
	.entities {
152
		.items-list {
153
			&.list-view	{
154
				li {
155
					width:100%;
156
				}
157
			}
158
		}
159
	} 
160
}