Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.8 kB)

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

    
3
.entities {
4
	padding-top:25px;
5
}
6

    
7

    
8
.items-list {
9
	li {
10
		text-align:center;
11
		padding:20px;
12
		list-style:none;
13
		.add-new {
14
			a {
15
				margin:0 20px;
16
				display: block;
17
				font-weight: bold;
18
				height:180px;
19
				padding:65px 30px 15px;
20
				border:1px dashed $primary-color;
21
				&:hover {
22
					border-color:$third-color;
23
				}
24
			}			
25
		}
26
		.img-wrap {
27
			height: 78px;
28
			margin: 0 60px;
29
		}
30
		.img {
31
			margin-bottom: 20px;
32
			position: relative;
33
			height:58px;
34
			display: inline-block;
35
		}
36
		.container {
37
			&.set-bg {	background:lighten($primary-color,38%); }
38
			&.set-border {	border-color:$secondary-color; }
39
			border:1px solid transparent;
40
			margin: 0 20px;
41
			padding:25px 0;
42
			position: relative;
43
		//	&:hover {
44
		//		@extend .set-border;
45
		//		.check {
46
		//			@extend .active;
47
		//		}
48
		//	}
49
		}
50
		.overlap_options {
51
			display: none;
52
			height:180px;
53
			background-color: $primary-color;
54
			margin: 0 20px;
55
			div {
56
				width: 50%;
57
				float: left;
58
				font-size: 14px;
59
				height: 70%;
60
				padding-left: 20px;
61
				ul {
62
					margin: 0;
63
					li {
64
						padding: 0;
65
						text-align: left;
66
						line-height: 1.7em;
67
						a {
68
							color: white;
69
						}
70
					}
71
				}
72
				&.main_actions_list {
73
					border-right: 1px solid white;
74
					ul {
75
						li:first-child {
76
							padding-top: 31px;
77
						}
78
						li:nth-child(2) {
79
							padding-top: 23px;
80
						}
81
						li {
82
							a {
83
								&:hover {
84
									background-color: white;
85
									padding: 8px 12px;
86
									color: $primary-color;
87
									position: relative;
88
									left: -12px;
89
									font-weight: bold;
90
								}
91
							}
92
						}
93
					}
94
				}
95
				&.actions_list {
96
					ul {
97
						padding: 8px 0;
98
						li {
99
							a {
100
								&:hover {
101
									position: relative;
102
									left: -9px;
103
									padding: 2px 9px;
104
									color: $primary-color;
105
									background-color: white;
106
									font-weight: bold;
107
								}
108
							}
109
						}
110
					}
111
				}
112
				&.vm-name {
113
					width: 100%;
114
					border-top: 1px solid white;
115
					font-size: 13px;
116
					height:30%;
117
					color: white;
118
					padding: 4px;
119
					line-height: 1.2em;
120
				}
121
			}
122
		}
123
		.check {
124
			position:absolute;
125
			right:10px;
126
			top:5px;
127

    
128
			color:lighten($primary-color,35%);
129
			font-weight: bold;
130
			font-size:emCalc(27px);
131
			cursor: pointer;
132
			z-index: 10;
133
			span { position:relative; z-index:10;}
134
			&.active {
135
				color:$secondary-color;
136
			}
137
		}
138
		.visible-info {
139
			margin: 0 25px;
140
			position:relative;
141
			color:$primary-color;
142
			overflow: hidden;
143
			span {
144
				&.title {
145
					white-space: nowrap;
146
				}
147
				display: block;
148
				position: relative;
149
				em {
150
					font-style:normal;
151
					position: relative;
152
				}
153
			}
154
		}
155
	}
156
	&.list-view {
157
		li {
158
			width:100%;
159
		}
160
	}
161
}
162

    
163
@media #{$entities-large} {
164
	.entities {
165
		.items-list {
166
			@include block-grid(4, 20px, true);
167
			&.list-view	{
168
				li {
169
					width:100%;
170
				}
171
			}
172
		}
173
	} 
174
}