Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (13 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:43px 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
		img {
216
			max-height: 30px;			
217
		}
218
	}
219
	.actions {
220
		text-align:center;
221
		height:45px;
222
		line-height:45px;
223
		position:relative;
224
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
225
		.main-actions {
226
			position:relative;
227
			top:86px;
228
			margin:0 -40px;
229
			border-bottom:1px solid lighten($primary-color,20%);
230
		}
231
		ul {
232
			margin:0;
233
			li {
234
				list-style: none outside none;
235
				display: inline-block;
236
				margin:0 5px;
237
				a {
238
					display: block;
239
					color:lighten($primary-color,30%);
240
					width:100%;
241
					padding:8px 20px;
242
					border:1px solid transparent;
243
					&.active {
244
						color:$primary-color;
245
						&:hover {
246
							border:1px solid $secondary-color;
247
							cursor: pointer;
248
						}
249
					}
250
					&:hover {
251
						cursor:default;
252
					}
253

    
254
				}
255
			}
256
		}
257
	}
258
	.new-btn {
259
		position: absolute;
260
		left:0;
261
		bottom:0;
262
		a {
263
			@extend .btn1;
264
			span {
265
				font-size:emCalc(20px);
266
			}
267
		}
268
	}
269
}
270
.login {
271
	position:absolute;
272
	right:$header-padding-horizontal;
273
	top:$header-padding-vertical;
274
}
275

    
276
.top-nav {
277
	position:absolute;
278
	left:$header-padding-horizontal;
279
	top:$header-padding-vertical;
280
	ul {
281
		@include marginPaddingZero();
282
		li {
283
			display: inline-block;
284
			margin-right:15px;
285
			a {
286
				padding-bottom:5px;
287
			}
288
		}
289
	}
290

    
291
}
292

    
293

    
294
// info styling
295

    
296
.top-info {
297
	padding:50px 100px;
298
	position: relative;
299
	display:none;
300
	.close {
301
		position: absolute;
302
		right:$header-padding-horizontal;
303
		top:50px;
304
		@include sprite('../images/info-close.png', 31px, 30px);
305
	}
306
}
307

    
308

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

    
314

    
315
.info.alert {
316
	background:$alert-color;
317
	color:$white;
318
}
319

    
320
.info.warning {
321
	background:$primary-color;
322
	color:$white;
323
}
324

    
325
.info.success {
326
	background:$success-color;
327
	color:$white;
328
}
329

    
330

    
331
.items-list {
332
	padding:25px 0;
333
	li {
334
		text-align:center;
335
		padding:20px;
336
		.add-new {
337
			a {
338
				margin:0 20px;
339
				display: block;
340
				font-weight: bold;
341
				height:190px;
342
				padding:65px 30px 15px;
343
				border:2px dashed $primary-color;
344
				&:hover {
345
					border-color:$secondary-color;
346
					color:$secondary-color;
347
				}
348
			}			
349
		}
350
		.img-wrap {
351
			height: 78px;
352
		}
353
		.img {
354
			margin-bottom: 20px;
355
			position: relative;
356
			height:58px;
357
		}
358
		.container {
359
			&.set-bg {	background:lighten($primary-color,30%); }
360
			&.set-border {	border-color:$secondary-color; }
361
			border:1px solid transparent;
362
			margin: 0 20px;
363
			padding:25px 0;
364
			position: relative;
365
			.options {
366
				width:100%;
367
				text-align:center;	
368
				position: absolute;
369
				top:-3px;
370
				left:0;
371
				display: none;
372
				z-index: 1;
373
				.wrap {
374
					height:100%;
375
					padding:25px;
376
					text-align: left;
377
					a {
378
						font-size:emCalc(27px);
379
						display: block;
380
						color:$primary-color;
381
						line-height: 1em;
382
						margin-bottom:10px;
383

    
384
						font-weight: bold;
385
						&:hover {
386
							color: $secondary-color;
387
						}
388
					}
389
				}
390
			}
391
		}
392
		.check {
393
			position:absolute;
394
			right:10px;
395
			top:5px;
396

    
397
			color:lighten($primary-color,35%);
398
			font-weight: bold;
399
			font-size:emCalc(27px);
400
			cursor: pointer;
401
			z-index: 10;
402
			span { position:relative; z-index:10;}
403
			&.active {
404
				color:$secondary-color;
405
			}
406
		}
407
		.visible-info {
408
			margin: 0 25px;
409
			position:relative;
410
			color:$primary-color;
411
			overflow: hidden;
412
			span {
413
				&.title {
414
					white-space: nowrap;
415
				}
416
				display: block;
417
				position: relative;
418
				em {
419
					font-style:normal;
420
					position: relative;
421
				}
422
			}
423
		}
424

    
425
	}
426
}
427

    
428
.lt-sidebar {
429
	margin-top:43px;
430
	overflow:scroll;
431
	height:300px;
432
	font-size:emCalc(12px);
433
	.items-list {
434
		padding:0;
435
	}
436
	.items-list li .img, 
437
	.items-list li .os {
438
		background-size:80%;
439
	}
440
	li:hover {
441
		background:lighten($primary-color,35%);
442
	}
443
	li.current {
444
		background:lighten($primary-color,30%);
445
		cursor: pointer;
446

    
447
	}
448

    
449
}
450

    
451
.vms .items-list {
452
	.img {
453
			@include sprite('../images/vm-on.png', 56px, 58px);
454
			 
455
			&.stopped {
456
				background-image:url('../images/vm-stopped.png');
457
			}
458
			.os {
459
				@include sprite('../images/os-unknown.png', 22px, 22px);
460
				position: absolute;
461
				top:8px;
462
				left:18px;
463
				&.windows { background-image:url('../images/os-windows.png'); }
464
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
465
				&.fedora { background-image:url('../images/os-fedora.png'); }
466
			}
467
		
468
		}
469
}
470

    
471

    
472
.vm {
473
	.top {
474
		.img {
475
			@include sprite('../images/vm-on.png', 112px, 116px);
476
		}
477
		&.stopped {
478
			background-image:url('../images/vm-stopped.png');
479
		}
480
		.os {
481
			@include sprite('../images/os-unknown.png', 22px, 22px);
482
			position: absolute;
483
			background-size:100%;
484
			width:44px;
485
			height:44px;
486
			left:36px;
487
			top:16px;
488
			&.windows { background-image:url('../images/os-windows.png'); }
489
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
490
			&.fedora { background-image:url('../images/os-fedora.png'); }
491
		}
492
	}
493
}
494

    
495
.details {
496
	position:relative;
497
		
498
	.top {
499
		padding:100px $header-padding-horizontal;
500
		text-align: center;
501
		.img {
502
			background-size:100%;
503
			margin-bottom: 20px;
504
			position: relative;
505
		}
506
		.actions {
507
			ul {
508
				padding:1em;
509
				text-align:center;
510
				li {
511
					list-style: none outside none;
512
					display: inline-block;
513
					margin:0 10px;
514
					min-width: 112px;
515
					a {
516
						@extend .btn1;
517
					}
518

    
519
				}
520
			}
521
		}
522
		
523
	}
524
	.info {
525
		dl {
526
			margin:0;
527
			dt {
528
				display: inline-block;
529
				width:25%;
530
				float:left;
531
			}
532
		}
533
	}
534
	.close {
535
		position: absolute;
536
		right:$header-padding-horizontal;
537
		top:50px;
538
		@include sprite('../images/info-close-grey.png', 31px, 30px);
539
	}
540
}
541

    
542

    
543

    
544

    
545

    
546
.border-bottom-style1 {
547
	padding-bottom:20px;
548
	margin-bottom:20px;
549
	border-bottom:1px dashed $primary-color;
550
}
551

    
552
.overlay {
553
	background:$secondary-color;
554
	position: relative;
555
	z-index:1;
556
	.lt-sidebar {
557
		border-right:1px solid $white;
558
		ul {
559
			li {
560
				list-style:none outside none;
561
				a {
562
					color:$white;
563
					span { float:right; display:none;}
564
					&:hover,
565
					&.current {
566

    
567
						text-decoration: none;
568
						span { 
569
							display:inline;
570
						}
571
					}
572
				}
573

    
574
			}
575
		}
576

    
577
	}
578
	.lt-sidebar, 
579
	.main {
580
		padding:100px $header-padding-horizontal;
581
		position:relative;
582
	}
583
	.navigation {
584
		.rt {
585
			float:right;
586
		}
587
	}
588
	.close {
589
		position: absolute;
590
		right:$header-padding-horizontal;
591
		top:50px;
592
		@include sprite('../images/info-close.png', 31px, 30px);
593
	}
594
}
595

    
596
.create-vm {
597
	.select-os {
598
		li {
599
			width:23%;
600
			padding:20px;
601
			list-style:none outside none;
602
			display: inline-block;
603
			float: left;
604
			height: 200px;
605
			margin:0 10px 10px 0;
606
			&:hover,
607
			&.selected {
608
				background:$white;
609
				h2, p, a {
610
					color:$secondary-color;
611
				}
612
			}
613
			a {
614
				color:$white;
615
			}
616
			.os {
617
				@include sprite('../images/os-unknown.png', 30px, 30px);
618
				background-size:100%;
619
				margin-bottom:2em;
620
				&.windows { background-image:url('../images/os-windows.png'); }
621
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
622
				&.fedora { background-image:url('../images/os-fedora.png'); }
623
			}
624
			h2 {
625
				font-size:emCalc(16px);
626
				font-weight:normal;
627
				color:$white;
628
			}
629
			.details {
630
				font-weight:bold;
631
				font-size:emCalc(14px);
632
			}
633
		}
634
	}
635
	.select-flavor {
636
		dl {
637
			color:$white;
638
			font-size:emCalc(20px);
639
			margin-bottom:10px;
640
			dd {
641
				width:23%;
642
				display: inline-block;
643
			}
644
			dt {
645
				width:70%;
646
				display: inline-block;
647
				font-weight: normal;
648
				span {
649
					@extend .btn3;
650
					min-width: 90px;
651
					margin:0 10px;
652
					&:first-child {
653
						margin-left:0;
654
					}
655
				}
656
			}
657
		}
658
	}
659
}
660

    
661
#vm-connect {
662
	.info {
663
		font-style:italic;
664
		font-size:emCalc(13px);
665
		color: lighten($primary-color,5%);
666
	}
667
	.ssh {
668
		text-align: center;
669
		span {
670
			padding: 10px 30px;
671
			background:$secondary-color;
672
			color:$white;
673
		}
674
	}
675
	a:hover { color: $secondary-color;}
676
}
677

    
678
.editable {
679
	text-align:center;
680
	input, em {
681
		width:70%;
682
		padding:5px 10px;
683
		height: auto;
684
		display: block;
685
		margin:0 auto;
686
		font-size: inherit;
687
	}
688
	input {
689
		display: none;
690
	}
691
	em {
692
 		overflow: hidden;
693
		white-space: nowrap;
694
		font-style:normal;
695
		
696
	}
697
}
698

    
699