Statistics
| Branch: | Tag: | Revision:

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

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
				margin: 0;
62
			}
63
			h4 {
64
				color: #fff;
65
			}
66
			&:hover {
67
				.rect-plus	{
68
					color: $link-color;
69
				}
70
			}
71
		}
72
		&.drag {
73
			background-color: $light-bg;
74
		}
75
	}
76
}
77
.containers {
78
	.items-list {
79
		overflow: visible;
80
		&>li {
81
			text-align: left;
82
			padding-right: 50px;
83
			padding-left: 50px;
84
			.col {
85
				float: left;
86
			}
87
			h4 {
88
				font-size: emCalc(14px);
89
				width: auto;
90
			}
91
			.basic-data {
92
				width: 180px;
93
				padding-right: 20px;
94
				.img-wrap {
95
					a {
96
						display: block;
97
					}
98
				}
99
				&:hover {
100
					a {
101
						color: $link-color-hover;
102
					}
103
				}
104
			}
105
			.size-data{
106
				width: 360px;
107
				padding-right: 20px;
108
				.progress-col {
109
					width: $progress-col-w;
110
					padding-top: 7px;
111
					.progress {
112
						border-color: $gray-2;
113
						height: 20px;
114
						.meter {
115
							text-align: right;
116
							font-size: 10px;
117
							padding: 2px;
118
							background-color: $gray-2;
119
							color: white;
120
							font-size: emCalc(14px);
121
							line-height: 100%;
122
						}
123
					}
124
				}
125
				.size {
126
					width: auto;
127
					font-size: emCalc(14px);
128
				}
129
			}
130
			h5 {
131
				float: left;
132
				width: 220px;
133
				font-size: emCalc(14px);
134
				font-weight: normal;
135
				line-height: $list-icon-height;
136
				height: $list-icon-height;
137
				margin: 0;
138
				margin:0 20px 0 0 ;
139
				overflow: hidden;
140
				white-space: nowrap;
141
			}
142
			.project {
143
				line-height: $list-icon-height;
144
				height: $list-icon-height;
145
				width: 100px;
146
				font-size: emCalc(14px);
147
				position: relative;
148
				right: 0;
149
				ul {
150
					position: absolute;
151
					right: 0;
152
					top: $list-icon-height + 2px;
153
					list-style: none outside none;
154
					border: 1px solid $gray-2;
155
					padding: 5px 15px;
156
					display: none;
157
					z-index: 1;
158
					background: #fff;
159
					min-width: 100px + 240px;
160
					li {
161
						padding: 6px 5px;
162
					}
163
				}
164
				.btn-more {
165
					border: 1px solid $gray-2;
166
					position: relative;
167
					min-width: $list-icon-height;
168
					padding: 0 10px;
169
					float: right;
170
					em {
171
						// display: none;
172
						// opacity: 0;
173
						font-style: normal;
174
						color: $body-font-color;
175
						@include transition(opacity, 300ms, linear);
176
						margin-right: 7px;
177
					}
178
					&:hover {
179
						color: $link-color;
180
						em {
181
							// display: inline-block;
182
							// opacity: 1;
183
						}
184
					}
185
					&.clicked {
186
						background-color: $link-color;
187
						color: #fff;
188
						.arrow-down:after {
189
							border-color: white transparent transparent transparent;
190
						}
191
						em {
192
							@include transition(opacity, 300ms, linear);
193
							display: inline-block;
194
							opacity: 1;
195
							color: #fff;
196
						}
197
					}
198
				}
199
				.arrow-down:after {
200
					content: "";
201
					display: inline-block;
202
					width: 0;
203
					height: 0;
204
					border: inset 5px;
205
					border-color: black transparent transparent transparent;
206
					border-top-style: solid;
207
					position: relative;
208
					top: 3px;
209
				}
210

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

    
278
.all-height {
279
	min-height: 100%
280
}