root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _items-list.scss @ 77d5883f
History | View | Annotate | Download (6.2 kB)
1 | 15948f00 | Olga Brani | /* List view for VMs, networks */ |
---|---|---|---|
2 | 656c135b | Olga Brani | .entities { |
3 | 656c135b | Olga Brani | position:relative; |
4 | 656c135b | Olga Brani | } |
5 | 15948f00 | Olga Brani | |
6 | 656c135b | Olga Brani | .grid-view { |
7 | 656c135b | Olga Brani | .lt-bar { |
8 | 656c135b | Olga Brani | display: none; |
9 | 656c135b | Olga Brani | } |
10 | 656c135b | Olga Brani | .items-list { |
11 | 656c135b | Olga Brani | @include block-grid(2, 0, true); |
12 | 17ce081a | Olga Brani | padding-left:1px; |
13 | 656c135b | Olga Brani | @media #{$small} { |
14 | 656c135b | Olga Brani | @include block-grid(4, 0, true); |
15 | 656c135b | Olga Brani | padding-left:1px; |
16 | 656c135b | Olga Brani | }; |
17 | 656c135b | Olga Brani | background:url(../images/dashed_atom.png) repeat-y left center; |
18 | 17ce081a | Olga Brani | |
19 | 656c135b | Olga Brani | &>li { |
20 | 656c135b | Olga Brani | height:215px; |
21 | 656c135b | Olga Brani | .check { |
22 | 656c135b | Olga Brani | display: none; |
23 | 656c135b | Olga Brani | } |
24 | 656c135b | Olga Brani | .info { |
25 | 656c135b | Olga Brani | display: none; |
26 | 656c135b | Olga Brani | } |
27 | 656c135b | Olga Brani | .img-wrap { |
28 | 77d5883f | Olga Brani | margin-bottom: 6px; |
29 | 656c135b | Olga Brani | height:60px; |
30 | 656c135b | Olga Brani | } |
31 | 656c135b | Olga Brani | .container { |
32 | 656c135b | Olga Brani | height:160px; |
33 | 77d5883f | Olga Brani | margin: 40px 20px 20px; |
34 | 656c135b | Olga Brani | position: relative; |
35 | 656c135b | Olga Brani | line-height:120%; |
36 | 656c135b | Olga Brani | .tags { |
37 | 656c135b | Olga Brani | width: 100%; |
38 | 656c135b | Olga Brani | min-height: 12px; |
39 | 656c135b | Olga Brani | position: absolute; |
40 | 77d5883f | Olga Brani | bottom: 12px; |
41 | 656c135b | Olga Brani | } |
42 | 656c135b | Olga Brani | } |
43 | 656c135b | Olga Brani | } |
44 | 656c135b | Olga Brani | } |
45 | 656c135b | Olga Brani | } |
46 | 656c135b | Olga Brani | .items-list { |
47 | 3fdc0d03 | Olga Brani | &>li { |
48 | 673ea014 | Olga Brani | text-align:center; |
49 | 673ea014 | Olga Brani | padding:20px; |
50 | dafb5cab | Athina Bekakou | position: relative; |
51 | 673ea014 | Olga Brani | list-style:none; |
52 | 7f44f777 | Olga Brani | background:url(../images/dashed-bg-corner.png) no-repeat right bottom; |
53 | dafb5cab | Athina Bekakou | height: 215px; |
54 | cdef560c | Athina Bekakou | .img-wrap { |
55 | 673ea014 | Olga Brani | position: relative; |
56 | 692c5cea | Olga Brani | display: inline-block; |
57 | d5de15a8 | Olga Brani | overflow: hidden; |
58 | 673ea014 | Olga Brani | } |
59 | 656c135b | Olga Brani | .status { |
60 | 656c135b | Olga Brani | font-size: emCalc(12px); |
61 | 77d5883f | Olga Brani | line-height:140%; |
62 | 656c135b | Olga Brani | a { |
63 | 656c135b | Olga Brani | color: $secondary-color; |
64 | dafb5cab | Athina Bekakou | } |
65 | 656c135b | Olga Brani | span { |
66 | 656c135b | Olga Brani | color: $secondary-color; |
67 | 656c135b | Olga Brani | display: block; |
68 | dafb5cab | Athina Bekakou | } |
69 | 673ea014 | Olga Brani | } |
70 | 3fdc0d03 | Olga Brani | .more { |
71 | 3fdc0d03 | Olga Brani | $col-height: 200px; |
72 | fdd03619 | Athina Bekakou | display: none; |
73 | 3fdc0d03 | Olga Brani | background: #fff; |
74 | 31d7e532 | Olga Brani | left:-10px; |
75 | 31d7e532 | Olga Brani | top: -10px; |
76 | 3fdc0d03 | Olga Brani | z-index:101; |
77 | 31d7e532 | Olga Brani | position: absolute; |
78 | 3fdc0d03 | Olga Brani | @include clearfix; |
79 | 656c135b | Olga Brani | @include box-shadow(0 0 10px #ccc); |
80 | 3fdc0d03 | Olga Brani | .col { |
81 | fdd03619 | Athina Bekakou | width: 50%; |
82 | fdd03619 | Athina Bekakou | float: left; |
83 | 3fdc0d03 | Olga Brani | font-size: emCalc(14px); |
84 | 3fdc0d03 | Olga Brani | height: $col-height; |
85 | fdd03619 | Athina Bekakou | ul { |
86 | fdd03619 | Athina Bekakou | margin: 0; |
87 | 3fdc0d03 | Olga Brani | padding: 0; |
88 | 3fdc0d03 | Olga Brani | list-style: none outside none; |
89 | fdd03619 | Athina Bekakou | li { |
90 | fdd03619 | Athina Bekakou | padding: 0; |
91 | fdd03619 | Athina Bekakou | text-align: left; |
92 | fdd03619 | Athina Bekakou | a { |
93 | 3fdc0d03 | Olga Brani | color: $body-font-color; |
94 | 3fdc0d03 | Olga Brani | display: block; |
95 | 3fdc0d03 | Olga Brani | width:100%; |
96 | 31d7e532 | Olga Brani | padding: 5px 5px 5px 30px; |
97 | 3fdc0d03 | Olga Brani | &:hover { |
98 | 656c135b | Olga Brani | //background-color: $secondary-color; |
99 | 656c135b | Olga Brani | color: $secondary-color; |
100 | 3fdc0d03 | Olga Brani | } |
101 | fdd03619 | Athina Bekakou | } |
102 | 05205849 | Athina Bekakou | } |
103 | 05205849 | Athina Bekakou | } |
104 | 3fdc0d03 | Olga Brani | &.lt { |
105 | fdd03619 | Athina Bekakou | ul { |
106 | 3fdc0d03 | Olga Brani | padding-top:10px; |
107 | fdd03619 | Athina Bekakou | } |
108 | fdd03619 | Athina Bekakou | } |
109 | 3fdc0d03 | Olga Brani | &.rt { |
110 | fdd03619 | Athina Bekakou | ul { |
111 | fdd03619 | Athina Bekakou | li { |
112 | 3fdc0d03 | Olga Brani | height: $col-height/2; |
113 | fdd03619 | Athina Bekakou | a { |
114 | 3fdc0d03 | Olga Brani | height: 100%; |
115 | 31d7e532 | Olga Brani | padding:0 0 0 30px; |
116 | 3fdc0d03 | Olga Brani | line-height: $col-height/2; |
117 | fdd03619 | Athina Bekakou | } |
118 | fdd03619 | Athina Bekakou | } |
119 | fdd03619 | Athina Bekakou | } |
120 | fdd03619 | Athina Bekakou | } |
121 | 3fdc0d03 | Olga Brani | } |
122 | 05e735ec | Athina Bekakou | .name { |
123 | 3fdc0d03 | Olga Brani | background:url(../images/dashed_atom-x.png) repeat-x center top; |
124 | 3fdc0d03 | Olga Brani | padding: 10px; |
125 | 3fdc0d03 | Olga Brani | font-size: emCalc(10px); |
126 | 05205849 | Athina Bekakou | } |
127 | 05205849 | Athina Bekakou | } |
128 | 31d7e532 | Olga Brani | h4 { |
129 | 31d7e532 | Olga Brani | font-size: emCalc(12px); |
130 | 62b8cb49 | Olga Brani | color:$body-font-color; |
131 | 673ea014 | Olga Brani | overflow: hidden; |
132 | dafb5cab | Athina Bekakou | margin-bottom: 4px; |
133 | 77d5883f | Olga Brani | height: 32px; |
134 | 31d7e532 | Olga Brani | font-weight: normal; |
135 | 673ea014 | Olga Brani | } |
136 | 656c135b | Olga Brani | &.add-new { |
137 | b4c26e76 | Athina Bekakou | background-color: $secondary-color; |
138 | 31d7e532 | Olga Brani | @include transition(background-color, 300ms, linear); |
139 | b4c26e76 | Athina Bekakou | .container { |
140 | fd47d618 | Olga Brani | .img-wrap { |
141 | fd47d618 | Olga Brani | span:first-child { |
142 | fd47d618 | Olga Brani | color: white; |
143 | fd47d618 | Olga Brani | } |
144 | fd47d618 | Olga Brani | .symbol { |
145 | fd47d618 | Olga Brani | background-image: none; |
146 | fd47d618 | Olga Brani | color: $secondary-color; |
147 | fd47d618 | Olga Brani | font-size: 30px; |
148 | fd47d618 | Olga Brani | text-indent: 0; |
149 | fd47d618 | Olga Brani | } |
150 | b4c26e76 | Athina Bekakou | } |
151 | 7e56ee5b | Athina Bekakou | h4 { |
152 | b4c26e76 | Athina Bekakou | color: white; |
153 | b4c26e76 | Athina Bekakou | } |
154 | b4c26e76 | Athina Bekakou | } |
155 | b4c26e76 | Athina Bekakou | &:hover { |
156 | fd47d618 | Olga Brani | background-color: $overlay-color; |
157 | 31d7e532 | Olga Brani | @include transition(background-color, 300ms, linear); |
158 | fd47d618 | Olga Brani | cursor: pointer; |
159 | 31d7e532 | Olga Brani | .container { |
160 | fd47d618 | Olga Brani | .img-wrap { |
161 | fd47d618 | Olga Brani | .symbol { |
162 | fd47d618 | Olga Brani | color: $overlay-color; |
163 | b4c26e76 | Athina Bekakou | } |
164 | 31d7e532 | Olga Brani | } |
165 | b4c26e76 | Athina Bekakou | } |
166 | b4c26e76 | Athina Bekakou | } |
167 | b4c26e76 | Athina Bekakou | } |
168 | 026edcbc | Olga Brani | } |
169 | 656c135b | Olga Brani | } |
170 | 656c135b | Olga Brani | |
171 | 656c135b | Olga Brani | .list-view { |
172 | 656c135b | Olga Brani | .btn5 { |
173 | 656c135b | Olga Brani | display: none; |
174 | 656c135b | Olga Brani | } |
175 | 656c135b | Olga Brani | .lt-bar { |
176 | 656c135b | Olga Brani | position: fixed; |
177 | 656c135b | Olga Brani | width: $lt-bar-width; |
178 | 656c135b | Olga Brani | left:50%; |
179 | 656c135b | Olga Brani | top:$header-height + $bar-height; |
180 | 656c135b | Olga Brani | padding:8px 10px; |
181 | 656c135b | Olga Brani | margin-left:-($row-width - 2*$main-padding-horizontal)/2; |
182 | 656c135b | Olga Brani | @include box-shadow(3px -2px 8px #ccc); |
183 | 656c135b | Olga Brani | background:#fff; |
184 | 656c135b | Olga Brani | a { |
185 | 656c135b | Olga Brani | color:$overlay-color; |
186 | 656c135b | Olga Brani | &:hover{ |
187 | 656c135b | Olga Brani | color:$secondary-color; |
188 | 656c135b | Olga Brani | } |
189 | 656c135b | Olga Brani | } |
190 | 656c135b | Olga Brani | ul { |
191 | 656c135b | Olga Brani | list-style: none outside none; |
192 | 656c135b | Olga Brani | font-size:emCalc(12px); |
193 | 656c135b | Olga Brani | li { |
194 | 656c135b | Olga Brani | list-style: none outside none; |
195 | 656c135b | Olga Brani | padding:12px 0 ; |
196 | 656c135b | Olga Brani | &.select { |
197 | 656c135b | Olga Brani | span { |
198 | 656c135b | Olga Brani | font-size: 16px; |
199 | 656c135b | Olga Brani | margin-right: 5px; |
200 | 656c135b | Olga Brani | position: relative; |
201 | 656c135b | Olga Brani | top: 2px; |
202 | 656c135b | Olga Brani | &.snf-checkbox-checked { |
203 | 656c135b | Olga Brani | color:$secondary-color; |
204 | 656c135b | Olga Brani | } |
205 | 656c135b | Olga Brani | } |
206 | 656c135b | Olga Brani | em { |
207 | 656c135b | Olga Brani | display: none; |
208 | 656c135b | Olga Brani | font-style: normal; |
209 | 656c135b | Olga Brani | } |
210 | 656c135b | Olga Brani | &:hover { |
211 | 656c135b | Olga Brani | cursor: pointer; |
212 | 656c135b | Olga Brani | } |
213 | 656c135b | Olga Brani | } |
214 | 656c135b | Olga Brani | } |
215 | 656c135b | Olga Brani | } |
216 | 656c135b | Olga Brani | } |
217 | 656c135b | Olga Brani | .items-list { |
218 | 656c135b | Olga Brani | $check-w : 60px; |
219 | 656c135b | Olga Brani | $img-wrap-w : 70px; |
220 | 656c135b | Olga Brani | $h4-w :40%; |
221 | 656c135b | Olga Brani | $tags-w :8%; |
222 | 656c135b | Olga Brani | $info-w: 30%; |
223 | 656c135b | Olga Brani | overflow:hidden; |
224 | 656c135b | Olga Brani | & >li { |
225 | 656c135b | Olga Brani | @extend .clearfix; |
226 | 656c135b | Olga Brani | height:auto; |
227 | 026edcbc | Olga Brani | width:100%; |
228 | 656c135b | Olga Brani | padding:15px 15px 15px $lt-bar-width; |
229 | 656c135b | Olga Brani | background-image: none; |
230 | 656c135b | Olga Brani | &:hover{ |
231 | 656c135b | Olga Brani | background-color:lighten($primary-color,30%); |
232 | 656c135b | Olga Brani | } |
233 | 656c135b | Olga Brani | .check { |
234 | 656c135b | Olga Brani | width:$check-w; |
235 | 77d5883f | Olga Brani | height: $list-vm-height; |
236 | 77d5883f | Olga Brani | line-height: $list-vm-height; |
237 | 656c135b | Olga Brani | text-align: center; |
238 | 656c135b | Olga Brani | float:left; |
239 | 656c135b | Olga Brani | &:hover { |
240 | 656c135b | Olga Brani | cursor: pointer; |
241 | 656c135b | Olga Brani | color:$secondary-color; |
242 | 656c135b | Olga Brani | } |
243 | 656c135b | Olga Brani | } |
244 | 656c135b | Olga Brani | .img-wrap { |
245 | 656c135b | Olga Brani | width:$img-wrap-w; |
246 | 656c135b | Olga Brani | float:left; |
247 | 656c135b | Olga Brani | text-align: center; |
248 | 656c135b | Olga Brani | height: $list-vm-height; |
249 | 656c135b | Olga Brani | .os { |
250 | 656c135b | Olga Brani | @include sprite('../images/os-unknown.png', 16px, 16px); |
251 | 656c135b | Olga Brani | background-size:100%; |
252 | 656c135b | Olga Brani | position: absolute; |
253 | 656c135b | Olga Brani | display: block; |
254 | 656c135b | Olga Brani | text-align: center; |
255 | 656c135b | Olga Brani | line-height:18px; |
256 | 656c135b | Olga Brani | left:50%; |
257 | 656c135b | Olga Brani | margin-left:-8px; |
258 | 656c135b | Olga Brani | top:3px; |
259 | 656c135b | Olga Brani | } |
260 | 656c135b | Olga Brani | .snf-PC_fill { |
261 | 656c135b | Olga Brani | font-size: $list-vm-height; |
262 | 656c135b | Olga Brani | } |
263 | 656c135b | Olga Brani | } |
264 | 656c135b | Olga Brani | h4 { |
265 | 656c135b | Olga Brani | width:$h4-w |
266 | 656c135b | Olga Brani | ; |
267 | 656c135b | Olga Brani | float:left; |
268 | 656c135b | Olga Brani | text-align: left; |
269 | 656c135b | Olga Brani | height:20px; |
270 | 656c135b | Olga Brani | } |
271 | 656c135b | Olga Brani | .tags { |
272 | 656c135b | Olga Brani | float:left; |
273 | 656c135b | Olga Brani | width:$tags-w; |
274 | 656c135b | Olga Brani | min-height: 1px; |
275 | 656c135b | Olga Brani | height:$list-vm-height; |
276 | 656c135b | Olga Brani | line-height: $list-vm-height; |
277 | 656c135b | Olga Brani | a { |
278 | 656c135b | Olga Brani | vertical-align: text-top; |
279 | 656c135b | Olga Brani | } |
280 | 656c135b | Olga Brani | } |
281 | 656c135b | Olga Brani | .status { |
282 | 656c135b | Olga Brani | position: absolute; |
283 | 656c135b | Olga Brani | left: $img-wrap-w+$check-w + $lt-bar-width; |
284 | 656c135b | Olga Brani | text-align: left; |
285 | 656c135b | Olga Brani | top:30px; |
286 | 656c135b | Olga Brani | width:$h4-w; |
287 | 656c135b | Olga Brani | span { |
288 | 656c135b | Olga Brani | display: inline; |
289 | 656c135b | Olga Brani | } |
290 | 656c135b | Olga Brani | } |
291 | 656c135b | Olga Brani | .info { |
292 | 656c135b | Olga Brani | float: left; |
293 | 656c135b | Olga Brani | width: $info-w; |
294 | 656c135b | Olga Brani | font-size: emCalc(12px); |
295 | 656c135b | Olga Brani | color:$overlay-color; |
296 | 656c135b | Olga Brani | a { |
297 | 656c135b | Olga Brani | color: $overlay-color; |
298 | 656c135b | Olga Brani | &:hover { |
299 | 656c135b | Olga Brani | color:$secondary-color; |
300 | 656c135b | Olga Brani | } |
301 | 656c135b | Olga Brani | } |
302 | 656c135b | Olga Brani | } |
303 | 656c135b | Olga Brani | &.add-new { |
304 | 656c135b | Olga Brani | height: $bar-height; |
305 | 656c135b | Olga Brani | line-height: $bar-height; |
306 | 656c135b | Olga Brani | padding:0 0 0 $lt-bar-width; |
307 | 656c135b | Olga Brani | &:hover { |
308 | 656c135b | Olga Brani | background: $overlay-color; |
309 | 656c135b | Olga Brani | } |
310 | 656c135b | Olga Brani | .check { |
311 | 656c135b | Olga Brani | visibility: hidden; |
312 | 656c135b | Olga Brani | } |
313 | 656c135b | Olga Brani | .img-wrap { |
314 | 656c135b | Olga Brani | margin: 0; |
315 | 656c135b | Olga Brani | height:$bar-height; |
316 | 656c135b | Olga Brani | line-height: $bar-height; |
317 | 656c135b | Olga Brani | .symbol { |
318 | 656c135b | Olga Brani | font-size:emCalc(16px); |
319 | 656c135b | Olga Brani | position: absolute; |
320 | 656c135b | Olga Brani | left:0; |
321 | 656c135b | Olga Brani | top:-3px; |
322 | 656c135b | Olga Brani | width: 100%; |
323 | 656c135b | Olga Brani | height: 100%; |
324 | 656c135b | Olga Brani | margin: 0 auto; |
325 | 656c135b | Olga Brani | } |
326 | 656c135b | Olga Brani | span { |
327 | 656c135b | Olga Brani | font-size:20px; |
328 | 656c135b | Olga Brani | line-height: 30px; |
329 | 656c135b | Olga Brani | } |
330 | 656c135b | Olga Brani | } |
331 | 656c135b | Olga Brani | h4 { |
332 | 656c135b | Olga Brani | height:auto; |
333 | 656c135b | Olga Brani | line-height: $bar-height; |
334 | 656c135b | Olga Brani | margin:0; |
335 | 656c135b | Olga Brani | } |
336 | 656c135b | Olga Brani | } |
337 | 656c135b | Olga Brani | &[data-status="building"] { |
338 | 656c135b | Olga Brani | .img-wrap { |
339 | 656c135b | Olga Brani | .incomplete { |
340 | 656c135b | Olga Brani | width:$list-vm-height; |
341 | 656c135b | Olga Brani | margin:0 auto; |
342 | 656c135b | Olga Brani | } |
343 | 656c135b | Olga Brani | .complete { |
344 | 656c135b | Olga Brani | top:-$list-vm-height; |
345 | 656c135b | Olga Brani | margin:0 auto; |
346 | 656c135b | Olga Brani | } |
347 | 656c135b | Olga Brani | } |
348 | 656c135b | Olga Brani | } |
349 | 026edcbc | Olga Brani | } |
350 | 673ea014 | Olga Brani | } |
351 | 673ea014 | Olga Brani | } |
352 | 77d5883f | Olga Brani | |
353 | 77d5883f | Olga Brani | #temp { |
354 | 77d5883f | Olga Brani | background:url(../images/temp.png) no-repeat left top; |
355 | 77d5883f | Olga Brani | } |