Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (6 kB)

1
// Global Foundation Settings
2
@import "settings";
3

    
4
// Comment out this import if you are customizing you imports below
5
@import "foundation";
6

    
7
// Import specific parts of Foundation by commenting the import "foundation"
8
// and uncommenting what you want below. You must uncomment the following if customizing
9

    
10
// @import "foundation/foundation-global"; // *always required
11
// @import "foundation/components/global"; // *always required
12
// @import "foundation/components/grid";
13
// @import "foundation/components/visibility";
14
// @import "foundation/components/block-grid";
15
// @import "foundation/components/type";
16
// @import "foundation/components/buttons";
17
// @import "foundation/components/forms"; // *requires components/buttons
18
// @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
19
// @import "foundation/components/button-groups"; // *requires components/buttons
20
// @import "foundation/components/dropdown-buttons"; // *requires components/buttons
21
// @import "foundation/components/split-buttons"; // *requires components/buttons
22
// @import "foundation/components/flex-video";
23
// @import "foundation/components/section";
24
// @import "foundation/components/top-bar";  // *requires components/grid
25
// @import "foundation/components/orbit";
26
// @import "foundation/components/reveal";
27
// @import "foundation/components/joyride";
28
// @import "foundation/components/clearing";
29
// @import "foundation/components/alert-boxes";
30
// @import "foundation/components/breadcrumbs";
31
// @import "foundation/components/keystrokes";
32
// @import "foundation/components/labels";
33
// @import "foundation/components/inline-lists";
34
// @import "foundation/components/pagination";
35
// @import "foundation/components/panels";
36
// @import "foundation/components/pricing-tables";
37
// @import "foundation/components/progress-bars";
38
// @import "foundation/components/side-nav";
39
// @import "foundation/components/sub-nav";
40
// @import "foundation/components/switch";
41
// @import "foundation/components/magellan";
42
// @import "foundation/components/tables";
43
// @import "foundation/components/thumbs";
44
// @import "foundation/components/tooltips";
45
// @import "foundation/components/dropdown";
46

    
47

    
48
// Set margin and padding to zero 
49
@mixin marginPaddingZero() {
50
	margin: 0;
51
	padding: 0;
52
}
53
 
54

    
55
// Establishes the prequisits for sprite with background-image.
56
// Background-position for normal and hover states need to 
57
// be declared separetely
58
@mixin sprite($image, $width, $height){
59
	background:url($image);
60
	width: $width;
61
	height:$height;
62
	display: inline-block;
63
	text-indent: -2000px;
64
	overflow: hidden;
65
}
66

    
67
// Transition for css properties
68
@mixin transition($transition-property, $transition-time, $method) {
69
	-webkit-transition: $transition-property $transition-time $method;
70
	-moz-transition: $transition-property $transition-time $method;
71
	-ms-transition: $transition-property $transition-time $method;
72
	-o-transition: $transition-property $transition-time $method;
73
	transition: $transition-property $transition-time $method;
74
}
75

    
76
// Box-shadow property. For no box-shadow use box-shadow(none)
77
@mixin box-shadow($shadows...) {
78
  -moz-box-shadow: $shadows;
79
  -webkit-box-shadow: $shadows;
80
  box-shadow: $shadows;
81
}
82

    
83
a:hover {
84
@include transition(background, 300ms, ease-out);
85
}
86

    
87
.dummy-navigation {
88
	position: fixed;
89
	right:0;
90
	top:100px;
91
	padding:20px;
92
	background:#cc0;
93
	z-index:100;
94
	line-height:160%;
95
	a {
96
		color:$black;
97
		&:hover { color:$white }
98
		&.open { color:$white;}
99
		&.close {
100
			float:right;
101
			font-weight:bold;
102
			font-size:20px;
103
		}
104
	}
105
}
106

    
107
.ours {
108
	padding:8px 15px;
109
	color:$white;
110
	font-size:20px;
111
	font-weight:bold;
112
	background:#cc0;
113
	display:none;
114
	position: absolute;
115
	&.questions { background:orange;}
116
	&.problems { background:red;}
117
	&.suggestions { background:#3EC9FF;}
118

    
119
}
120

    
121

    
122
.row-full {
123
	width:$row-top-width;
124
}
125

    
126
.header {
127
	position:relative;
128
	padding:$header-padding-vertical $header-padding-horizontal;
129
	border-bottom:1px solid $primary-color;
130
	.logo {
131
		text-align: center;
132
	}
133
	.actions {
134
		text-align:center;
135
		ul {
136
			margin:$header-padding-vertical 0 0;
137
			li {
138
				list-style: none outside none;
139
				display: inline-block;
140
				margin:0 5px;
141
				a {
142
					display: block;
143
					width:100%;
144
					padding:8px 20px;
145
					border:1px solid transparent;
146
					&:hover {
147
						border:1px solid $secondary-color;
148
					}
149
				}
150
			}
151
		}
152
	}
153
	.new-btn {
154
		position: absolute;
155
		left:$header-padding-horizontal;
156
		bottom:$header-padding-vertical;
157
		a {
158
			display: inline-block;
159
			padding:10px 20px;
160
			border:1px solid $primary-color;
161
			span {
162
				font-size:emCalc(20px);
163
			}
164
			&:hover {
165
				border-color:$secondary-color;
166
				background:$secondary-color;
167
				color:$white;
168
			}
169
		}
170
	}
171
}
172
.login {
173
	position:absolute;
174
	right:$header-padding-horizontal;
175
	top:$header-padding-vertical;
176
}
177

    
178
.top-nav {
179
	position:absolute;
180
	left:$header-padding-horizontal;
181
	top:$header-padding-vertical;
182
	ul {
183
		@include marginPaddingZero();
184
		li {
185
			display: inline-block;
186
			margin-right:15px;
187
			a {
188
				padding-bottom:5px;
189
			}
190
		}
191
	}
192

    
193
}
194

    
195

    
196
// info styling
197

    
198
.top-info {
199
	padding:50px 100px;
200
	position: relative;
201
	.close {
202
		position: absolute;
203
		right:$header-padding-horizontal;
204
		top:50px;
205
		@include sprite('../images/info-close.png', 31px, 30px);
206
	}
207
}
208
.info.alert {
209
	background:$secondary-color;
210
	color:$white;
211
}
212

    
213
.info.warning {
214
	background:$warning-color;
215
	color:$black;
216
}
217

    
218
.info.success {
219
	background:$success-color;
220
	color:$white;
221
}
222

    
223
.items-list {
224
	padding:50px 0;
225
	li {
226
		text-align:center;
227
		padding:20px;
228
		.visible-info {
229
			span {
230
				display: block;
231
			}
232
		}
233
	}
234
}
235

    
236
.vms {
237
	.items-list {
238
		li {
239
			.img {
240
				@include sprite('../images/vm-on.png', 56px, 58px);
241
				margin-bottom: 20px;
242
				position: relative;
243
				&.stopped {
244
					background-image:url('../images/vm-stopped.png');
245
				}
246
				.os {
247
					@include sprite('../images/os-unknown.png', 22px, 22px);
248
					position: absolute;
249
					top:8px;
250
					left:18px;
251
					&.windows { background-image:url('../images/os-windows.png'); }
252
					&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
253
					&.fedora { background-image:url('../images/os-fedora.png'); }
254
				}
255
			}
256
		}
257
	}
258
}