Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _details.scss @ ef5eff50

History | View | Annotate | Download (4.6 kB)

1
$details-icon-large : 90px;
2

    
3
.details {
4
	$details-top-title-h : 0.4 * $details-top-height;
5
	$details-top-more-h : ( $details-top-height - $details-top-title-h )/2;
6
	position:relative;
7
	border-left: 1px solid $border-color-1;
8
	border-right: 1px solid $border-color-1;
9
	.lt {
10
		width: $details-lt-width;
11
		float: left;
12
		text-align: center;
13
		border-right: 1px solid $border-color-1;
14
		height: $details-top-height;
15
		line-height: $details-top-height;
16
	}
17
	.rt {
18
		overflow: hidden;
19
	}
20
	.top {
21
		@extend .clearfix;
22
		border-bottom:1px solid $border-color-1;
23
		position: relative;
24
		z-index: 1;
25
		.img-wrap {
26
			position: relative;
27
			vertical-align: middle;
28
			width: auto;
29
			height: $details-icon-large;
30
			.snf-pc-full,
31
			.snf-network-full {
32
				font-size: $details-icon-large;
33
			}
34
			.os {
35
				@include sprite('../images/os-unknown.png', 30px, 30px);
36
				position: absolute;
37
				background-size:100%;
38
				left: 42px;
39
				top: 15px;
40
				&.windows { background-image:url('../images/os-windows.png'); }
41
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
42
				&.fedora { background-image:url('../images/os-fedora.png'); }
43
			}
44
		}
45
		.title {
46
			height: $details-top-title-h;
47
			padding: 0 0 0 $details-top-more-padding-lt; 
48
		}
49
		.actions, .tabs {
50
			border-top: 1px solid $border-color-1;
51
			height: $details-top-more-h;
52
			line-height: $details-top-more-h;
53
			padding: 0 0 0 $details-top-more-padding-lt; 
54
		}
55
		.actions {
56
			font-size: emCalc(14px);
57
			a {
58
				text-transform: capitalize;
59
			}
60
		}
61
		.tabs {
62
			font-size: emCalc(22px);
63
		}
64
		ul {
65
			list-style: none outside none;
66
			padding:0;
67
			margin: 0;
68
			li {
69
				display: inline-block;
70
				padding: 0 20px 0 0 ;
71
				margin: 0;
72
				line-height: $details-top-more-h;
73
			}
74
		}
75
		h1 {
76
			font-size: emCalc(16px);
77
			margin: 0;
78
			padding-top: 16px;
79
			span {
80
				font-size: emCalc(12px);
81
				display: block;
82
				font-weight: normal;
83
			}
84
		}
85
	}
86
	.content {
87
		&.hidden {
88
			display: none;
89
		}
90
	}
91
	.info-simple {
92
		padding: 0 0 0 $details-lt-width;
93
		.info-block {
94
			padding:$details-top-more-padding-lt;
95
			background: url('../images/dashed_atom-x.png') repeat-x bottom;
96
			dl {
97
				margin-bottom: 0;
98
				font-size: emCalc(14px);
99
				dt {
100
					display: inline-block;
101
					width: 42%;
102
					vertical-align: top;
103
					font-weight: normal;
104
					.snf-font {
105
						width: 40px;
106
						display: inline-block;
107
						font-size: emCalc(24px);
108
						position: relative;
109
						bottom: -2px;
110
					}
111
				}
112
				dd {
113
					display: inline-block;
114
					width: 45%;
115
					margin-bottom: 1em;
116
				}
117
			}
118
			.tags {
119
				text-align:left;
120
				li {
121
					list-style: none outside none;
122
					display: inline-block;
123
					margin-right: 25px;
124
				}
125
				.tag {
126
					vertical-align: middle;
127
				}
128
				.delete {
129
					margin-left: 10px;	
130
				}
131
				.btns {
132
					margin-top: 77px;
133
					margin-bottom: 20px;
134
					a:first-child {
135
						margin-right: 15px;
136
					}
137
				}
138
				.buttons {
139
					margin-top: 25px;
140
					margin-bottom: 25px;
141
				}
142
				h3 {
143
					margin: 0;
144
					font-size: emCalc(14px);
145
					font-weight: normal;
146
				}
147
			}
148
			&.charts {
149
				.graph_container {
150
					margin-bottom: 20px;
151
				}
152
			}
153
		}
154
	}
155
	.content {
156
		h2 {
157
			font-size: emCalc(16px);
158
			line-height: 1;
159
			margin-bottom: 40px;
160
		}
161
	}
162
	.lt-bar {
163
		@include ltbar($details-lt-width);
164
		padding: 0;
165
		display: none;
166
		.items-list {
167
			.img-wrap {
168
				.snf-font {
169
					font-size: $snf-font-size-medium;;
170
				}
171
			}
172
		}
173
	}
174
}
175

    
176
.scroll-wrap {
177
	// overflow: auto;
178
	position: relative;
179
}
180

    
181
.toggle-lt-bar {
182
	position: absolute;
183
	left:0;
184
	top: 35px;
185
	background: $link-color;
186
	z-index: 4;
187
	color: #fff;
188
	display: block;
189
	height: 100px;
190
	line-height: 85px;
191
	padding: 0 5px;
192
	&:hover {
193
		background: $link-color-hover;
194
		color: #fff;
195
	}
196
	&.fix-position {
197
		position: fixed;
198
		top: $header-height + $bar-height + 35px;
199
		left: 50%;
200
		margin-left: - ($row-width/2 - emCalc(10px));
201
		border: 1px solid white;
202

    
203
	}
204
}
205

    
206
.list-availables {
207
	&>span{
208
			margin-bottom: 1em;
209
			display: inline-block;
210
		}
211
	ul {
212
		list-style-type: none;
213
		li {
214
			line-height: 2.5em;
215
			span {
216
				display: inline-block;
217
				&:not(:last-child), span:not(:first-child) {
218
					margin-right: 20px;
219
				}
220
				&:first-child {
221
					margin-right: 30px;
222
				}
223
				&.snf-font{
224
					vertical-align: middle;
225
					&.snf-network-full, &.snf-volume-full {
226
						font-size: 24px;
227
						color: $secondary-color;
228
					}
229
				}
230
				&.name {
231
					width: 50%;
232
				}
233
			}
234
		}
235
	}
236
}
237

    
238
// experiment with select lists
239
.select-list {
240
	border: 0 !important;  /*Removes border*/
241
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
242
	-moz-appearance: none;  /*Removes default style Firefox*/
243
	background-color: transparent;
244

    
245
}