Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (14.1 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
	max-width:$row-top-width;
188
	margin:0 auto;
189
}
190

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

    
202
.main {
203
	padding:43px 40px;
204
}
205

    
206
body.with-overlay {
207
	background:$secondary-color;
208
}
209

    
210
.header {
211
	position:relative;
212
	padding:$header-padding-vertical $header-padding-horizontal;
213
	border-bottom:1px solid $primary-color;
214
	background:$white;
215
	.logo {
216
		text-align: center;
217
		img {
218
			max-height: 30px;			
219
		}
220
	}
221
	.actions {
222
		text-align:center;
223
		height:45px;
224
		line-height:45px;
225
		position:relative;
226
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
227
		.main-actions {
228
			position:relative;
229
			top:86px;
230
			margin:0 -40px;
231
			border-bottom:1px solid lighten($primary-color,20%);
232
			z-index: 1;
233
		}
234
		ul {
235
			margin:0;
236
			li {
237
				list-style: none outside none;
238
				display: inline-block;
239
				margin:0 5px;
240
				a {
241
					display: block;
242
					color:lighten($primary-color,30%);
243
					width:100%;
244
					padding:8px 20px;
245
					border:1px solid transparent;
246
					&.active {
247
						color:$primary-color;
248
						&:hover {
249
							color:$secondary-color;
250
							cursor: pointer;
251
						}
252
					}
253
					&:hover {
254
						cursor:default;
255
					}
256

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

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

    
294
}
295

    
296

    
297
// info styling
298

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

    
311

    
312
.info.error {
313
	background:$error-color;
314
	color:$white;
315
}
316

    
317

    
318
.info.alert {
319
	background:$alert-color;
320
	color:$white;
321
}
322

    
323
.info.warning {
324
	background:$primary-color;
325
	color:$white;
326
}
327

    
328
.info.success {
329
	background:$success-color;
330
	color:$white;
331
}
332

    
333

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

    
388
						font-weight: bold;
389
						&:hover {
390
							color: $secondary-color;
391
						}
392
					}
393
				}
394
			}
395
		}
396
		.check {
397
			position:absolute;
398
			right:10px;
399
			top:5px;
400

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

    
429
	}
430
}
431

    
432

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

    
455
	}
456

    
457
	.jspDrag {
458
		background-color:$primary-color;
459
	}
460
	.jspVerticalBar {
461
		width:10px;
462
		right:4px;
463
	}
464
	.jspTrack {
465
		background:$white;
466

    
467
		border:1px solid $primary-color;
468
		border-top:1px solid lighten($primary-color,20%);
469
	}
470

    
471

    
472
}
473

    
474
.vms .items-list {
475
	.img {
476
			@include sprite('../images/vm-on.png', 56px, 58px);
477
			 
478
			&.stopped {
479
				background-image:url('../images/vm-stopped.png');
480
			}
481
			.os {
482
				@include sprite('../images/os-unknown.png', 22px, 22px);
483
				position: absolute;
484
				top:8px;
485
				left:18px;
486
				&.windows { background-image:url('../images/os-windows.png'); }
487
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
488
				&.fedora { background-image:url('../images/os-fedora.png'); }
489
			}
490
		
491
		}
492
}
493

    
494

    
495
.vm {
496
	.top {
497
		.img {
498
			@include sprite('../images/vm-on.png', 112px, 116px);
499
		}
500
		&.stopped {
501
			background-image:url('../images/vm-stopped.png');
502
		}
503
		.os {
504
			@include sprite('../images/os-unknown.png', 22px, 22px);
505
			position: absolute;
506
			background-size:100%;
507
			width:44px;
508
			height:44px;
509
			left:36px;
510
			top:16px;
511
			&.windows { background-image:url('../images/os-windows.png'); }
512
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
513
			&.fedora { background-image:url('../images/os-fedora.png'); }
514
		}
515
	}
516
}
517

    
518
.details {
519
	position:relative;
520
		
521
	.top {
522
		padding:100px $header-padding-horizontal;
523
		text-align: center;
524
		.img {
525
			background-size:100%;
526
			margin-bottom: 20px;
527
			position: relative;
528
		}
529
		.actions {
530
			ul {
531
				padding:1em;
532
				text-align:center;
533
				li {
534
					list-style: none outside none;
535
					display: inline-block;
536
					margin:0 10px;
537
					min-width: 112px;
538
					a {
539
						@extend .btn1;
540
					}
541

    
542
				}
543
			}
544
		}
545
		
546
	}
547
	.info {
548
		dl {
549
			margin:0;
550
			dt {
551
				display: inline-block;
552
				width:25%;
553

    
554
			}
555
			dd {
556
				width:74%;
557
				display: inline-block;
558
			}
559
		}
560
	}
561
	.close {
562
		position: absolute;
563
		right:$header-padding-horizontal;
564
		top:$header-padding-horizontal+emCalc(43px);
565
		span {
566
			font-size:emCalc(32px);
567
		}	
568
		&:hover {
569
			color:$secondary-color;
570
		}
571
	}
572
}
573

    
574

    
575

    
576

    
577

    
578
.border-bottom-style1 {
579
	padding-bottom:20px;
580
	margin-bottom:20px;
581
	border-bottom:1px dashed $primary-color;
582
}
583

    
584
.overlay {
585
	background:$secondary-color;
586
	position: relative;
587
	z-index:10;
588
	.lt-sidebar {
589
		border-right:1px solid $white;
590
		ul {
591
			li {
592
				list-style:none outside none;
593
				a {
594
					color:$white;
595
					span { float:right; display:none;}
596
					&:hover,
597
					&.current {
598

    
599
						text-decoration: none;
600
						span { 
601
							display:inline;
602
						}
603
					}
604
				}
605

    
606
			}
607
		}
608

    
609
	}
610
	.lt-sidebar, 
611
	.main {
612
		padding:100px $header-padding-horizontal;
613
		position:relative;
614
	}
615
	.navigation {
616
		.rt {
617
			float:right;
618
		}
619
	}
620
	.close {
621
		position: absolute;
622
		right:$header-padding-horizontal;
623
		top:50px;
624
		@include sprite('../images/info-close.png', 31px, 30px);
625
	}
626
}
627

    
628
.create-vm {
629
	.select-os {
630
		li {
631
			width:23%;
632
			padding:20px;
633
			list-style:none outside none;
634
			display: inline-block;
635
			float: left;
636
			height: 200px;
637
			margin:0 10px 10px 0;
638
			&:hover,
639
			&.selected {
640
				background:$white;
641
				h2, p, a {
642
					color:$secondary-color;
643
				}
644
			}
645
			a {
646
				color:$white;
647
			}
648
			.os {
649
				@include sprite('../images/os-unknown.png', 30px, 30px);
650
				background-size:100%;
651
				margin-bottom:2em;
652
				&.windows { background-image:url('../images/os-windows.png'); }
653
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
654
				&.fedora { background-image:url('../images/os-fedora.png'); }
655
			}
656
			h2 {
657
				font-size:emCalc(16px);
658
				font-weight:normal;
659
				color:$white;
660
			}
661
			.details {
662
				font-weight:bold;
663
				font-size:emCalc(14px);
664
			}
665
		}
666
	}
667
	.select-flavor {
668
		dl {
669
			color:$white;
670
			font-size:emCalc(20px);
671
			margin-bottom:10px;
672
			dd {
673
				width:23%;
674
				display: inline-block;
675
			}
676
			dt {
677
				width:70%;
678
				display: inline-block;
679
				font-weight: normal;
680
				span {
681
					@extend .btn3;
682
					min-width: 90px;
683
					margin:0 10px;
684
					&:first-child {
685
						margin-left:0;
686
					}
687
				}
688
			}
689
		}
690
	}
691
}
692

    
693
#vm-connect {
694
	.info {
695
		font-style:italic;
696
		font-size:emCalc(13px);
697
		color: lighten($primary-color,5%);
698
	}
699
	.ssh {
700
		text-align: center;
701
		span {
702
			padding: 10px 30px;
703
			background:$secondary-color;
704
			color:$white;
705
		}
706
	}
707
}
708

    
709

    
710
.reveal-modal {
711
	h3 {
712
		font-size:1em;
713
	}
714
	a { 
715
		color: $secondary-color;
716
		&:hover {
717
			text-decoration: underline;
718
		}
719
		&.close-reveal-modal:hover {
720
			text-decoration: none;
721
			color:$secondary-color;
722
		}
723
	}	
724
}
725

    
726

    
727
// custom modal with opaque overlay
728
.reveal-custom {
729
	position: absolute;
730
	top:100px;
731
	left:25%;
732
	z-index:99;
733
	background:yellow;
734
	width:50%;
735
	display:none;
736
}
737

    
738

    
739
.details dl {
740
	.editable {
741
		position: relative;
742
		.input-txt {
743
			display: inline-block;
744
		}
745
		.editbuttons {
746
			display: inline-block;
747
			margin-left:20px;
748
			a {
749
				&.save, 
750
				&.cancel { 
751

    
752
				}
753
				&:hover {
754
				
755
				}
756
			
757
			}
758
		}
759
		input[type="text"] {
760
			position:relative;
761
			height: 25px;
762
			width:298px;
763
			padding:0 10px;
764
			font-size:inherit;	
765
			margin:0;	
766
			left:-11px;
767
			top:-1px;
768
		}
769

    
770
	}
771

    
772
}
773
.editable {
774
	.editbuttons {		
775
		a {
776
			color: $secondary-color;
777
			&.save, 
778
			&.cancel { display: none; }
779
			&:hover {
780
				color:$primary-color;
781
			}
782
		
783
		}
784
	}
785
	input[type="text"] {
786
		display: none;
787
	}
788
}
789