Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (10.8 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
	&.current {
101
		cursor:default;
102
	}
103
}
104

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

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

    
131

    
132
// reverse btn2
133
.btn4 {
134
	@extend .btn1;
135
	color:$white; 
136
	border-color:$white;
137
	background:$success-color;
138
	&:hover, 
139
	&.current {
140
		border-color:$white;
141
		background:darken($success-color,15%);
142

    
143
	}
144
}
145

    
146
a:hover {
147
	@include transition(background, 300ms, ease-out);
148
}
149

    
150
.dummy-navigation {
151
	display:none;
152
	position: fixed;
153
	right:0;
154
	top:100px;
155
	padding:20px;
156
	background:#cc0;
157
	z-index:100;
158
	line-height:160%;
159
	a {
160
		color:$black;
161
		&:hover { color:$white }
162
		&.open { color:$white;}
163
		&.close {
164
			float:right;
165
			font-weight:bold;
166
			font-size:20px;
167
		}
168
	}
169
}
170

    
171
.ours {
172
	padding:8px 15px;
173
	color:$white;
174
	font-size:20px;
175
	font-weight:bold;
176
	background:#cc0;
177
	display:none;
178
	position: absolute;
179
	&.questions { background:orange;}
180
	&.problems { background:red;}
181
	&.suggestions { background:#3EC9FF;}
182

    
183
}
184

    
185

    
186
.row-full {
187
	width:$row-top-width;
188
	margin:0 auto;
189
}
190

    
191
.lt-sidebar {
192
	width:250px;
193
	float:left;
194
	
195
	&+.main {
196
		overflow:hidden;
197
	}
198
}
199

    
200
.main {
201
	padding:20px 40px;
202
}
203

    
204
body.with-overlay {
205
	background:$secondary-color;
206
}
207

    
208
.header {
209
	position:relative;
210
	padding:$header-padding-vertical $header-padding-horizontal;
211
	border-bottom:1px solid $primary-color;
212
	background:$white;
213
	.logo {
214
		text-align: center;
215
	}
216
	.actions {
217
		text-align:center;
218
		height:45px;
219
		line-height:45px;
220
		position:relative;
221
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
222
		.main-actions {
223
			display: none;
224
		}
225
		ul {
226
			margin:0;
227
			li {
228
				list-style: none outside none;
229
				display: inline-block;
230
				margin:0 5px;
231
				a {
232
					display: block;
233
					width:100%;
234
					padding:8px 20px;
235
					border:1px solid transparent;
236
					&:hover {
237
						border:1px solid $secondary-color;
238
					}
239
				}
240
			}
241
		}
242
	}
243
	.new-btn {
244
		position: absolute;
245
		left:0;
246
		bottom:0;
247
		a {
248
			@extend .btn1;
249
			span {
250
				font-size:emCalc(20px);
251
			}
252
		}
253
	}
254
}
255
.login {
256
	position:absolute;
257
	right:$header-padding-horizontal;
258
	top:$header-padding-vertical;
259
}
260

    
261
.top-nav {
262
	position:absolute;
263
	left:$header-padding-horizontal;
264
	top:$header-padding-vertical;
265
	ul {
266
		@include marginPaddingZero();
267
		li {
268
			display: inline-block;
269
			margin-right:15px;
270
			a {
271
				padding-bottom:5px;
272
			}
273
		}
274
	}
275

    
276
}
277

    
278

    
279
// info styling
280

    
281
.top-info {
282
	padding:50px 100px;
283
	position: relative;
284
	.close {
285
		position: absolute;
286
		right:$header-padding-horizontal;
287
		top:50px;
288
		@include sprite('../images/info-close.png', 31px, 30px);
289
	}
290
}
291

    
292

    
293
.info.error {
294
	background:$error-color;
295
	color:$white;
296
}
297

    
298

    
299
.info.alert {
300
	background:$alert-color;
301
	color:$white;
302
}
303

    
304
.info.warning {
305
	background:$primary-color;
306
	color:$white;
307
}
308

    
309
.info.success {
310
	background:$success-color;
311
	color:$white;
312
}
313

    
314
.items-list {
315
	padding:50px 0;
316
	li {
317
		text-align:center;
318
		padding:20px;
319
		.visible-info {
320
			span {
321
				display: block;
322
			}
323
		}
324
	}
325
}
326

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

    
351
.lt-sidebar.vms {
352
	overflow:scroll;
353
	height:300px;
354
	font-size:emCalc(12px);
355
	.items-list {
356
		padding:0;
357
	}
358
	.items-list li .img, 
359
	.items-list li .os {
360
		background-size:80%;
361
	}
362
	li:hover,
363
	li.current {
364
		background:lighten($primary-color,30%);
365
		cursor: pointer;
366
	}
367
}
368

    
369
.vm {
370
	.img {
371
				@include sprite('../images/vm-on.png', 56px, 58px);
372
				margin-bottom: 20px;
373
				position: relative;
374
				&.stopped {
375
					background-image:url('../images/vm-stopped.png');
376
				}
377
				.os {
378
					@include sprite('../images/os-unknown.png', 22px, 22px);
379
					position: absolute;
380
					top:8px;
381
					left:18px;
382
					&.windows { background-image:url('../images/os-windows.png'); }
383
					&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
384
					&.fedora { background-image:url('../images/os-fedora.png'); }
385
				}
386
			}
387
}
388

    
389
.details {
390
	position:relative;
391
		
392
	.top {
393
		padding:100px $header-padding-horizontal;
394
		text-align: center;
395
		.img {
396
			@include sprite('../images/vm-on.png', 112px, 116px);
397
			background-size:100%;
398
		}
399
		.os {
400
			background-size:100%;
401
			width:44px;
402
			height:44px;
403
			left:36px;
404
			top:16px;
405
		}
406
		.actions {
407
			ul {
408
				padding:1em;
409
				text-align:center;
410
				li {
411
					list-style: none outside none;
412
					display: inline-block;
413
					margin:0 10px;
414
					min-width: 112px;
415
					a {
416
						@extend .btn1;
417
					}
418

    
419
				}
420
			}
421
		}
422
		
423
	}
424
	.info {
425
		dl {
426
			margin:0;
427
			dt {
428
				display: inline-block;
429
				width:25%;
430
				float:left;
431
			}
432
		}
433
	}
434
	.close {
435
		position: absolute;
436
		right:$header-padding-horizontal;
437
		top:50px;
438
		@include sprite('../images/info-close-grey.png', 31px, 30px);
439
	}
440
}
441

    
442
.border-bottom-style1 {
443
	padding-bottom:20px;
444
	margin-bottom:20px;
445
	border-bottom:2px dashed $primary-color;
446
}
447

    
448
.overlay {
449
	background:$secondary-color;
450
	.lt-sidebar {
451
		border-right:1px solid $white;
452
		ul {
453
			li {
454
				list-style:none outside none;
455
				a {
456
					color:$white;
457
					span { float:right; display:none;}
458
					&:hover,
459
					&.current {
460

    
461
						text-decoration: none;
462
						span { 
463
							display:inline;
464
						}
465
					}
466
				}
467

    
468
			}
469
		}
470

    
471
	}
472
	.lt-sidebar, 
473
	.main {
474
		padding:100px $header-padding-horizontal;
475
		position:relative;
476
	}
477
	.navigation {
478
		.rt {
479
			float:right;
480
		}
481
	}
482
	.close {
483
		position: absolute;
484
		right:$header-padding-horizontal;
485
		top:50px;
486
		@include sprite('../images/info-close.png', 31px, 30px);
487
	}
488
}
489

    
490
.create-vm {
491
	.select-os {
492
		li {
493
			width:23%;
494
			padding:20px;
495
			list-style:none outside none;
496
			display: inline-block;
497
			float: left;
498
			height: 200px;
499
			margin:0 10px 10px 0;
500
			&:hover,
501
			&.selected {
502
				background:$white;
503
				h2, p, a {
504
					color:$secondary-color;
505
				}
506
			}
507
			a {
508
				color:$white;
509
			}
510
			.os {
511
				@include sprite('../images/os-unknown.png', 30px, 30px);
512
				background-size:100%;
513
				margin-bottom:2em;
514
				&.windows { background-image:url('../images/os-windows.png'); }
515
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
516
				&.fedora { background-image:url('../images/os-fedora.png'); }
517
			}
518
			h2 {
519
				font-size:emCalc(16px);
520
				font-weight:normal;
521
				color:$white;
522
			}
523
			.details {
524
				font-weight:bold;
525
				font-size:emCalc(14px);
526
			}
527
		}
528
	}
529
	.select-flavor {
530
		dl {
531
			color:$white;
532
			font-size:emCalc(20px);
533
			margin-bottom:10px;
534
			dd {
535
				width:23%;
536
				display: inline-block;
537
			}
538
			dt {
539
				width:70%;
540
				display: inline-block;
541
				font-weight: normal;
542
				span {
543
					@extend .btn3;
544
					min-width: 90px;
545
					margin:0 10px;
546
					&:first-child {
547
						margin-left:0;
548
					}
549
				}
550
			}
551
		}
552
	}
553
}
554

    
555