Statistics
| Branch: | Tag: | Revision:

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

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

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

    
492
					}
493
					.tags-area {
494
						background-color: $tag-opt-area-color;
495
						.snf-color-picker {
496
							display: none;
497
						}
498
						#picker {
499
							position: relative;
500
							width: 207px;
501
							margin: 30px 5px;
502
							display: inline-block;
503
						}
504
						.form-item {
505
							//display:inline-block;
506
							// position: relative;
507
							// bottom: 20px;
508
						
509
						}
510
						.btns {
511
							// position: relative;
512
							// bottom: -45px;
513
							// margin-bottom: 45px;
514
							margin-top: 77px;
515
							margin-bottom: 30px;
516
						}
517
						.btn5 {
518
							margin-right:20px;
519
						}
520

    
521
					}
522

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

    
620
				}
621
				&.current {
622
					font-size:emCalc(16px);
623
					width:30px;
624
					height:30px;
625
					line-height: 27px;
626
				}
627
			}
628
		}
629
	}
630
}