Statistics
| Branch: | Tag: | Revision:

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

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

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

    
270
.all-height {
271
	height: 100%
272
}