Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (10.2 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
							text-decoration: underline;
185
						}
186
					}
187
				}
188
			}
189
		}
190
	}
191
	.middle {
192
		padding-top:$bar-height;
193
		.step {
194
			padding:50px 0;
195
			float:left;
196
			position:relative;
197
			width:$row-width;
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
		}
383
	}
384
	.bottom {
385
		position: fixed;
386
		left:0;
387
		right:0;
388
		bottom:0;
389
		border-top:1px solid $black;
390
		background:$overlay-color;
391
		.row {
392
			height: $bar-height;
393
			line-height: $bar-height;
394
		}
395
		.nav {
396
			height: $bar-height;
397
			line-height: $bar-height;
398
			color:white;
399
			display: inline-block;
400
			position: relative;
401
			top:($bar-height - 30px)/2;
402
			span {
403
				display: inline-block;
404
				height: 30px;
405
				line-height:30px;
406
				float: left;
407
			}
408
		}
409
		.prev {
410
			float:left;
411
			height:30px;
412
			padding-left:19px;
413
			background:url('../images/nav-edge-lt.png') no-repeat left top;
414
			span {
415
				padding-right:10px;
416
				background:url('../images/nav-lt.png') no-repeat right top;
417
			}
418
			&:hover {
419
				background-position:left bottom;
420
				@include transition(background, 0, ease-out);
421
				span {
422
					background-position:right bottom;
423
					@include transition(background, 0, ease-out);
424
				}
425
			}
426
		}
427
		.next {
428
			float:right;
429
			height:30px;
430
			padding-right:19px;
431
			background:url('../images/nav-edge-rt.png') no-repeat right top;
432
			span {
433
				padding-left:10px;
434
				background:url('../images/nav-rt.png') no-repeat left top;
435
			}
436
			&:hover {
437
				background-position:right bottom;
438
				@include transition(background, 0, ease-out);
439
				span {
440
					background-position:left bottom;
441
					@include transition(background, 0, ease-out);
442
				}
443
			}
444
		}
445
		.nums {
446
			text-align: center;
447
			list-style:none outside none;
448
			margin:0;
449
			height: $bar-height;
450
			line-height: $bar-height;
451
			li {
452
				list-style:none outside none;
453
				display: inline-block;
454
				border-radius:50%;
455
				border:1px solid $primary-color;
456
				width:25px;
457
				height:25px;
458
				line-height: 25px;
459
				margin:0 3px;
460
				a {
461
					color:$primary-color;
462
					display: block;
463
					&:hover {
464
						cursor: default;
465
					}
466
				}
467
				&.current{
468
					border-color:white;
469
					a {
470
						color:white;
471
					}
472

    
473
				}
474
				&.current {
475
					font-size:emCalc(20px);
476
					width:30px;
477
					height:30px;
478
				}
479
			}
480
		}
481
	}
482
}
483

    
484
.wizard-content {
485
	overflow: hidden;
486
}
487

    
488
.vm-wizard-carousel {
489
	width: 20000px;
490
	position:relative;
491
}
492

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

    
604
	}
605
	.tags-area {
606
		background-color: $tag-opt-area-color;
607
	}
608

    
609
}