Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (13.6 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
				float:left;
553
			}
554
		}
555
	}
556
	.close {
557
		position: absolute;
558
		right:$header-padding-horizontal;
559
		top:$header-padding-horizontal+emCalc(43px);
560
		span {
561
			font-size:emCalc(32px);
562
		}	
563
		&:hover {
564
			color:$secondary-color;
565
		}
566
	}
567
}
568

    
569

    
570

    
571

    
572

    
573
.border-bottom-style1 {
574
	padding-bottom:20px;
575
	margin-bottom:20px;
576
	border-bottom:1px dashed $primary-color;
577
}
578

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

    
594
						text-decoration: none;
595
						span { 
596
							display:inline;
597
						}
598
					}
599
				}
600

    
601
			}
602
		}
603

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

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

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

    
704

    
705
.reveal-modal {
706
	a:hover { color: $secondary-color;}	
707
}
708
.editable {
709
	text-align:center;
710
	input, em {
711
		width:70%;
712
		padding:5px 10px;
713
		height: auto;
714
		display: block;
715
		margin:0 auto;
716
		font-size: inherit;
717
	}
718
	input {
719
		display: none;
720
	}
721
	em {
722
 		overflow: hidden;
723
		white-space: nowrap;
724
		font-style:normal;
725
		
726
	}
727
}
728

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