Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (4.4 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
		}
58
		.tabs {
59
			font-size: emCalc(22px);
60
		}
61
		ul {
62
			list-style: none outside none;
63
			padding:0;
64
			margin: 0;
65
			li {
66
				display: inline-block;
67
				padding: 0 20px 0 0 ;
68
				margin: 0;
69
				line-height: $details-top-more-h;
70
			}
71
		}
72
		h1 {
73
			font-size: emCalc(16px);
74
			margin: 0;
75
			padding-top: 16px;
76
			span {
77
				font-size: emCalc(12px);
78
				display: block;
79
				font-weight: normal;
80
			}
81
		}
82
	}
83
	.info-simple {
84
		padding: 0 0 0 $details-lt-width;
85
		.info-block {
86
			padding:$details-top-more-padding-lt;
87
			background: url('../images/dashed_atom-x.png') repeat-x bottom;
88
			dl {
89
				margin-bottom: 0;
90
				font-size: emCalc(14px);
91
				dt {
92
					display: inline-block;
93
					width: 42%;
94
					vertical-align: top;
95
					font-weight: normal;
96
					.snf-font {
97
						width: 40px;
98
						display: inline-block;
99
						font-size: emCalc(24px);
100
						position: relative;
101
						bottom: -2px;
102
					}
103
				}
104
				dd {
105
					display: inline-block;
106
					width: 45%;
107
					margin-bottom: 1em;
108
				}
109
			}
110
			&.tags {
111
				text-align:left;
112
				.tag-data {
113
					min-width: 30%;
114
					display: inline-block;
115
					padding: 4px 0;
116
					.delete {
117
						margin-left: 10px;
118
						visibility: hidden;
119
					}
120
				}
121
				.btns {
122
					margin-top: 77px;
123
					margin-bottom: 20px;
124
					a:first-child {
125
						margin-right: 15px;
126
					}
127
				}
128
				.buttons {
129
					margin-top: 25px;
130
					margin-bottom: 25px;
131
				}
132
				h3 {
133
					margin: 0;
134
					font-size: emCalc(14px);
135
					font-weight: normal;
136
				}
137
			}
138
			&.charts {
139
				.graph_container {
140
					margin-bottom: 20px;
141
				}
142
			}
143
		}
144
	}
145
	.content {
146
		h2 {
147
			font-size: emCalc(16px);
148
			line-height: 1;
149
			margin-bottom: 40px;
150
		}
151
	}
152
	.lt-bar {
153
		@include ltbar($details-lt-width);
154
		padding: 0;
155
		display: none;
156
		.items-list {
157
			.img-wrap {
158
				.snf-font {
159
					font-size: $snf-font-size-medium;;
160
				}
161
			}
162
		}
163
	}
164
}
165

    
166
.scroll-wrap {
167
	// overflow: auto;
168
	position: relative;
169
}
170

    
171
.toggle-lt-bar {
172
	position: absolute;
173
	left:0;
174
	top: 35px;
175
	background: $link-color;
176
	z-index: 4;
177
	color: #fff;
178
	display: block;
179
	height: 100px;
180
	line-height: 85px;
181
	padding: 0 5px;
182
	&:hover {
183
		background: $link-color-hover;
184
		color: #fff;
185
	}
186
	&.fix-position {
187
		position: fixed;
188
		top: $header-height + $bar-height + 35px;
189
		left: 50%;
190
		margin-left: - ($row-width/2 - emCalc(10px));
191
		border: 1px solid white;
192

    
193
	}
194
}
195

    
196
.list-availables {
197
	&>span{
198
			margin-bottom: 1em;
199
			display: inline-block;
200
		}
201
	ul {
202
		list-style-type: none;
203
		li {
204
			line-height: 2.5em;
205
			span {
206
				display: inline-block;
207
				&:not(:last-child), span:not(:first-child) {
208
					margin-right: 20px;
209
				}
210
				&:first-child {
211
					margin-right: 30px;
212
				}
213
				&.snf-font{
214
					vertical-align: middle;
215
					&.snf-network-full, &.snf-volume-full {
216
						font-size: 24px;
217
						color: $secondary-color;
218
					}
219
				}
220
				&.name {
221
					width: 50%;
222
				}
223
			}
224
		}
225
	}
226
}
227

    
228
// experiment with select lists
229
.select-list {
230
	border: 0 !important;  /*Removes border*/
231
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
232
	-moz-appearance: none;  /*Removes default style Firefox*/
233
	background-color: transparent;
234

    
235
}