Statistics
| Branch: | Tag: | Revision:

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

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

    
395
				.expand-btn {
396
					margin: 50px 0 30px;
397
					a {
398
						color:$wizard-base-font-color;
399
					}
400
					
401
				}
402
				.adv-main {
403
					padding: 10px 0 30px;
404
					width:$row-small;
405
					.vm-name {
406
						h2 {
407
							color:white;
408
							font-size:1em;
409
							margin-bottom:0.5em;
410
						}
411
					}
412
					// .btn5 {
413
					// 	&:hover {
414
					// 		color:white;
415
					// 	}
416
					// 	&.current, &.current:hover {
417
					// 		color:$overlay-color;
418
					// 	}
419
					// }
420
				}
421
				.advanced-conf-options {
422
					display: none;
423
					.area {
424
						padding:30px 0;
425
						.row {
426
							width:$row-small;
427
						}
428
						// .btn5{
429
						// 	&:hover {
430
						// 		color:white;
431
						// 	}
432
						// }
433
						ul {
434
							li {
435
								position: relative;
436
								list-style:none outside none;
437
								margin-bottom:7px;
438
								&.checkbox {
439
									&:hover {
440
										cursor: pointer;
441
									}
442
								}
443
								h3 {
444
									width: $conf-area-h-width;
445
									color:white;
446
									font-size:1em;
447
									font-weight: normal;
448
									margin:0 20px 0 0;
449
									display: inline-block;
450
								}
451
							}
452
						}
453
					}
454
					.ssh-keys-area {
455
						background-color: $ssh-opt-area-color;
456
					}
457
					.networks-area {
458
						background-color: $net-opt-area-color;
459
						li {
460
							.net-icons {
461
								padding-right:20px;
462
								position:absolute;
463
								left:-200px;
464
								top:-12px;
465
								width:200px;
466
								text-align: right;
467
								font-size:30px;
468
								span {
469
									margin-left:6px;
470
									&.snf-modem {
471
										position: relative;
472
										top:-6px;
473
									}
474
								}
475
							}
476
							&.more {
477
								display: none;
478
								background:$net-more-opt-area-color;
479
								margin-bottom:1em;
480
								padding:30px 0;
481
								color:$net-opt-area-color;
482
								h3 {
483
									color:$net-opt-area-color;
484
								}
485
								.btn5 {
486
									margin-top:1em;
487
									border-color:$net-opt-area-color;
488
									color:$net-opt-area-color;
489
								}
490
							}
491
						}
492

    
493
					}
494
					.tags-area {
495
						background-color: $tag-opt-area-color;
496
						dt, dd { 
497
							display:inline-block;
498
							font-weight: normal;
499
						}
500
						dt {
501
							width:45%;
502
						}
503
						dd {
504
							width:30%;
505
							padding-right: 25%;
506
						}
507
						.title {
508
							position: relative;
509
							left: -11px;
510
							font-weight: bold;
511
						}
512
						p {
513
							position:relative;
514
							left:-11px;
515
						}
516
						
517
						#picker {
518
							position: relative;
519
							border: 1px solid $wizard-base-font-color;
520
							padding: 6px;
521
							width: 207px;
522
							margin: 30px 5px;
523
							display: inline-block;
524
							// width: 195px;
525
							// margin: auto;
526
						}
527

    
528
						.form-item {
529
							// margin: auto;
530
							//width: 108px;
531
							display:inline-block;
532
							position: relative;
533
							bottom: 40px;
534
						}
535

    
536

    
537

    
538
					}
539

    
540
				}
541
			}
542
		}
543
	}
544
	.bottom {
545
		position: fixed;
546
		left:0;
547
		right:0;
548
		bottom:0;
549
		border-top:1px solid $black;
550
		background:$overlay-color;
551
		.row {
552
			height: $bar-height;
553
			line-height: $bar-height;
554
		}
555
		.nav {
556
			height: $bar-height;
557
			line-height: $bar-height;
558
			color:white;
559
			display: inline-block;
560
			position: relative;
561
			font-size: emCalc(12px);
562
			top:($bar-height - 30px)/2;
563
			span {
564
				display: inline-block;
565
				height: 30px;
566
				line-height:30px;
567
				float: left;
568
			}
569
		}
570
		.prev {
571
			float:left;
572
			height:30px;
573
			padding-left:19px;
574
			background:url('../images/nav-edge-lt.png') no-repeat left top;
575
			span {
576
				padding-right:10px;
577
				background:url('../images/nav-lt.png') no-repeat right top;
578
			}
579
			&:hover {
580
				background-position:left bottom;
581
				@include transition(background, 0, ease-out);
582
				span {
583
					background-position:right bottom;
584
					@include transition(background, 0, ease-out);
585
				}
586
			}
587
		}
588
		.next {
589
			float:right;
590
			height:30px;
591
			padding-right:19px;
592
			background:url('../images/nav-edge-rt.png') no-repeat right top;
593
			span {
594
				padding-left:10px;
595
				background:url('../images/nav-rt.png') no-repeat left top;
596
			}
597
			&:hover {
598
				background-position:right bottom;
599
				@include transition(background, 0, ease-out);
600
				span {
601
					background-position:left bottom;
602
					@include transition(background, 0, ease-out);
603
				}
604
			}
605
		}
606
		.nums {
607
			text-align: center;
608
			list-style:none outside none;
609
			margin:0;
610
			height: $bar-height;
611
			line-height: $bar-height;
612
			font-size:emCalc(12px);
613
			li {
614
				list-style:none outside none;
615
				display: inline-block;
616
				border-radius:50%;
617
				border:1px solid $primary-color;
618
				width:25px;
619
				height:25px;
620
				line-height: 21px;
621
				margin:0 3px;
622
				a {
623
					color:$primary-color;
624
					display: block;
625
					&:hover {
626
						cursor: default;
627
					}
628
				}
629
				&.current{
630
					border-color:white;
631
					a {
632
						color:white;
633
					}
634

    
635
				}
636
				&.current {
637
					font-size:emCalc(16px);
638
					width:30px;
639
					height:30px;
640
					line-height: 27px;
641
				}
642
			}
643
		}
644
	}
645
}
646

    
647
.wizard-content {
648
	overflow: hidden;
649
	width:100%;
650
}
651

    
652
.vm-wizard-carousel {
653
	width: 90000px;
654
	position:relative;
655
}