Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 05689a8e

History | View | Annotate | Download (12.4 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
			float:left;
259
			position:relative;
260
			width:$row-width;
261
			.os {
262
				li {
263
					list-style: none outside none;
264
					@extend .clearfix;
265
					padding:0.5em 0;
266
					&:hover,
267
					&.hover {
268
						background:$overlay-darker-color;
269
					}
270
					&.current {
271
						background:white;
272
						color:$overlay-color;
273
						.name-col {
274
							color:$overlay-color;
275
						}
276
						.btn-col {
277
							a {
278
								@extend .btn5;
279
								border-color:$overlay-color;
280
								color:$overlay-color;
281
								&.current {
282
									color:white;
283
									background:$overlay-color;
284
								}
285
							}
286
						}
287
					}
288
					.img-col {
289
						float:left;
290
						width:10%;
291
						padding-right:10px;
292
					}
293
					.name-col {
294
						float: left;
295
						color: $wizard-base-font-color;
296
						width:65%;
297
						padding-right:10px;
298
					}
299
					.size-col {
300
						float:left;
301
						width:10%;
302
					}
303
					.btn-col {
304
						float:left;
305
						width:10%;
306
						margin-left:10px;
307
						a {
308
							@extend .btn5;
309
							&.current {
310
								color:$overlay-color;
311
							}
312
						}
313
					}
314
					.details {
315
						display: none;
316
						background:darken(white,10%);
317
						padding:30px 0;
318
						margin:20px 6px 6px;
319
						color: $body-font-color;
320
						h3 {
321
							font-size: 1em;
322
						}
323
						dl {
324
							@extend .clearfix;
325
							dt {
326
								width: 20%;
327
								float:left;
328
								font-weight:normal;
329
							}
330
							dd {
331
								margin:0 0 5px;
332
							}
333
						}
334
					}
335
				}
336
			}
337
			.flavor {
338
				list-style: none outside none;
339
				li {
340
					list-style:none outside none;
341
					margin-bottom:1.5em;
342
					.title {
343
						@extend .clearfix;
344
						margin-bottom:emCalc(5px);
345
						color:white;
346
						vertical-align: top;
347
						.icon {
348
							display: block;
349
							width:5%;
350
							font-size:emCalc(40px);
351
							float: left;
352
						}
353
						h2 {
354
							font-size:emCalc(16px);
355
							span {
356
								font-weight:normal;
357
							}
358
							float:left;
359
							width: 19%;
360
							color:white;
361
							margin-right:4%;
362
							padding-left:emCalc(10px);
363
							&:hover {
364
								& + p {
365
									visibility: visible;
366
								}
367
							}
368
						}
369
						p {
370
							visibility: hidden;
371
							float:left;
372
							width:70%;
373
							font-size:emCalc(12px);
374
						}
375
					}
376
					.options-bar {
377
						@extend .clearfix;
378
						.bar {
379
							width:24%;
380
							float: left;
381
							margin-right:4%;
382
							height: 26px;
383
							position: relative;
384
							top:2px;
385
							.wrap {
386
								border:1px solid white;
387
								padding:1px;
388
								height: 100%;
389
								.container {
390
									height: 100%;
391
									.total {
392
										background:$primary-color;
393
										height: 100%;
394
										float:left;
395
										position: relative;
396
										.current {
397
											background:white;
398
											height: 100%;
399
											float:left;
400
										}
401
										span {
402
											position:absolute;
403
											right:10px;
404
											color:$black;
405
											font-size: emCalc(12px);
406
										}
407
										&.low {
408
											span {
409
												right:-30px;
410
												color:white;
411
											}
412
										}
413
									}
414
								}
415
							}
416
						}
417
						.options {
418
							overflow:hidden;
419
							list-style: none outside none;
420
							li {
421
								list-style: none outside none;
422
								display: inline-block;
423
								margin-right: 10px;
424
								a {
425
									@extend .btn5;
426
									min-width: 60px;
427
									&.current {
428
										color:$overlay-color;
429
									}
430
								}
431
							}
432
						}
433
					}
434
				}
435
			}
436
			.summary {
437
				.row {
438
					padding-top:1em;
439
					margin-top:1em;
440
					border-top:1px solid white;
441
					&:first-child {
442
						border-top:0 none;
443
					}
444
				}
445
				h2 {
446
					font-size:1em;
447
					color:white;
448
				}
449
				dl {
450
					margin-bottom:0;
451
					span {
452
						margin-right:10px;
453
						font-size:20px;
454
					}
455
					dt {
456
						display: inline-block;
457
						width: 45%;
458
						vertical-align: top;
459
					}
460
					dd {
461
						display: inline-block;
462
						width:45%;
463
					}
464
				}
465
			}
466
			.advanced-conf-step {
467
				color: $wizard-base-font-color;
468
				h2 {
469
					color: $wizard-base-font-color;
470
					font-size: 1em;
471
					margin:0 auto 1em;
472
				}
473
				p {
474
					font-size: $wizard-paragraph-font-size;
475
				}
476
				.expand-btn {
477
					margin: 50px 0 30px;
478
					a {
479
						color:$wizard-base-font-color;
480
						&:focus {
481
							border: 1px solid #91969a;
482
							padding: 2px;
483
						}
484
					}
485

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

    
580
					}
581
					.tags-area {
582
						background-color: $tag-opt-area-color;
583
						.snf-color-picker {
584
							display: none;
585
						}
586
						#picker {
587
							position: relative;
588
							width: 207px;
589
							margin: 30px 5px;
590
							display: inline-block;
591
						}
592
						.form-item {
593
							//display:inline-block;
594
							// position: relative;
595
							// bottom: 20px;
596
						
597
						}
598
						.btns {
599
							// position: relative;
600
							// bottom: -45px;
601
							// margin-bottom: 45px;
602
							margin-top: 77px;
603
							margin-bottom: 30px;
604
						}
605
						.btn5 {
606
							margin-right:20px;
607
						}
608

    
609
					}
610

    
611
				}
612
			}
613
		}
614
		
615
	}
616
	.bottom {
617
		position: fixed;
618
		left:0;
619
		right:0;
620
		bottom:0;
621
		border-top:1px solid $black;
622
		background:$overlay-color;
623
		.row {
624
			height: $bar-height;
625
			line-height: $bar-height;
626
		}
627
		.nav {
628
			height: $bar-height;
629
			line-height: $bar-height;
630
			color:white;
631
			display: inline-block;
632
			position: relative;
633
			font-size: emCalc(12px);
634
			top:($bar-height - 30px)/2;
635
			width: 100px;
636
			&:hover {
637
				@include transition(background, 0ms, ease-out);
638
			}
639
			span {
640
				display: inline-block;
641
				height: 30px;
642
				line-height:30px;
643
				float: left;
644
				&:hover {
645
					@include transition(background, 0ms, linear);
646
				}
647
			}
648
		}
649
		.prev {
650
			float:left;
651
			height:30px;
652
			padding-left:18px;
653
			background:url('../images/nav-edge-lt.png') no-repeat left top;
654
			span {
655
				padding-right:10px;
656
				background:url('../images/nav-lt.png') no-repeat right top;
657
			}
658
			&:hover,
659
			&.active {
660
				background-position:left bottom;
661
				span {
662
					background-position:right bottom;
663
				}
664
			}
665
		}
666
		.next {
667
			float:right;
668
			height:30px;
669
			padding-right:18px;
670
			background:url('../images/nav-edge-rt.png') no-repeat right top;
671
			span {
672
				padding-left:10px;
673
				background:url('../images/nav-rt.png') no-repeat left top;
674
				float: right;
675
			}
676
			&:hover,
677
			&.active {
678
				background-position:right bottom;
679
				span {
680
					background-position:left bottom;
681
					float:right;
682
				}
683
			}
684
		}
685
	}
686
}
687

    
688
.wizard-content {
689
	overflow: hidden;
690
	width:100%;
691
}
692

    
693
.vm-wizard-carousel {
694
	width: 90000px;
695
	position:relative;
696
}
697

    
698

    
699
/* Responive ------------------------------------------------ */
700
@media only screen and (max-width: $small-mobile) {
701
}
702

    
703
@media only screen and (max-width: $small-screen) {
704
	.wizard {
705
		.top {
706
			position: static;
707
		}
708
		.middle {
709
			padding-top:0;
710
		}
711
	}
712
	.overlay-wrapper {
713
		.overlay-area {
714
			top:0;
715
		}
716
	}
717
}