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 |
} |