Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.5 kB)

1
.details {
2
	$details-top-title-h : 0.4 * $details-top-height;
3
	$details-top-more-h : ( $details-top-height - $details-top-title-h )/2;
4
	position:relative;
5
	border-left: 1px solid $border-color-1;
6
	border-right: 1px solid $border-color-1;
7
	.lt {
8
		width: $details-lt-width;
9
		float: left;
10
		text-align: center;
11
		padding:20px 0;
12
		border-right: 1px solid $border-color-1;
13
		height: $details-top-height;
14
	}
15
	.rt {
16
		overflow: hidden;
17
	}
18
	.top {
19
		@extend .clearfix;
20
		border-bottom:1px solid $border-color-1;
21
		position: relative;
22
		z-index: 1;
23
		.img-wrap {
24
			position: relative;
25
			display: inline-block;
26
			width: auto;
27
			.snf-PC_fill,
28
			.snf-network_full {
29
				font-size:90px;
30
			}
31
			.os {
32
				top:12px;
33
			}
34
		}
35
		.title {
36
			height: $details-top-title-h;
37
			padding: 0 0 0 $details-top-more-padding-lt; 
38
		}
39
		.actions, .tabs {
40
			border-top: 1px solid $border-color-1;
41
			height: $details-top-more-h;
42
			line-height: $details-top-more-h;
43
			padding: 0 0 0 $details-top-more-padding-lt; 
44
		}
45
		.actions {
46
			font-size: emCalc(14px);
47
		}
48
		.tabs {
49
			font-size: emCalc(22px);
50
		}
51
		ul {
52
			list-style: none outside none;
53
			padding:0;
54
			margin: 0;
55
			li {
56
				display: inline-block;
57
				padding: 0 20px 0 0 ;
58
				margin: 0;
59
				line-height: $details-top-more-h;
60
			}
61
		}
62
		h1 {
63
			font-size: emCalc(16px);
64
			margin: 0;
65
			padding-top: 16px;
66
			span {
67
				font-size: emCalc(12px);
68
				display: block;
69
				font-weight: normal;
70
			}
71
		}
72
	}
73
	.info-simple {
74
		padding: 20px 0 0 $details-lt-width;
75
		.info-block {
76
			padding:$details-top-more-padding-lt;
77
			background: url('../images/dashed_atom-x.png') repeat-x bottom;
78
			dl {
79
				margin-bottom: 0;
80
				font-size: emCalc(14px);
81
				dt {
82
					display: inline-block;
83
					width: 42%;
84
					vertical-align: top;
85
					font-weight: normal;
86
					.icon {
87
						width: 40px;
88
						display: inline-block;
89
						font-size: emCalc(24px);
90
					}
91
				}
92
				dd {
93
					display: inline-block;
94
					width: 45%;
95
					margin-bottom: 1em;
96
				}
97
			}
98
			&.tags {
99
				text-align:left;
100
				.editable {
101
					min-width: 30%;
102
					display: inline-block;
103
					input[type="text"] {
104
						width: 100px;
105
					}
106
				}
107
				.btns {
108
					margin-top: 77px;
109
					margin-bottom: 20px;
110
					*:first-child {
111
						margin-right: 15px;
112
					}
113
				}
114
				.buttons {
115
					margin-top: 25px;
116
					margin-bottom: 25px;
117
				}
118
				h3 {
119
					margin: 0;
120
					font-size: emCalc(14px);
121
					font-weight: normal;
122
				}
123
			}
124
			&.charts {
125
				.graph_container {
126
					margin-bottom: 20px;
127
				}
128
			}
129
		}
130
	}
131
	.content {
132
		h2 {
133
			font-size: emCalc(16px);
134
			line-height: 1;
135
			margin-bottom: 40px;
136
		}
137
	}
138
}