Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _storage.scss @ 3dc222e5

History | View | Annotate | Download (4.9 kB)

1 15948f00 Olga Brani
/* Storage (pithos) related styles  */
2 15948f00 Olga Brani
3 c9d873e8 Olga Brani
.storage {
4 aafda5ef Athina Bekakou
	height: 100%;
5 9b0b486b Olga Brani
	.rect-plus {
6 9b0b486b Olga Brani
		display: inline-block;
7 9b0b486b Olga Brani
		background-color: #fff;
8 9b0b486b Olga Brani
		color: $link-color-hover;
9 9b0b486b Olga Brani
		padding: 0 6px;
10 9b0b486b Olga Brani
		font-size: emCalc(26px);
11 9b0b486b Olga Brani
		&:hover {
12 9b0b486b Olga Brani
			color: $link-color;
13 c9d873e8 Olga Brani
		}
14 9b0b486b Olga Brani
	}
15 0ef95fe4 Olga Brani
	.items-list {
16 0ef95fe4 Olga Brani
		height: 100%;
17 0ef95fe4 Olga Brani
		&>li {
18 0ef95fe4 Olga Brani
			.img-wrap {
19 0ef95fe4 Olga Brani
				top: 0;
20 9b0b486b Olga Brani
				height: $list-icon-height;
21 9b0b486b Olga Brani
				line-height: $list-icon-height;
22 c9d873e8 Olga Brani
			}
23 0b14cfb4 Olga Brani
			h4 {
24 0b14cfb4 Olga Brani
				width: $storage-h4-w;
25 0b14cfb4 Olga Brani
			}
26 c9d873e8 Olga Brani
		}
27 c4728006 Olga Brani
		.folder {
28 c4728006 Olga Brani
			.img-wrap {
29 c4728006 Olga Brani
				background: url(../images/folder-closed.png) no-repeat center center;
30 c4728006 Olga Brani
			}
31 c4728006 Olga Brani
			&.draghover {
32 c4728006 Olga Brani
				.img-wrap {
33 c4728006 Olga Brani
					background-image: url(../images/folder-open.png);
34 c4728006 Olga Brani
				}
35 c4728006 Olga Brani
			}
36 3fd0db82 Athina Bekakou
			&.updating {
37 3fd0db82 Athina Bekakou
				.img-wrap {
38 3fd0db82 Athina Bekakou
					background-image: url(../images/folder-updating.png);
39 3fd0db82 Athina Bekakou
				}
40 3fd0db82 Athina Bekakou
			}
41 3fd0db82 Athina Bekakou
			&.updated {
42 3fd0db82 Athina Bekakou
				.img-wrap {
43 3fd0db82 Athina Bekakou
					background-image: url(../images/folder-updated.png);
44 3fd0db82 Athina Bekakou
				}
45 3fd0db82 Athina Bekakou
			}
46 c4728006 Olga Brani
		}
47 0ef95fe4 Olga Brani
		li:hover {
48 0ef95fe4 Olga Brani
			.actions-col {
49 0ef95fe4 Olga Brani
				visibility: visible;
50 c9d873e8 Olga Brani
			}
51 0ef95fe4 Olga Brani
		}
52 0ef95fe4 Olga Brani
		.add-new {
53 0ef95fe4 Olga Brani
			position: relative;
54 0ef95fe4 Olga Brani
			input[type="file"] {
55 0ef95fe4 Olga Brani
				position: absolute;
56 0ef95fe4 Olga Brani
				left:$lt-bar-width;
57 0ef95fe4 Olga Brani
				top:0;
58 0ef95fe4 Olga Brani
				right: 0;
59 0ef95fe4 Olga Brani
				bottom: 0;
60 0ef95fe4 Olga Brani
				opacity: 0;
61 c9d873e8 Olga Brani
			}
62 292a32ef Olga Brani
			h4 {
63 292a32ef Olga Brani
				color: #fff;
64 292a32ef Olga Brani
			}
65 292a32ef Olga Brani
			&:hover {
66 292a32ef Olga Brani
				.rect-plus	{
67 292a32ef Olga Brani
					color: $link-color;
68 292a32ef Olga Brani
				}
69 292a32ef Olga Brani
			}
70 292a32ef Olga Brani
		}
71 292a32ef Olga Brani
		&.drag {
72 292a32ef Olga Brani
			background-color: $light-bg;
73 c9d873e8 Olga Brani
		}
74 c9d873e8 Olga Brani
	}
75 bfdaac22 Athina Bekakou
}
76 bfdaac22 Athina Bekakou
.containers {
77 bfdaac22 Athina Bekakou
	.items-list {
78 bfdaac22 Athina Bekakou
		overflow: visible;
79 bfdaac22 Athina Bekakou
		&>li {
80 bfdaac22 Athina Bekakou
			text-align: left;
81 97cd255d Olga Brani
			padding-right: 50px;
82 97cd255d Olga Brani
			padding-left: 50px;
83 bfdaac22 Athina Bekakou
			.col {
84 bfdaac22 Athina Bekakou
				float: left;
85 bfdaac22 Athina Bekakou
			}
86 bfdaac22 Athina Bekakou
			h4 {
87 bfdaac22 Athina Bekakou
				font-size: emCalc(14px);
88 bfdaac22 Athina Bekakou
				width: auto;
89 bfdaac22 Athina Bekakou
			}
90 bfdaac22 Athina Bekakou
			.basic-data {
91 97cd255d Olga Brani
				width: 180px;
92 97cd255d Olga Brani
				padding-right: 20px;
93 97cd255d Olga Brani
				.img-wrap {
94 97cd255d Olga Brani
					a {
95 97cd255d Olga Brani
						display: block;
96 97cd255d Olga Brani
					}
97 97cd255d Olga Brani
				}
98 97cd255d Olga Brani
				&:hover {
99 97cd255d Olga Brani
					a {
100 97cd255d Olga Brani
						color: $link-color-hover;
101 97cd255d Olga Brani
					}
102 97cd255d Olga Brani
				}
103 bfdaac22 Athina Bekakou
			}
104 bfdaac22 Athina Bekakou
			.size-data{
105 97cd255d Olga Brani
				width: 360px;
106 97cd255d Olga Brani
				padding-right: 20px;
107 bfdaac22 Athina Bekakou
				.progress-col {
108 97cd255d Olga Brani
					width: $progress-col-w;
109 bfdaac22 Athina Bekakou
					padding-top: 7px;
110 bfdaac22 Athina Bekakou
					.progress {
111 bfdaac22 Athina Bekakou
						border-color: $gray-2;
112 bfdaac22 Athina Bekakou
						height: 20px;
113 bfdaac22 Athina Bekakou
						.meter {
114 bfdaac22 Athina Bekakou
							text-align: right;
115 bfdaac22 Athina Bekakou
							font-size: 10px;
116 bfdaac22 Athina Bekakou
							padding: 2px;
117 bfdaac22 Athina Bekakou
							background-color: $gray-2;
118 bfdaac22 Athina Bekakou
							color: white;
119 bfdaac22 Athina Bekakou
							font-size: emCalc(14px);
120 bfdaac22 Athina Bekakou
							line-height: 100%;
121 3a0726aa Athina Bekakou
						}
122 3a0726aa Athina Bekakou
					}
123 3a0726aa Athina Bekakou
				}
124 bfdaac22 Athina Bekakou
				.size {
125 bfdaac22 Athina Bekakou
					width: auto;
126 fad1549a Olga Brani
					font-size: emCalc(14px);
127 fad1549a Olga Brani
				}
128 bfdaac22 Athina Bekakou
			}
129 bfdaac22 Athina Bekakou
			h5 {
130 bfdaac22 Athina Bekakou
				float: left;
131 97cd255d Olga Brani
				width: 220px;
132 bfdaac22 Athina Bekakou
				font-size: emCalc(14px);
133 bfdaac22 Athina Bekakou
				font-weight: normal;
134 bfdaac22 Athina Bekakou
				line-height: $list-icon-height;
135 bfdaac22 Athina Bekakou
				height: $list-icon-height;
136 bfdaac22 Athina Bekakou
				margin: 0;
137 97cd255d Olga Brani
				margin:0 20px 0 0 ;
138 4f3fc1ed Olga Brani
				overflow: hidden;
139 4f3fc1ed Olga Brani
				white-space: nowrap;
140 bfdaac22 Athina Bekakou
			}
141 bfdaac22 Athina Bekakou
			.project {
142 bfdaac22 Athina Bekakou
				line-height: $list-icon-height;
143 bfdaac22 Athina Bekakou
				height: $list-icon-height;
144 97cd255d Olga Brani
				width: 100px;
145 bfdaac22 Athina Bekakou
				font-size: emCalc(14px);
146 bfdaac22 Athina Bekakou
				position: relative;
147 bfdaac22 Athina Bekakou
				right: 0;
148 bfdaac22 Athina Bekakou
				ul {
149 bfdaac22 Athina Bekakou
					position: absolute;
150 fad1549a Olga Brani
					right: 0;
151 bfdaac22 Athina Bekakou
					top: $list-icon-height + 2px;
152 bfdaac22 Athina Bekakou
					list-style: none outside none;
153 bfdaac22 Athina Bekakou
					border: 1px solid $gray-2;
154 bfdaac22 Athina Bekakou
					padding: 5px 15px;
155 bfdaac22 Athina Bekakou
					display: none;
156 bfdaac22 Athina Bekakou
					z-index: 1;
157 bfdaac22 Athina Bekakou
					background: #fff;
158 97cd255d Olga Brani
					min-width: 100px + 240px;
159 bfdaac22 Athina Bekakou
					li {
160 4f3fc1ed Olga Brani
						padding: 6px 5px;
161 bfdaac22 Athina Bekakou
					}
162 bfdaac22 Athina Bekakou
				}
163 bfdaac22 Athina Bekakou
				.btn-more {
164 bfdaac22 Athina Bekakou
					border: 1px solid $gray-2;
165 d6d06450 Athina Bekakou
					position: relative;
166 d6d06450 Athina Bekakou
					min-width: $list-icon-height;
167 97cd255d Olga Brani
					padding: 0 10px;
168 bfdaac22 Athina Bekakou
					float: right;
169 bfdaac22 Athina Bekakou
					em {
170 914e6fb5 Athina Bekakou
						// display: none;
171 914e6fb5 Athina Bekakou
						// opacity: 0;
172 bfdaac22 Athina Bekakou
						font-style: normal;
173 bfdaac22 Athina Bekakou
						color: $body-font-color;
174 bfdaac22 Athina Bekakou
						@include transition(opacity, 300ms, linear);
175 d6d06450 Athina Bekakou
						margin-right: 7px;
176 bfdaac22 Athina Bekakou
					}
177 bfdaac22 Athina Bekakou
					&:hover {
178 bfdaac22 Athina Bekakou
						color: $link-color;
179 bfdaac22 Athina Bekakou
						em {
180 d6d06450 Athina Bekakou
							// display: inline-block;
181 d6d06450 Athina Bekakou
							// opacity: 1;
182 2eef02ae Athina Bekakou
						}
183 3a0726aa Athina Bekakou
					}
184 bfdaac22 Athina Bekakou
					&.clicked {
185 bfdaac22 Athina Bekakou
						background-color: $link-color;
186 bfdaac22 Athina Bekakou
						color: #fff;
187 d6d06450 Athina Bekakou
						.arrow-down:after {
188 d6d06450 Athina Bekakou
							border-color: white transparent transparent transparent;
189 d6d06450 Athina Bekakou
						}
190 fad1549a Olga Brani
						em {
191 fad1549a Olga Brani
							@include transition(opacity, 300ms, linear);
192 bfdaac22 Athina Bekakou
							display: inline-block;
193 bfdaac22 Athina Bekakou
							opacity: 1;
194 fad1549a Olga Brani
							color: #fff;
195 3a0726aa Athina Bekakou
						}
196 3a0726aa Athina Bekakou
					}
197 bfdaac22 Athina Bekakou
				}
198 d6d06450 Athina Bekakou
				.arrow-down:after {
199 d6d06450 Athina Bekakou
					content: "";
200 d6d06450 Athina Bekakou
					display: inline-block;
201 d6d06450 Athina Bekakou
					width: 0;
202 d6d06450 Athina Bekakou
					height: 0;
203 d6d06450 Athina Bekakou
					border: inset 5px;
204 d6d06450 Athina Bekakou
					border-color: black transparent transparent transparent;
205 d6d06450 Athina Bekakou
					border-top-style: solid;
206 d6d06450 Athina Bekakou
					position: relative;
207 d6d06450 Athina Bekakou
					top: 3px;
208 d6d06450 Athina Bekakou
				}
209 3a0726aa Athina Bekakou
210 bfdaac22 Athina Bekakou
			}
211 bd83612d Olga Brani
			&.folder {
212 bd83612d Olga Brani
				.img-wrap {
213 bd83612d Olga Brani
					background-position: left center;
214 bd83612d Olga Brani
					text-align: left;
215 bd83612d Olga Brani
					span {
216 bd83612d Olga Brani
						color: $gray-2;
217 bd83612d Olga Brani
						font-size: emCalc(16px);
218 bd83612d Olga Brani
						position: relative;
219 3fd0db82 Athina Bekakou
						top: 2px;
220 3fd0db82 Athina Bekakou
						left: 18px;
221 bd83612d Olga Brani
					}
222 3a0726aa Athina Bekakou
				}
223 3a0726aa Athina Bekakou
			}
224 3a0726aa Athina Bekakou
		}
225 3a0726aa Athina Bekakou
	}
226 c9d873e8 Olga Brani
}
227 292a32ef Olga Brani
.storage-progress{
228 0ef95fe4 Olga Brani
	.items-list {
229 71acaee4 Olga Brani
		margin-bottom: 0;
230 c9d873e8 Olga Brani
		li {
231 0ef95fe4 Olga Brani
			padding-left: $lt-bar-width + $check-w;
232 0ef95fe4 Olga Brani
			color: #fff;
233 0ef95fe4 Olga Brani
			.img-wrap {
234 0ef95fe4 Olga Brani
				top: 0;
235 0ef95fe4 Olga Brani
				height: $list-icon-height;
236 0ef95fe4 Olga Brani
				line-height: $list-icon-height;
237 c9d873e8 Olga Brani
			}
238 0ef95fe4 Olga Brani
			h4 {
239 0ef95fe4 Olga Brani
				width: $h4-w;
240 0ef95fe4 Olga Brani
				height: $list-icon-height;
241 0ef95fe4 Olga Brani
				line-height: $list-icon-height;
242 c9d873e8 Olga Brani
			}
243 0ef95fe4 Olga Brani
			.remove {
244 0ef95fe4 Olga Brani
				text-align: right;
245 0ef95fe4 Olga Brani
				font-weight: bold;
246 0ef95fe4 Olga Brani
				visibility: visible;
247 0ef95fe4 Olga Brani
				a {
248 0ef95fe4 Olga Brani
					color: #fff;
249 390a85eb Athina Bekakou
					&:hover {
250 d1366c8a Olga Brani
						color: $gray-0;
251 c9d873e8 Olga Brani
					}
252 c9d873e8 Olga Brani
				}
253 c9d873e8 Olga Brani
			}
254 0ef95fe4 Olga Brani
			.progress-col {
255 0ef95fe4 Olga Brani
				padding-top: 7px;
256 0ef95fe4 Olga Brani
			}
257 0ef95fe4 Olga Brani
			&:hover {
258 292a32ef Olga Brani
				background-color: transparent;
259 0ef95fe4 Olga Brani
			}
260 c9d873e8 Olga Brani
		}
261 c9d873e8 Olga Brani
	}
262 0ef95fe4 Olga Brani
	.progress {
263 0ef95fe4 Olga Brani
		height: 20px;
264 0ef95fe4 Olga Brani
		.meter {
265 0ef95fe4 Olga Brani
			background-color: #fff;
266 d6d06450 Athina Bekakou
			color: $turquoise-1;
267 0ef95fe4 Olga Brani
			text-align: right;
268 0ef95fe4 Olga Brani
			padding-right: 10px;
269 fad1549a Olga Brani
			line-height: 120%;
270 0ef95fe4 Olga Brani
		}
271 0ef95fe4 Olga Brani
	}
272 0ef95fe4 Olga Brani
	.details {
273 0ef95fe4 Olga Brani
		border: 0 none;
274 0ef95fe4 Olga Brani
	}
275 aafda5ef Athina Bekakou
}
276 aafda5ef Athina Bekakou
277 aafda5ef Athina Bekakou
.all-height {
278 3dc222e5 Olga Brani
	min-height: 100%
279 fad1549a Olga Brani
}