Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (10.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 {
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;
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
				}
413
				.btn5 {
414
				    &:hover {
415
					    color:white;
416
				}
417
				    &.current, &.current:hover {
418
				        color:$overlay-color;
419
				    }
420
			    }
421
				.advanced-conf-options {
422
					display: none;
423
					.area {
424
						padding:30px 0;
425
						.row {
426
							width:$row-small;
427
						}
428
						ul {
429
							li {
430
								position: relative;
431
								list-style:none outside none;
432
								margin-bottom:7px;
433
								&.checkbox {
434
									&:hover {
435
										cursor: pointer;
436
									}
437
								}
438
								h3 {
439
									width: $conf-area-h-width;
440
									color:white;
441
									font-size:1em;
442
									font-weight: normal;
443
									margin:0 20px 0 0;
444
									display: inline-block;
445
								}
446
							}
447
						}
448
					}
449
					.ssh-keys-area {
450
						background-color: $ssh-opt-area-color;
451
					}
452
					.networks-area {
453
						background-color: $net-opt-area-color;
454
						li {
455
							.net-icons {
456
								padding-right:20px;
457
								position:absolute;
458
								left:-200px;
459
								top:-12px;
460
								width:200px;
461
								text-align: right;
462
								font-size:30px;
463
								span {
464
									margin-left:6px;
465
									&.snf-modem {
466
										position: relative;
467
										top:-6px;
468
									}
469
								}
470
							}
471
							&.more {
472
								display: none;
473
								background:$net-more-opt-area-color;
474
								margin-bottom:1em;
475
								padding:30px 0;
476
								color:$net-opt-area-color;
477
								h3 {
478
									color:$net-opt-area-color;
479
								}
480
								.btn5 {
481
									margin-top:1em;
482
									border-color:$net-opt-area-color;
483
									color:$net-opt-area-color;
484
								}
485
							}
486
						}
487

    
488
					}
489
					.tags-area {
490
						background-color: $tag-opt-area-color;
491
						.snf-color-picker {
492
							display: none;
493
						}
494
						#picker {
495
							position: relative;
496
							width: 207px;
497
							margin: 30px 5px;
498
							display: inline-block;
499
						}
500
						.form-item {
501
							display:inline-block;
502
							position: relative;
503
							bottom: 40px;
504
						}
505
						.btn5 {
506
							margin-right:20px;
507
						}
508

    
509
					}
510

    
511
				}
512
			}
513
		}
514
	}
515
	.bottom {
516
		position: fixed;
517
		left:0;
518
		right:0;
519
		bottom:0;
520
		border-top:1px solid $black;
521
		background:$overlay-color;
522
		.row {
523
			height: $bar-height;
524
			line-height: $bar-height;
525
		}
526
		.nav {
527
			height: $bar-height;
528
			line-height: $bar-height;
529
			color:white;
530
			display: inline-block;
531
			position: relative;
532
			font-size: emCalc(12px);
533
			top:($bar-height - 30px)/2;
534
			span {
535
				display: inline-block;
536
				height: 30px;
537
				line-height:30px;
538
				float: left;
539
			}
540
		}
541
		.prev {
542
			float:left;
543
			height:30px;
544
			padding-left:19px;
545
			background:url('../images/nav-edge-lt.png') no-repeat left top;
546
			span {
547
				padding-right:10px;
548
				background:url('../images/nav-lt.png') no-repeat right top;
549
			}
550
			&:hover {
551
				background-position:left bottom;
552
				@include transition(background, 0, ease-out);
553
				span {
554
					background-position:right bottom;
555
					@include transition(background, 0, ease-out);
556
				}
557
			}
558
		}
559
		.next {
560
			float:right;
561
			height:30px;
562
			padding-right:19px;
563
			background:url('../images/nav-edge-rt.png') no-repeat right top;
564
			span {
565
				padding-left:10px;
566
				background:url('../images/nav-rt.png') no-repeat left top;
567
			}
568
			&:hover {
569
				background-position:right bottom;
570
				@include transition(background, 0, ease-out);
571
				span {
572
					background-position:left bottom;
573
					@include transition(background, 0, ease-out);
574
				}
575
			}
576
		}
577
		.nums {
578
			text-align: center;
579
			list-style:none outside none;
580
			margin:0;
581
			height: $bar-height;
582
			line-height: $bar-height;
583
			font-size:emCalc(12px);
584
			li {
585
				list-style:none outside none;
586
				display: inline-block;
587
				border-radius:50%;
588
				border:1px solid $primary-color;
589
				width:25px;
590
				height:25px;
591
				line-height: 21px;
592
				margin:0 3px;
593
				a {
594
					color:$primary-color;
595
					display: block;
596
					&:hover {
597
						cursor: default;
598
					}
599
				}
600
				&.current{
601
					border-color:white;
602
					a {
603
						color:white;
604
					}
605

    
606
				}
607
				&.current {
608
					font-size:emCalc(16px);
609
					width:30px;
610
					height:30px;
611
					line-height: 27px;
612
				}
613
			}
614
		}
615
	}
616
}
617

    
618
.wizard-content {
619
	overflow: hidden;
620
	width:100%;
621
}
622

    
623
.vm-wizard-carousel {
624
	width: 90000px;
625
	position:relative;
626
}