Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.7 kB)

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