Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (3.2 kB)

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

    
3
.storage {
4
	$storage-h4-w: 25%;
5
	height: 100%;
6
	.rect-plus {
7
		display: inline-block;
8
		background-color: #fff;
9
		color: $link-color-hover;
10
		padding: 0 6px;
11
		font-size: emCalc(26px);
12
		&:hover {
13
			color: $link-color;
14
		}
15
	}
16
	.items-list {
17
		height: 100%;
18
		&>li {
19
			.img-wrap {
20
				top: 0;
21
				height: $list-icon-height;
22
				line-height: $list-icon-height;
23
			}
24
			h4 {
25
				width: $storage-h4-w;
26
				height: $list-icon-height;
27
				line-height: $list-icon-height;
28
			}
29
			.info {
30
				margin-right: 40px;
31
			}	
32
		}
33
		li:hover {
34
			.actions-col {
35
				visibility: visible;
36
			}
37
		}
38
		.add-new {
39
			position: relative;
40
			input[type="file"] {
41
				position: absolute;
42
				left:$lt-bar-width;
43
				top:0;
44
				right: 0;
45
				bottom: 0;
46
				opacity: 0;
47
			}
48
			h4 {
49
				color: #fff;
50
			}
51
			&:hover {
52
				.rect-plus	{
53
					color: $link-color;
54
				}
55
			}
56
		}
57
		&.drag {
58
			background-color: $light-bg;
59
		}
60
	}
61
	&.containers {
62
		margin-right: 30px;
63
		margin-left:30px;
64
		.items-list {
65
			&>li {
66
				padding-right: 0;
67
				padding-left: 0;
68
				height:60px;
69
				&>*	{
70
					display: inline-block;
71
					overflow: hidden;
72
					// border: 1px solid pink;
73
					height: 100%;
74
					line-height: 100%;
75
				}
76
				.basic-data {
77
					width: 25%;
78
				}
79
				.size-data{
80
					width: 35%;
81
					.progress-col {
82
						height: 20px;
83
						line-height: 20px;
84
						width: 150px;
85
						.progress {
86
							border-color: $gray-2;
87
							height: 100%;
88
							line-height: 100%;
89
							.meter {
90
								text-align: right;
91
								font-size: 10px;
92
								padding: 2px;
93
								background-color: $gray-2;
94
								color: white;
95
							}
96
						}
97

    
98
					}
99
					.size {
100
						width: auto;
101
						line-height: 20px;
102
						height: 20px;
103
						padding-left: 20px;
104
					}
105
				}
106
				.project {
107
					position: relative;
108
					width: 35%;
109
					font-size: emCalc(12px);
110
					.available {
111
						list-style: none;
112
						visibility: hidden;
113
						width: 100%;
114
					}
115
					.btn-more {
116
						display: inline-block;
117
						margin-left: 5px;
118
						border: 1px solid $gray-2;
119
						.explain {
120
								display: none;
121
						}
122
						.snf-arrow-down {
123
						}
124
					}
125

    
126
				}
127
				.img-wrap {
128
					.snf-folder-full {
129
						font-size: emCalc(34px);
130
						color: $secondary-color;
131
					}
132
					span:not(.snf-folder-full) {
133
						color: $gray-2;
134
						font-size: emCalc(16px);
135
						position: relative;
136
						bottom: 5px;
137
						left: -28px;
138
					}
139
				}
140

    
141
			}
142
		}
143
	}
144
}
145
.storage-progress{
146
	.items-list {
147
		li {
148
			padding-left: $lt-bar-width + $check-w;
149
			color: #fff;
150
			.img-wrap {
151
				top: 0;
152
				height: $list-icon-height;
153
				line-height: $list-icon-height;
154
			}
155
			h4 {
156
				width: $h4-w;
157
				height: $list-icon-height;
158
				line-height: $list-icon-height;
159
			}
160
			.remove {
161
				text-align: right;
162
				font-weight: bold;
163
				visibility: visible;
164
				a {
165
					color: #fff;
166
				}
167
				em {
168
					display: none;
169
				}
170
				&:hover {
171
					em {
172
						display: inline;
173
					}
174
				}
175
			}
176
			.progress-col {
177
				padding-top: 7px;
178
			}
179
			&:hover {
180
				background-color: transparent;
181
			}
182
		}
183
	}
184
	.progress {
185
		height: 20px;
186
		.meter {
187
			background-color: #fff;
188
			color: $body-font-color;
189
			text-align: right;
190
			padding-right: 10px;
191
			line-height: 100%;
192
		}
193
	}
194
	.details {
195
		border: 0 none;
196
	}
197
}
198

    
199
.all-height {
200
	height: 100%
201
}