Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 9b6be833

History | View | Annotate | Download (12.8 kB)

1
/* 
2

    
3
Overlays (Todo: clean up)
4

    
5
*/
6
// body.with-overlay {
7
// 	background:$secondary-color;
8
// }
9

    
10
.reveal-modal {
11
	h3 {
12
		font-size:1em;
13
	}
14
	a { 
15
		color: $secondary-color;
16
		&:hover {
17
			text-decoration: underline;
18
		}
19
		&.close-reveal-modal:hover {
20
			text-decoration: none;
21
			color:$secondary-color;
22
		}
23
	}	
24
}
25

    
26

    
27
// custom modal with opaque overlay
28
.reveal-custom {
29
	position: absolute;
30
	top:100px;
31
	left:25%;
32
	z-index:99;
33
	background:yellow;
34
	width:50%;
35
	display:none;
36
}
37

    
38

    
39
.overlay-wrapper {
40
	position: relative;
41
	.overlay-area {
42
		display:none;
43
		position:absolute;
44
		left:0;
45
		right:0;
46
		top:-$bar-height;
47
		width:100%;
48
		height:100%;
49
		background:$overlay-color;
50
		z-index:20;
51
	}
52
	.close {
53
		position: absolute;
54
		right:$header-padding-horizontal;
55
		top:50px;
56
		font-size:32px;
57
		color:$primary-color;
58
		&:hover, &:focus {
59
			color:white;
60
		}
61
	}
62
	.row {
63
		.close {
64
			position:static;
65
			float:right;
66
		}
67
	}
68
	.overlay-div {
69
		display: none;
70
		z-index:100;
71
		position: relative;
72
		background:#fff;
73
		top:20%; 
74
		left:25%; 
75
		width:50%;
76
		padding:25px;
77
		.buttons {
78
			a {
79
				margin-right:20px;
80
			}
81
		}
82
		&.upload-widget {
83
			background:transparent;
84
			padding:45px 0;
85
			width:80%;
86
			left:10%;
87
			border:1px solid white;
88
		}
89
		&.wizard {
90
			background:$overlay-color;
91
			padding:0 ;
92
			width:100%;
93
			top:0;
94
			left:0;
95
		}
96
	}
97
}
98

    
99

    
100
.overlay {
101
	background:$secondary-color;
102
	position: relative;
103
	// z-index:10;
104
	.lt-sidebar {
105
		border-right:1px solid #fff;
106
		color:#fff;
107
		ul {
108
			li {
109
				list-style:none outside none;
110
				
111
				a {
112
					display: block;
113
					color:#fff;
114
					span { float:right; display:none;}
115
					&:hover,
116
					&.current {
117
						text-decoration: none;
118
						span { 
119
							display:inline;
120
						}
121
					}
122
				}
123

    
124
			}
125
		}
126

    
127
	}
128
	.lt-sidebar, 
129
	.main {
130
		padding:100px $header-padding-horizontal;
131
		position:relative;
132
	}
133
	.navigation {
134
		.rt {
135
			float:right;
136
		}
137
	}
138
	.close {
139
		position: absolute;
140
		right:$header-padding-horizontal;
141
		top:50px;
142
		@include sprite('../images/info-close.png', 31px, 30px);
143
	}
144
	.close_char {
145
		background: none;
146
		text-indent: 0;
147
		font-size: 1.8em; /* for the the character e (for d we can put 2em) */
148
		color: white;
149
	}
150
}
151

    
152
.wizard {
153
	position: relative;
154
	top:0;
155
	color:white;
156
	.top {
157
		background:$overlay-color-top;
158
		height:$bar-height+$bar-submenu-height;
159
		position:fixed;
160
		left:0;
161
		top:$header-height;
162
		width:100%;
163
		z-index:40;
164
		.numbers {
165
			height:$bar-height;
166
			line-height:$bar-height;
167
			background:$overlay-darker-color;
168
		}
169
		.sub-menu {
170
			display: none;
171
			&[data-step="1"] {
172
				display: block;
173
			}
174
			ul {
175
				margin:0;
176
				padding:0;
177
				list-style: none outside none;
178
				font-size:emCalc(12px);
179
				li {
180
					display: inline;
181
					margin-right:10px;
182
					line-height: $bar-submenu-height;
183
					list-style: none outside none;
184
					a {
185
						color:$black;
186
						&:hover, &:focus, &.current {
187
							color:white;
188
						}
189
						&.current {
190
							text-decoration: underline;
191
						}
192
					}
193
				}
194
			}
195
		}
196
		.nums {
197
			text-align: right;
198
			list-style:none outside none;
199
			margin:0;
200
			height: $bar-height;
201
			line-height: $bar-height;
202
			font-size:emCalc(12px);
203
			padding-right:120px;
204
			color:$secondary-color;
205
			li {
206
				list-style:none outside none;
207
				display: inline;
208
				p {
209
					display: none;
210
					position: relative;
211
					top: 1px;
212
					strong {
213
						font-size:16px;
214
						margin-right:10px;
215
					}
216
				}
217
				em {
218
					display: inline-block;
219
					border-radius:50%;
220
					border:1px solid $secondary-color;
221
					width:25px;
222
					height:25px;
223
					line-height: 21px;
224
					margin:0 3px;
225
					text-align: center;
226
					font-style: normal;
227
				}
228
				a {
229
					color:$secondary-color;
230
					display: block;
231
					&:hover {
232
						cursor: default;
233
					}
234
				}
235
				&.current{
236
					float: left;
237
					p {
238
						display: inline-block;
239
					}
240
					em {
241
						font-size:emCalc(16px);
242
						width:30px;
243
						height:30px;
244
						line-height: 27px;
245
						border-color:$secondary-color;
246
						* {
247
							color:$secondary-color;
248
						}
249
					}
250
				}
251
			}
252
		}
253
	}
254
	.middle {
255
		padding-top:$bar-height+$bar-submenu-height;
256
		.step {
257
			padding:50px 0 50px;
258
			position:relative;
259
			width:$row-width;
260
			overflow:hidden;
261
			overflow-y: scroll;
262
			
263
			.os {
264
				li {
265
					list-style: none outside none;
266
					@extend .clearfix;
267
					padding:0.5em 0;
268
					&:hover,
269
					&.hover {
270
						background:$overlay-darker-color;
271
					}
272
					&.current {
273
						background:white;
274
						color:$overlay-color;
275
						.name-col {
276
							color:$overlay-color;
277
						}
278
						.btn-col {
279
							a {
280
								@extend .btn5;
281
								border-color:$overlay-color;
282
								color:$overlay-color;
283
								&.current {
284
									color:white;
285
									background:$overlay-color;
286
								}
287
							}
288
						}
289
					}
290
					.img-col {
291
						float:left;
292
						width:10%;
293
						padding-right:10px;
294
					}
295
					.name-col {
296
						float: left;
297
						color: $wizard-base-font-color;
298
						width:65%;
299
						padding-right:10px;
300
					}
301
					.size-col {
302
						float:left;
303
						width:10%;
304
					}
305
					.btn-col {
306
						float:left;
307
						width:10%;
308
						margin-left:10px;
309
						a {
310
							@extend .btn5;
311
							&.current {
312
								color:$overlay-color;
313
							}
314
						}
315
					}
316
					.details {
317
						display: none;
318
						background:darken(white,10%);
319
						padding:30px 0;
320
						margin:20px 6px 6px;
321
						color: $body-font-color;
322
						h3 {
323
							font-size: 1em;
324
						}
325
						dl {
326
							@extend .clearfix;
327
							dt {
328
								width: 20%;
329
								float:left;
330
								font-weight:normal;
331
							}
332
							dd {
333
								margin:0 0 5px;
334
							}
335
						}
336
					}
337
				}
338
			}
339
			.flavor {
340
				list-style: none outside none;
341
				li {
342
					list-style:none outside none;
343
					margin-bottom:1.5em;
344
					.title {
345
						@extend .clearfix;
346
						margin-bottom:emCalc(5px);
347
						color:white;
348
						vertical-align: top;
349
						.icon {
350
							display: block;
351
							width:5%;
352
							font-size:emCalc(40px);
353
							float: left;
354
						}
355
						h2 {
356
							font-size:emCalc(16px);
357
							span {
358
								font-weight:normal;
359
							}
360
							float:left;
361
							width: 19%;
362
							color:white;
363
							margin-right:4%;
364
							padding-left:emCalc(10px);
365
							&:hover {
366
								& + p {
367
									visibility: visible;
368
								}
369
							}
370
						}
371
						p {
372
							visibility: hidden;
373
							float:left;
374
							width:70%;
375
							font-size:emCalc(12px);
376
						}
377
					}
378
					.options-bar {
379
						@extend .clearfix;
380
						.bar {
381
							width:24%;
382
							float: left;
383
							margin-right:4%;
384
							height: 26px;
385
							position: relative;
386
							top:2px;
387
							.wrap {
388
								border:1px solid white;
389
								padding:1px;
390
								height: 100%;
391
								&.disabled-progress-bar {
392
									border-color: #3a4046;
393
									.container{
394
										.total {
395
											background-color: #3a4046;
396
										}
397
									}
398
								}
399
								.container {
400
									height: 100%;
401
									.total {
402
										background:$primary-color;
403
										height: 100%;
404
										float:left;
405
										position: relative;
406
										.current {
407
											background:white;
408
											height: 100%;
409
											float:left;
410
										}
411
										span {
412
											position:absolute;
413
											right:10px;
414
											color:$black;
415
											font-size: emCalc(12px);
416
										}
417
										&.low {
418
											span {
419
												right:-30px;
420
												color:white;
421
											}
422
										}
423
									}
424
								}
425

    
426
							}
427
						}
428
						.options {
429
							overflow:hidden;
430
							list-style: none outside none;
431
							li {
432
								list-style: none outside none;
433
								display: inline-block;
434
								margin-right: 10px;
435
								a {
436
									@extend .btn5;
437
									min-width: 60px;
438
									&.current {
439
										color:$overlay-color;
440
									}
441
								}
442
							}
443
						}
444
					}
445
				}
446
			}
447
			.summary {
448
				.row {
449
					padding-top:1em;
450
					margin-top:1em;
451
					border-top:1px solid white;
452
					&:first-child {
453
						border-top:0 none;
454
					}
455
				}
456
				h2 {
457
					font-size:1em;
458
					color:white;
459
				}
460
				dl {
461
					margin-bottom:0;
462
					span {
463
						margin-right:10px;
464
						font-size:20px;
465
					}
466
					dt {
467
						display: inline-block;
468
						width: 45%;
469
						vertical-align: top;
470
					}
471
					dd {
472
						display: inline-block;
473
						width:45%;
474
					}
475
				}
476
			}
477
			.advanced-conf-step {
478
				color: $wizard-base-font-color;
479
				h2 {
480
					color: $wizard-base-font-color;
481
					font-size: 1em;
482
					margin:0 auto 1em;
483
				}
484
				p {
485
					font-size: $wizard-paragraph-font-size;
486
				}
487

    
488
				.snf-checkbox-checked, .snf-checkbox-unchecked {
489
					color: $wizard-base-font-color;
490
				}	
491
				.expand-btn {
492
					margin: 50px 0 30px;
493
					a {
494
						color:$wizard-base-font-color;
495
					}
496

    
497
					
498
				}
499
				.adv-main {
500
					padding: 10px 0 30px;
501
					width:$row-small;
502
					.vm-name {
503
						h2 {
504
							color:white;
505
							font-size:1em;
506
							margin-bottom:0.5em;
507
						}
508
					}
509
				}
510
				.btn5 {
511
				    &:hover {
512
					    color:white;
513
				}
514
				    &.current, &.current:hover {
515
				        color:$overlay-color;
516
				    }
517
			    }
518
				.advanced-conf-options {
519
					display: none;
520
					.area {
521
						padding:30px 0;
522
						.row {
523
							width:$row-small;
524
							padding-left:0;
525
						}
526
						ul {
527
							li {
528
								position: relative;
529
								list-style:none outside none;
530
								margin-bottom:7px;
531
								&.checkbox {
532
									&:hover {
533
										cursor: pointer;
534
									}
535
								}
536
								h3 {
537
									width: $conf-area-h-width;
538
									color:white;
539
									font-size:1em;
540
									font-weight: normal;
541
									margin:0 20px 0 0;
542
									display: inline-block;
543
									//&.net-name { width: 9.063em }
544
								}
545
							}
546
						}
547
					}
548
					.ssh-keys-area {
549
						background-color: $ssh-opt-area-color;
550
					}
551
					.networks-area {
552
						background-color: $net-opt-area-color;
553
						li {
554
							.net-icons {
555
								padding-right:20px;
556
								// position:absolute;
557
								// left:-200px;
558
								// top:-12px;
559
								display: inline-block;
560
								width:145px;
561
								text-align: right;
562
								font-size:30px;
563
								margin-bottom: 0;
564
								span {
565
									margin-left:6px;
566
									&.snf-modem {
567
										position: relative;
568
										top:-6px;
569
									}
570
								}
571
							}
572
					
573
							
574
							
575
							&.more {
576
								display: none;
577
								background:$net-more-opt-area-color;
578
								margin-bottom:1em;
579
								padding:30px 0;
580
								color:$net-opt-area-color;
581
								h3 {
582
									color:$net-opt-area-color;
583
								}
584
								.btn5 {
585
									margin-top:1em;
586
									border-color:$net-opt-area-color;
587
									color:$net-opt-area-color;
588
								}
589
								.checkbox {
590
									a {
591
										span {
592
											color: $net-opt-area-color;
593
										}
594
									}
595
								}
596
							}
597
						}
598

    
599
					}
600
					.tags-area {
601
						background-color: $tag-opt-area-color;
602
						.snf-color-picker {
603
							display: none;
604
						}
605
						#picker {
606
							position: relative;
607
							width: 207px;
608
							margin: 30px 5px;
609
							display: inline-block;
610
						}
611
						.form-item {
612
							//display:inline-block;
613
							// position: relative;
614
							// bottom: 20px;
615
						
616
						}
617
						.btns {
618
							// position: relative;
619
							// bottom: -45px;
620
							// margin-bottom: 45px;
621
							margin-top: 77px;
622
							margin-bottom: 30px;
623
						}
624
						.btn5 {
625
							margin-right:20px;
626
						}
627

    
628
					}
629

    
630
				}
631
			}
632
		}
633
		
634
	}
635
	.bottom {
636
		position: fixed;
637
		left:0;
638
		right:0;
639
		bottom:0;
640
		border-top:1px solid $black;
641
		background:$overlay-color;
642
		.row {
643
			height: $bar-height;
644
			line-height: $bar-height;
645
		}
646
		.nav {
647
			height: $bar-height;
648
			line-height: $bar-height;
649
			color:white;
650
			display: inline-block;
651
			position: relative;
652
			font-size: emCalc(12px);
653
			top:($bar-height - 30px)/2;
654
			width: 100px;
655
			&:hover {
656
				@include transition(background, 0ms, ease-out);
657
			}
658
			span {
659
				display: inline-block;
660
				height: 30px;
661
				line-height:30px;
662
				float: left;
663
				&:hover {
664
					@include transition(background, 0ms, linear);
665
				}
666
			}
667
		}
668
		.prev {
669
			float:left;
670
			height:30px;
671
			padding-left:18px;
672
			background:url('../images/nav-edge-lt.png') no-repeat left top;
673
			span {
674
				padding-right:10px;
675
				background:url('../images/nav-lt.png') no-repeat right top;
676
			}
677
			&:hover,
678
			&.active {
679
				background-position:left bottom;
680
				span {
681
					background-position:right bottom;
682
				}
683
			}
684
		}
685
		.next {
686
			float:right;
687
			height:30px;
688
			padding-right:18px;
689
			background:url('../images/nav-edge-rt.png') no-repeat right top;
690
			span {
691
				padding-left:10px;
692
				background:url('../images/nav-rt.png') no-repeat left top;
693
				float: right;
694
			}
695
			&:hover,
696
			&.active {
697
				background-position:right bottom;
698
				span {
699
					background-position:left bottom;
700
					float:right;
701
				}
702
			}
703
		}
704
	}
705
}
706

    
707

    
708
.wizard-content {
709
	overflow: hidden;
710
	width:100%;
711
	.vm-wizard-carousel {
712
		position:relative;
713
		left:0;
714
		.step {
715
			float:left;
716
		}
717
	}
718
}
719

    
720
/* Responive ------------------------------------------------ */
721
@media only screen and (max-width: $small-mobile) {
722
}
723

    
724
@media only screen and (max-width: $small-screen) {
725
	.wizard {
726
		.top {
727
			position: static;
728
		}
729
		.middle {
730
			padding-top:0;
731
		}
732
	}
733
	.overlay-wrapper {
734
		.overlay-area {
735
			top:0;
736
		}
737
	}
738
}