Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _storage.scss @ 97cd255d

History | View | Annotate | Download (4.9 kB)

1
/* Storage (pithos) related styles  */
2

    
3
.storage {
4
	height: 100%;
5
	.rect-plus {
6
		display: inline-block;
7
		background-color: #fff;
8
		color: $link-color-hover;
9
		padding: 0 6px;
10
		font-size: emCalc(26px);
11
		&:hover {
12
			color: $link-color;
13
		}
14
	}
15
	.items-list {
16
		height: 100%;
17
		&>li {
18
			.img-wrap {
19
				top: 0;
20
				height: $list-icon-height;
21
				line-height: $list-icon-height;
22
			}
23
			h4 {
24
				width: $storage-h4-w;
25
			}
26
		}
27
		.folder {
28
			.img-wrap {
29
				background: url(../images/folder-closed.png) no-repeat center center;
30
			}
31
			&.draghover {
32
				.img-wrap {
33
					background-image: url(../images/folder-open.png);
34
				}
35
			}
36
			&.updating {
37
				.img-wrap {
38
					background-image: url(../images/folder-updating.png);
39
				}
40
			}
41
			&.updated {
42
				.img-wrap {
43
					background-image: url(../images/folder-updated.png);
44
				}
45
			}
46
		}
47
		li:hover {
48
			.actions-col {
49
				visibility: visible;
50
			}
51
		}
52
		.add-new {
53
			position: relative;
54
			input[type="file"] {
55
				position: absolute;
56
				left:$lt-bar-width;
57
				top:0;
58
				right: 0;
59
				bottom: 0;
60
				opacity: 0;
61
			}
62
			h4 {
63
				color: #fff;
64
			}
65
			&:hover {
66
				.rect-plus	{
67
					color: $link-color;
68
				}
69
			}
70
		}
71
		&.drag {
72
			background-color: $light-bg;
73
		}
74
	}
75
}
76
.containers {
77
	.items-list {
78
		overflow: visible;
79
		&>li {
80
			text-align: left;
81
			padding-right: 50px;
82
			padding-left: 50px;
83
			.col {
84
				float: left;
85
			}
86
			h4 {
87
				font-size: emCalc(14px);
88
				width: auto;
89
			}
90
			.basic-data {
91
				width: 180px;
92
				padding-right: 20px;
93
				.img-wrap {
94
					a {
95
						display: block;
96
					}
97
				}
98
				&:hover {
99
					a {
100
						color: $link-color-hover;
101
					}
102
				}
103
			}
104
			.size-data{
105
				width: 360px;
106
				padding-right: 20px;
107
				.progress-col {
108
					width: $progress-col-w;
109
					padding-top: 7px;
110
					.progress {
111
						border-color: $gray-2;
112
						height: 20px;
113
						.meter {
114
							text-align: right;
115
							font-size: 10px;
116
							padding: 2px;
117
							background-color: $gray-2;
118
							color: white;
119
							font-size: emCalc(14px);
120
							line-height: 100%;
121
						}
122
					}
123
				}
124
				.size {
125
					width: auto;
126
					font-size: emCalc(14px);
127
				}
128
			}
129
			h5 {
130
				float: left;
131
				width: 220px;
132
				font-size: emCalc(14px);
133
				font-weight: normal;
134
				line-height: $list-icon-height;
135
				height: $list-icon-height;
136
				margin: 0;
137
				margin:0 20px 0 0 ;
138
				overflow: hidden;
139
				white-space: nowrap;
140
			}
141
			.project {
142
				line-height: $list-icon-height;
143
				height: $list-icon-height;
144
				width: 100px;
145
				font-size: emCalc(14px);
146
				position: relative;
147
				right: 0;
148
				ul {
149
					position: absolute;
150
					right: 0;
151
					top: $list-icon-height + 2px;
152
					list-style: none outside none;
153
					border: 1px solid $gray-2;
154
					padding: 5px 15px;
155
					display: none;
156
					z-index: 1;
157
					background: #fff;
158
					min-width: 100px + 240px;
159
					li {
160
						padding: 6px 5px;
161
					}
162
				}
163
				.btn-more {
164
					border: 1px solid $gray-2;
165
					position: relative;
166
					min-width: $list-icon-height;
167
					padding: 0 10px;
168
					float: right;
169
					em {
170
						// display: none;
171
						// opacity: 0;
172
						font-style: normal;
173
						color: $body-font-color;
174
						@include transition(opacity, 300ms, linear);
175
						margin-right: 7px;
176
					}
177
					&:hover {
178
						color: $link-color;
179
						em {
180
							// display: inline-block;
181
							// opacity: 1;
182
						}
183
					}
184
					&.clicked {
185
						background-color: $link-color;
186
						color: #fff;
187
						.arrow-down:after {
188
							border-color: white transparent transparent transparent;
189
						}
190
						em {
191
							@include transition(opacity, 300ms, linear);
192
							display: inline-block;
193
							opacity: 1;
194
							color: #fff;
195
						}
196
					}
197
				}
198
				.arrow-down:after {
199
					content: "";
200
					display: inline-block;
201
					width: 0;
202
					height: 0;
203
					border: inset 5px;
204
					border-color: black transparent transparent transparent;
205
					border-top-style: solid;
206
					position: relative;
207
					top: 3px;
208
				}
209

    
210
			}
211
			&.folder {
212
				.img-wrap {
213
					background-position: left center;
214
					text-align: left;
215
					span {
216
						color: $gray-2;
217
						font-size: emCalc(16px);
218
						position: relative;
219
						top: 2px;
220
						left: 18px;
221
					}
222
				}
223
			}
224
		}
225
	}
226
}
227
.storage-progress{
228
	.items-list {
229
		margin-bottom: 0;
230
		li {
231
			padding-left: $lt-bar-width + $check-w;
232
			color: #fff;
233
			.img-wrap {
234
				top: 0;
235
				height: $list-icon-height;
236
				line-height: $list-icon-height;
237
			}
238
			h4 {
239
				width: $h4-w;
240
				height: $list-icon-height;
241
				line-height: $list-icon-height;
242
			}
243
			.remove {
244
				text-align: right;
245
				font-weight: bold;
246
				visibility: visible;
247
				a {
248
					color: #fff;
249
					&:hover {
250
						color: $gray-0;
251
					}
252
				}
253
			}
254
			.progress-col {
255
				padding-top: 7px;
256
			}
257
			&:hover {
258
				background-color: transparent;
259
			}
260
		}
261
	}
262
	.progress {
263
		height: 20px;
264
		.meter {
265
			background-color: #fff;
266
			color: $turquoise-1;
267
			text-align: right;
268
			padding-right: 10px;
269
			line-height: 120%;
270
		}
271
	}
272
	.details {
273
		border: 0 none;
274
	}
275
}
276

    
277
.all-height {
278
	height: 100%
279
}