Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (9.9 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
.clearfix:before,
48
.clearfix:after									{ content:" "; display:block; height:0; visibility:hidden; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */
49
.clearfix:after									{ clear:both; }
50
// Set margin and padding to zero 
51
@mixin marginPaddingZero() {
52
	margin: 0;
53
	padding: 0;
54
}
55
 
56

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

    
68
}
69

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

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

    
86
// border grey, on hover pink
87
.btn1 {
88
	border:1px solid $primary-color;
89
	color:$primary-color;
90
	display:inline-block;
91
	padding:10px 20px;
92
	line-height:1em;
93
	text-align:center;
94
	&:hover,
95
	&.current {
96
		border-color:$secondary-color;
97
		background:$secondary-color;
98
		color:$white;
99
	}
100
}
101

    
102
// white background, on hover transparent
103
.btn2 {
104
	@extend .btn1;
105
	color:$secondary-color;
106
	background:$white;
107
	border-color:$secondary-color;
108
	&:hover, 
109
	&.current {
110
		color:$white;
111
		background:transparent;
112
		border-color:$white;
113
	}
114
}
115

    
116
// reverse btn2
117
.btn3 {
118
	@extend .btn1;
119
	color:$white; 
120
	border-color:$white;
121
	&:hover, 
122
	&.current {
123
		color:$secondary-color;
124
		background:$white;
125
		border-color:$white;
126
	}
127
}
128

    
129

    
130
a:hover {
131
	@include transition(background, 300ms, ease-out);
132
}
133

    
134
.dummy-navigation {
135
	position: fixed;
136
	right:0;
137
	top:100px;
138
	padding:20px;
139
	background:#cc0;
140
	z-index:100;
141
	line-height:160%;
142
	a {
143
		color:$black;
144
		&:hover { color:$white }
145
		&.open { color:$white;}
146
		&.close {
147
			float:right;
148
			font-weight:bold;
149
			font-size:20px;
150
		}
151
	}
152
}
153

    
154
.ours {
155
	padding:8px 15px;
156
	color:$white;
157
	font-size:20px;
158
	font-weight:bold;
159
	background:#cc0;
160
	display:none;
161
	position: absolute;
162
	&.questions { background:orange;}
163
	&.problems { background:red;}
164
	&.suggestions { background:#3EC9FF;}
165

    
166
}
167

    
168

    
169
.row-full {
170
	width:$row-top-width;
171
}
172

    
173
.lt-sidebar {
174
	width:250px;
175
	float:left;
176
	overflow:scroll;
177
	height:300px;
178
	&+.main {
179
		overflow:hidden;
180
	}
181
}
182

    
183
.main {
184
	padding:20px 40px;
185
}
186

    
187
body.with-overlay {
188
	background:$secondary-color;
189
}
190

    
191
.header {
192
	position:relative;
193
	padding:$header-padding-vertical $header-padding-horizontal;
194
	border-bottom:1px solid $primary-color;
195
	background:$white;
196
	.logo {
197
		text-align: center;
198
	}
199
	.actions {
200
		text-align:center;
201
		ul {
202
			margin:$header-padding-vertical 0 0;
203
			li {
204
				list-style: none outside none;
205
				display: inline-block;
206
				margin:0 5px;
207
				a {
208
					display: block;
209
					width:100%;
210
					padding:8px 20px;
211
					border:1px solid transparent;
212
					&:hover {
213
						border:1px solid $secondary-color;
214
					}
215
				}
216
			}
217
		}
218
	}
219
	.new-btn {
220
		position: absolute;
221
		left:$header-padding-horizontal;
222
		bottom:$header-padding-vertical;
223
		a {
224
			@extend .btn1;
225
			span {
226
				font-size:emCalc(20px);
227
			}
228
		}
229
	}
230
}
231
.login {
232
	position:absolute;
233
	right:$header-padding-horizontal;
234
	top:$header-padding-vertical;
235
}
236

    
237
.top-nav {
238
	position:absolute;
239
	left:$header-padding-horizontal;
240
	top:$header-padding-vertical;
241
	ul {
242
		@include marginPaddingZero();
243
		li {
244
			display: inline-block;
245
			margin-right:15px;
246
			a {
247
				padding-bottom:5px;
248
			}
249
		}
250
	}
251

    
252
}
253

    
254

    
255
// info styling
256

    
257
.top-info {
258
	padding:50px 100px;
259
	position: relative;
260
	.close {
261
		position: absolute;
262
		right:$header-padding-horizontal;
263
		top:50px;
264
		@include sprite('../images/info-close.png', 31px, 30px);
265
	}
266
}
267
.info.alert {
268
	background:$secondary-color;
269
	color:$white;
270
}
271

    
272
.info.warning {
273
	background:$warning-color;
274
	color:$black;
275
}
276

    
277
.info.success {
278
	background:$success-color;
279
	color:$white;
280
}
281

    
282
.items-list {
283
	padding:50px 0;
284
	li {
285
		text-align:center;
286
		padding:20px;
287
		.visible-info {
288
			span {
289
				display: block;
290
			}
291
		}
292
	}
293
}
294

    
295
.vms {
296
	.items-list {
297
		li {
298
			.img {
299
				@include sprite('../images/vm-on.png', 56px, 58px);
300
				margin-bottom: 20px;
301
				position: relative;
302
				&.stopped {
303
					background-image:url('../images/vm-stopped.png');
304
				}
305
				.os {
306
					@include sprite('../images/os-unknown.png', 22px, 22px);
307
					position: absolute;
308
					top:8px;
309
					left:18px;
310
					&.windows { background-image:url('../images/os-windows.png'); }
311
					&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
312
					&.fedora { background-image:url('../images/os-fedora.png'); }
313
				}
314
			}
315
		}
316
	}
317
}
318

    
319
.lt-sidebar.vms {
320
	font-size:emCalc(12px);
321
	.items-list li .img, 
322
	.items-list li .os {
323
		background-size:80%;
324
	}
325
}
326

    
327
.vm {
328
	.img {
329
				@include sprite('../images/vm-on.png', 56px, 58px);
330
				margin-bottom: 20px;
331
				position: relative;
332
				&.stopped {
333
					background-image:url('../images/vm-stopped.png');
334
				}
335
				.os {
336
					@include sprite('../images/os-unknown.png', 22px, 22px);
337
					position: absolute;
338
					top:8px;
339
					left:18px;
340
					&.windows { background-image:url('../images/os-windows.png'); }
341
					&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
342
					&.fedora { background-image:url('../images/os-fedora.png'); }
343
				}
344
			}
345
}
346

    
347
.details {
348
	.top {
349
		text-align: center;
350
		.img {
351
			@include sprite('../images/vm-on.png', 112px, 116px);
352
			background-size:100%;
353
		}
354
		.os {
355
			background-size:100%;
356
			width:44px;
357
			height:44px;
358
			left:36px;
359
			top:16px;
360
		}
361
		.actions {
362
			ul {
363
				padding:1em;
364
				text-align:center;
365
				li {
366
					list-style: none outside none;
367
					display: inline-block;
368
					margin:0 10px;
369
					min-width: 112px;
370
					a {
371
						@extend .btn1;
372
					}
373

    
374
				}
375
			}
376
		}
377
		
378
	}
379
	.info {
380
		dl {
381
			margin:0;
382
			dt {
383
				display: inline-block;
384
				width:25%;
385
				float:left;
386
			}
387
		}
388
	}
389
}
390

    
391
.border-bottom-style1 {
392
	padding-bottom:20px;
393
	margin-bottom:20px;
394
	border-bottom:2px dashed $primary-color;
395
}
396

    
397
.overlay {
398
	background:$secondary-color;
399
	.lt-sidebar {
400
		border-right:1px solid $white;
401
		ul {
402
			li {
403
				list-style:none outside none;
404
				a {
405
					color:$white;
406
					span { float:right; display:none;}
407
					&:hover,
408
					&.current {
409

    
410
						text-decoration: none;
411
						span { 
412
							display:inline;
413
						}
414
					}
415
				}
416
			}
417
		}
418

    
419
	}
420
	.lt-sidebar, 
421
	.main {
422
		padding:100px $header-padding-horizontal;
423
	}
424
	.navigation {
425
		.rt {
426
			float:right;
427
		}
428
	}
429
}
430

    
431
.create-vm {
432
	.select-os {
433
		li {
434
			width:23%;
435
			padding:20px;
436
			list-style:none outside none;
437
			display: inline-block;
438
			float: left;
439
			height: 200px;
440
			margin:0 10px 10px 0;
441
			&:hover,
442
			&.selected {
443
				background:$white;
444
				h2, p, a {
445
					color:$secondary-color;
446
				}
447
			}
448
			a {
449
				color:$white;
450
			}
451
			.os {
452
				@include sprite('../images/os-unknown.png', 30px, 30px);
453
				background-size:100%;
454
				margin-bottom:2em;
455
				&.windows { background-image:url('../images/os-windows.png'); }
456
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
457
				&.fedora { background-image:url('../images/os-fedora.png'); }
458
			}
459
			h2 {
460
				font-size:emCalc(16px);
461
				font-weight:normal;
462
				color:$white;
463
			}
464
			.details {
465
				font-weight:bold;
466
				font-size:emCalc(14px);
467
			}
468
		}
469
	}
470
	.select-flavor {
471
		dl {
472
			color:$white;
473
			font-size:emCalc(20px);
474
			margin-bottom:10px;
475
			dd {
476
				width:23%;
477
				display: inline-block;
478
			}
479
			dt {
480
				width:70%;
481
				display: inline-block;
482
				font-weight: normal;
483
				span {
484
					@extend .btn3;
485
					min-width: 90px;
486
					margin:0 10px;
487
					&:first-child {
488
						margin-left:0;
489
					}
490
				}
491
			}
492
		}
493
	}
494
}
495

    
496