Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (9.7 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
		}
353
	}
354
	.bottom {
355
		position: fixed;
356
		left:0;
357
		right:0;
358
		bottom:0;
359
		border-top:1px solid $black;
360
		background:$overlay-color;
361
		.row {
362
			height: $bar-height;
363
			line-height: $bar-height;
364
		}
365
		.nav {
366
			height: $bar-height;
367
			line-height: $bar-height;
368
			color:white;
369
			display: inline-block;
370
			position: relative;
371
			top:($bar-height - 30px)/2;
372
			span {
373
				display: inline-block;
374
				height: 30px;
375
				line-height:30px;
376
				float: left;
377
			}
378
		}
379
		.prev {
380
			float:left;
381
			height:30px;
382
			padding-left:19px;
383
			background:url('../images/nav-edge-lt.png') no-repeat left top;
384
			span {
385
				padding-right:10px;
386
				background:url('../images/nav-lt.png') no-repeat right top;
387
			}
388
			&:hover {
389
				background-position:left bottom;
390
				@include transition(background, 0, ease-out);
391
				span {
392
					background-position:right bottom;
393
					@include transition(background, 0, ease-out);
394
				}
395
			}
396
		}
397
		.next {
398
			float:right;
399
			height:30px;
400
			padding-right:19px;
401
			background:url('../images/nav-edge-rt.png') no-repeat right top;
402
			span {
403
				padding-left:10px;
404
				background:url('../images/nav-rt.png') no-repeat left top;
405
			}
406
			&:hover {
407
				background-position:right bottom;
408
				@include transition(background, 0, ease-out);
409
				span {
410
					background-position:left bottom;
411
					@include transition(background, 0, ease-out);
412
				}
413
			}
414
		}
415
		.nums {
416
			text-align: center;
417
			list-style:none outside none;
418
			margin:0;
419
			height: $bar-height;
420
			line-height: $bar-height;
421
			li {
422
				list-style:none outside none;
423
				display: inline-block;
424
				border-radius:50%;
425
				border:1px solid $primary-color;
426
				width:25px;
427
				height:25px;
428
				line-height: 25px;
429
				margin:0 3px;
430
				a {
431
					color:$primary-color;
432
					display: block;
433
					&:hover {
434
						cursor: default;
435
					}
436
				}
437
				&.current{
438
					border-color:white;
439
					a {
440
						color:white;
441
					}
442

    
443
				}
444
				&.current {
445
					font-size:emCalc(20px);
446
					width:30px;
447
					height:30px;
448
				}
449
			}
450
		}
451
	}
452
}
453

    
454
.wizard-content {
455
	overflow: hidden;
456
}
457

    
458
.vm-wizard-carousel {
459
	width: 20000px;
460
	position:relative;
461
}
462

    
463
// step3 vm wizard
464
.advanced-conf-step {
465
	color: $wizard-base-font-color;
466
	h2 {
467
		color: $wizard-base-font-color;
468
		font-size: 1em;
469
		margin:0 auto 1em;
470
	}
471
	p {
472
		font-size: $wizard-paragraph-font-size;
473
	}
474
	.adv-main {
475
		padding: 10px 0 30px;
476
		width:$row-small;
477
		.vm-name {
478
			font-weight: bold;
479
		}
480
		.btn5 {
481
			&:hover {
482
				color:white;
483
			}
484
			&.current, &.current:hover {
485
				color:$overlay-color;
486
			}
487
		}
488
		input[type="text"] {
489
			width: 200px;
490
			border: 0;
491
			border-bottom: 1px solid $wizard-base-font-color;
492
			background-color: $overlay-color;
493
			outline: 0;
494
			color: $wizard-base-font-color;
495
			//to be improved!!!!
496
			-webkit-box-shadow: 7px 7px 0px rgba(72, 80, 87, 0);
497
			-moz-box-shadow:    7px 7px 0px rgba(72, 80, 87, 0);
498
			box-shadow: 7px 7px 0px rgba(72, 80, 87, 0);
499
		}
500
	}
501
}
502
.advanced-conf-options {
503
	display: none;
504
	.area {
505
		padding:30px 0;
506
		.row {
507
			width:$row-small;
508
		}
509
		.btn5{
510
			&:hover {
511
				color:white;
512
			}
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
				}
532
			}
533
		}
534
	}
535
	.ssh-keys-area {
536
		background-color: $ssh-opt-area-color;
537
	}
538
	.networks-area {
539
		background-color: $net-opt-area-color;
540
		li {
541
			.net-icons {
542
				padding-right:20px;
543
				position:absolute;
544
				left:-200px;
545
				top:-12px;
546
				width:200px;
547
				text-align: right;
548
				font-size:30px;
549
				span {
550
					margin-left:6px;
551
					&.snf-modem {
552
						position: relative;
553
						top:-6px;
554
					}
555
				}
556
			}
557
			&.more {
558
				display: none;
559
				background:white;
560
				margin-bottom:1em;
561
				padding:30px 0;
562
				color:$net-opt-area-color;
563
				h3 {
564
					color:$net-opt-area-color;
565
				}
566
				.btn5 {
567
					margin-top:1em;
568
					border-color:$net-opt-area-color;
569
					color:$net-opt-area-color;
570
				}
571
			}
572
		}
573

    
574
	}
575
	.tags-area {
576
		background-color: $tag-opt-area-color;
577
	}
578

    
579
}