Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (3.8 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_fill,
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:44px;
39
				top:14px;
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: 20px 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
					.font-icon {
97
						width: 40px;
98
						display: inline-block;
99
						font-size: emCalc(24px);
100
					}
101
				}
102
				dd {
103
					display: inline-block;
104
					width: 45%;
105
					margin-bottom: 1em;
106
				}
107
			}
108
			&.tags {
109
				text-align:left;
110
				.tag-data {
111
					min-width: 30%;
112
					display: inline-block;
113
				}
114
				.btns {
115
					margin-top: 77px;
116
					margin-bottom: 20px;
117
					*:first-child {
118
						margin-right: 15px;
119
					}
120
				}
121
				.buttons {
122
					margin-top: 25px;
123
					margin-bottom: 25px;
124
				}
125
				h3 {
126
					margin: 0;
127
					font-size: emCalc(14px);
128
					font-weight: normal;
129
				}
130
			}
131
			&.charts {
132
				.graph_container {
133
					margin-bottom: 20px;
134
				}
135
			}
136
		}
137
	}
138
	.content {
139
		h2 {
140
			font-size: emCalc(16px);
141
			line-height: 1;
142
			margin-bottom: 40px;
143
		}
144
	}
145
	.lt-bar {
146
		@include ltbar($details-lt-width);
147
		padding: 0;
148
		display: none;
149
	}
150
}
151

    
152
.scroll-wrap {
153
	overflow: auto;
154
	position: relative;
155
}
156

    
157
.toggle-lt-bar {
158
	position: absolute;
159
	left:0;
160
	top: 35px;
161
	background: $link-color;
162
	z-index: 4;
163
	color: #fff;
164
	display: block;
165
	height: 100px;
166
	line-height: 85px;
167
	padding: 0 5px;
168
	&:hover {
169
		background: $link-color-hover;
170
		color: #fff;
171
	}
172
}
173

    
174
.list-availables {
175
	&>span{
176
			margin-bottom: 1em;
177
			display: inline-block;
178
		}
179
	ul {
180
		list-style-type: none;
181
		li {
182
			line-height: 2.5em;
183
			span {
184
				display: inline-block;
185
				&:not(:last-child), span:not(:first-child) {
186
					margin-right: 20px;
187
				}
188
				&:first-child {
189
					margin-right: 30px;
190
				}
191
				&.font-icon{
192
					vertical-align: middle;
193
					&.snf-network_full, &.snf-HDD-full {
194
						font-size: 24px;
195
						color: $secondary-color;
196
					}
197
				}
198
				&.name {
199
					width: 30%;
200
				}
201
			}
202
		}
203
	}
204
}