Statistics
| Branch: | Tag: | Revision:

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

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

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

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

    
428
	}
429
}
430

    
431

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

    
454
	}
455

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

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

    
470

    
471
}
472

    
473
.vms .items-list {
474
	.img {
475
			@include sprite('../images/vm-on.png', 56px, 58px);
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
				top:8px;
484
				left:18px;
485
				&.windows { background-image:url('../images/os-windows.png'); }
486
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
487
				&.fedora { background-image:url('../images/os-fedora.png'); }
488
			}
489
		
490
		}
491
}
492

    
493

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

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

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

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

    
573

    
574

    
575

    
576

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

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

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

    
605
			}
606
		}
607

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

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

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

    
708

    
709
.reveal-modal {
710
	a:hover { color: $secondary-color;}	
711
}
712

    
713

    
714
// custom modal with opaque overlay
715
.reveal-custom {
716
	position: absolute;
717
	top:100px;
718
	left:25%;
719
	z-index:99;
720
	background:yellow;
721
	width:50%;
722
	display:none;
723
}
724

    
725

    
726
.details dl {
727
	.editable {
728
		position: relative;
729
		.input-txt {
730
			width:320px;
731
		}
732
		.editbuttons {
733
			position: absolute;
734
			left:340px;
735
			top:0;
736
			a {
737
				&.save, 
738
				&.cancel { 
739

    
740
				}
741
				&:hover {
742
				
743
				}
744
			
745
			}
746
		}
747
		input[type="text"] {
748
			position:relative;
749
			height: 25px;
750
			width:298px;
751
			padding:0 10px;
752
			font-size:inherit;	
753
			margin:0;	
754
			left:-11px;
755
			top:-1px;
756
		}
757

    
758
	}
759

    
760
}
761
.editable {
762
	.editbuttons {		
763
		a {
764
			color: $secondary-color;
765
			&.save, 
766
			&.cancel { display: none; }
767
			&:hover {
768
				color:$primary-color;
769
			}
770
		
771
		}
772
	}
773
	input[type="text"] {
774
		display: none;
775
	}
776
}
777