Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (19.2 kB)

1
/*
2

    
3
Overlays (Todo: clean up)
4

    
5
*/
6
body.with-overlay {
7
     background:$overlay-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
	left:0;
42
	top:0;
43
	.overlay-area {
44
		display:none;
45
		position:absolute;
46
		left:0;
47
		right:0;
48
		top:-$bar-height;
49
		width:100%;
50
		height:100%;
51
		background:$overlay-color;
52
		z-index:20;
53
	}
54
	.close {
55
		position: absolute;
56
		right:$header-padding-horizontal;
57
		top:50px;
58
		font-size:30px;
59
		color:$primary-color;
60
		&:hover, &:focus {
61
			color:white;
62
		}
63
	}
64
	.row {
65
		.close {
66
			position:static;
67
			float:right;
68
		}
69
	}
70
	.overlay-div {
71
		display: none;
72
		z-index:100;
73
		position: relative;
74
		background:#fff;
75
		top:20%; 
76
		left:25%; 
77
		width:50%;
78
		padding:25px;
79
		.buttons {
80
			a {
81
				margin-right:20px;
82
			}
83
		}
84
		&.upload-widget {
85
			background:transparent;
86
			padding:45px 0;
87
			width:80%;
88
			left:10%;
89
			border:1px solid white;
90
		}
91
		&.wizard {
92
			background:$overlay-color;
93
			padding:0 ;
94
			width:100%;
95
			top:0;
96
			left:0;
97
		}
98
	}
99
}
100

    
101

    
102
.overlay {
103
    background:$secondary-color;
104
    position: relative;
105
    // z-index:10;
106
    .lt-sidebar {
107
        border-right:1px solid #fff;
108
        color:#fff;
109
        ul {
110
            li {
111
                list-style:none outside none;
112
               
113
                a {
114
                    display: block;
115
                    color:#fff;
116
                    span { float:right; display:none;}
117
                    &:hover,
118
                    &.current {
119
                        text-decoration: none;
120
                        span {
121
                            display:inline;
122
                        }
123
                    }
124
                }
125

    
126
            }
127
        }
128

    
129
    }
130
    .lt-sidebar,
131
    .main {
132
        padding:100px $header-padding-horizontal;
133
        position:relative;
134
    }
135
    .navigation {
136
        .rt {
137
            float:right;
138
        }
139
    }
140
    .close {
141
        position: absolute;
142
        right:$header-padding-horizontal;
143
        top:50px;
144
        @include sprite('../images/info-close.png', 31px, 30px);
145
    }
146
    .close_char {
147
        background: none;
148
        text-indent: 0;
149
        font-size: 1.8em; /* for the the character e (for d we can put 2em) */
150
        color: white;
151
    }
152
}
153

    
154
.wizard {
155
	position: relative;
156
	top:0;
157
	color:white;
158
	.top {
159
		background:$overlay-color-top;
160
		height:$bar-height+$bar-submenu-height;
161
		position:fixed;
162
		left:0;
163
		right:0;
164
		bottom:auto;
165
		top:$header-height;
166
		width:100%;
167
		z-index:40;
168
		.row {
169
		}
170
		.numbers {
171
			.row {
172
				max-width: 100%;
173
				padding:0 $header-padding-horizontal
174

    
175
			}
176
			height:$bar-height;
177
			line-height:$bar-height; 
178
			background:$overlay-darker-color;
179
		}
180
		.sub-menu {
181
			display: none;
182
			&[data-step="1"] {
183
				display: block;
184
			}
185
			ul {
186
				margin:0;
187
				padding:0;
188
				list-style: none outside none;
189
				font-size:emCalc(12px);
190
				li {
191
					display: inline;
192
					margin-right:10px;
193
					line-height: $bar-submenu-height;
194
					list-style: none outside none;
195
					a {
196
						color:$black;
197
						&:hover, &:focus, &.current {
198
							color:white;
199
						}
200
						&.current {
201
							text-decoration: underline;
202
						}
203
					}
204
				}
205
			}
206
		}
207
		.nums {
208
			text-align: right;
209
			list-style:none outside none;
210
			margin:0;
211
			height: $bar-height;
212
			line-height: $bar-height;
213
			font-size:emCalc(9px);
214
			padding-right:120px;
215
			color:$secondary-color;
216
			li {
217
				list-style:none outside none;
218
				display: inline;
219
				p {
220
					display: none;
221
					position: relative;
222
					top: 1px;
223
					font-size:12px;
224
					margin-left:12px;
225
					strong {
226
						margin-right:5px;
227
					}
228
				}
229
				em {
230
					display: inline-block;
231
					border-radius:50%;
232
					border:1px solid $secondary-color;
233
					width:20px;
234
					height:20px;
235
					line-height: 18px;
236
					margin:0 3px;
237
					text-align: center;
238
					font-style: normal;
239
				}
240
				a {
241
					color:$secondary-color;
242
					display: block;
243
					&:hover {
244
						cursor: default;
245
					}
246
				}
247
				&.current{
248
					float: left;
249
					p {
250
						display: inline-block;
251
					}
252
					em {
253
						font-size:12px;
254
						width:30px;
255
						height:30px;
256
						line-height: 27px;
257
						border-color:$secondary-color;
258
						* {
259
							color:$secondary-color;
260
						}
261
					}
262
				}
263
			}
264
		}
265
	}
266
	.middle {
267
		padding-top:$bar-height+$bar-submenu-height;
268
		.steps {
269
			position:relative;
270
			width:100%;
271
		}
272
		.step {
273
			position: absolute;
274
			top:0;
275
			width:100%;
276
			display:none;
277
			&.current {
278
				display: block;
279
			}
280
			padding:50px 0 50px;
281
			&.step-2 {
282
				padding-top:30px;
283
				.dropdown {
284
					margin-bottom:40px;
285
				}
286
			}
287
			&.step-3 {
288
				padding-top: 45px;
289
			}
290
			.os {
291
				li {
292
					display: none;
293
					list-style: none outside none;
294
					font-size:emCalc(12px);
295
					@extend .clearfix;
296
					padding:15px 0;
297
					&:hover,
298
					&.hover {
299
						background:$overlay-darker-color;
300
					}
301
					&.current {
302
						background:white;
303
						color:$overlay-color;
304
						.name-col {
305
							color:$overlay-color;
306
						}
307
						.btn-col {
308
							a {
309
								border-color:$overlay-color;
310
								color:$overlay-color;
311
								&.current {
312
									color:white;
313
									background:$overlay-color;
314
								}
315
							}
316
						}
317
					}
318
					.img-col {
319
						float:left;
320
						width:50px;
321
						line-height: $btn-height;
322
					}
323
					.name-col {
324
						float: left;
325
						color: $wizard-base-font-color;
326
						width:71%;
327
						padding-right:10px;
328
						line-height: $btn-height;
329
					}
330
					.size-col {
331
						float:left;
332
						width:10%;
333
						line-height: $btn-height;
334
					}
335
					.btn-col {
336
						float:right;
337
						width:10%;
338
						margin-left:10px;
339
						a {
340
							@extend .btn5;
341

    
342
								font-size:1em;
343
							&.current {
344
								color:$overlay-color;
345
							}
346
						}
347
					}
348
					.details {
349
						display: none;
350
						background:darken(white,10%);
351
						padding:22px 0;
352
						margin:20px 6px -9px;
353
						color: $body-font-color;
354
						h3 {
355
							font-size: 1em;
356
							font-weight: normal;
357
							margin-bottom:1em;
358
							padding-left:50px;
359
						}
360
						dl {
361
							margin:0;
362
							padding-left:50px;
363
							@extend .clearfix;
364
							dt {
365
								width: 20%;
366
								float:left;
367
								color:$black;
368
								font-weight:normal;
369
							}
370
							dd {
371
								color:#485057;
372
								margin:0 0 5px;
373
							}
374
						}
375
					}
376
				}
377
			}
378
			.flavor {
379
				list-style: none outside none;
380
				li {
381
					list-style:none outside none;
382
					margin-bottom:30px;
383
					.title {
384
						@extend .clearfix;
385
						height:40px;
386
						overflow:hidden;
387
						margin-bottom:emCalc(8px);
388
						color:white;
389
						vertical-align: top;
390
						.icon {
391
							display: block;
392
							width:60px;
393
							font-size:emCalc(40px);
394
							float: left;
395
						}
396
						h2 {
397
							font-size:emCalc(14px);
398
							span {
399
								font-weight:normal;
400
							}
401
							float:left;
402
							width: 140px;
403
							color:white;
404
							margin-right:60px;
405
							padding-left:emCalc(10px);
406
							&:hover {
407
								em {
408
									opacity:1;
409
								}
410
							}
411
							em {
412
								display: block;
413
								margin-top:4px;
414
								font-size:11px;
415
								color:$black;
416
								font-style:normal;
417
								font-weight:normal;
418
								opacity:0.6;
419
								white-space: nowrap;
420
							}
421
						}
422
						p {
423
							visibility: hidden;
424
							overflow:hidden;
425
							min-height:40px;
426
							color:$black;
427
							font-size:11px;
428
						}
429
					}
430
					.options-bar {
431
						@extend .clearfix;
432
						.bar {
433
							width:200px;
434
							float:left;
435
							margin-right:60px;
436
							height: 20px;
437
							position: relative;
438
							top:10px;
439
							.wrap {
440
								border:1px solid white;
441
								padding:1px;
442
								height: 100%;
443
								&.disabled-progress-bar {
444
									border-color: #3a4046;
445
									.container{
446
										.total {
447
											background-color: #3a4046;
448
										}
449
									}
450
								}
451
								.container {
452
									height: 100%;
453
									.total {
454
										background:$primary-color;
455
										height: 100%;
456
										float:left;
457
										position: relative;
458
										.current {
459
											background:white;
460
											height: 100%;
461
											float:left;
462
										}
463
										span {
464
											position:absolute;
465
											right:10px;
466
											color:$black;
467
											font-size: emCalc(9px);
468
											top:2px;
469
										}
470
										&.low {
471
											span {
472
												right:-30px;
473
												color:white;
474
											}
475
										}
476
									}
477
								}
478

    
479
							}
480
						}
481
						.options {
482
							overflow:hidden;
483
							list-style: none outside none;
484
							li {
485
								list-style: none outside none;
486
								display: inline-block;
487
								margin-right: 10px;
488
								margin-bottom:0;
489
								a {
490
									@extend .btn5;
491
									min-width: 60px;
492
									&.current {
493
										color:$overlay-color;
494
									}
495
								}
496
							}
497
						}
498
					}
499
				}
500
			}
501
			.summary {
502
				padding-bottom:40px;
503
				.row {
504
					.wrap {
505
						max-width: $row-small;
506
						border-top:1px solid white;
507
						padding-top:2em;
508
						margin-top:1em;
509
					}
510
					&:first-child {
511
						.wrap {
512
							border-top:0 none;
513
							margin-top:0;
514
						}
515
						dl {
516
							dt {
517
								font-weight: bold;
518
							}
519
						}
520
					}
521
				}
522
				h2 {
523
					font-size:1em;
524
					color:white;
525
					margin-bottom:1em;
526
				}
527
				dl {
528
					margin-bottom:0;
529
					span {
530
						width:40px;
531
						display: inline-block;
532
						font-size:20px;
533
					}
534
					dt {
535
						display: inline-block;
536
						width: 42%;
537
						vertical-align: top;
538
						font-weight:600;
539
					}
540
					dd {
541
						display: inline-block;
542
						width:45%;
543
						margin-bottom:1em;
544
					}
545
				}
546
			}
547
			.advanced-conf-step {
548
				color: $wizard-base-font-color;
549
				h2 {
550
					color: $wizard-base-font-color;
551
					font-size: 1em;
552
					margin-bottom: 10px;
553
				}
554
				p {
555
					font-size: $wizard-paragraph-font-size;
556
				}
557
                .snf-checkbox-checked, .snf-checkbox-unchecked {
558
                    color: $wizard-base-font-color;
559
                }   
560
                .expand-btn {
561
                    margin: 50px 0 $step-adv-padding;
562
                    a {
563
                        color:$wizard-base-font-color;
564
                        span {
565
                        	padding-left:24px;
566
                        }
567
                      }
568

    
569
                   
570
                }
571
                .adv-main {
572
                    // padding: 10px 0 30px;
573
                    // width:$row-small;
574
                    .vm-name {
575
                        h2 {
576
                            color:white;
577
                            font-size:1em;
578
                            margin-bottom:0.5em;
579
                        }
580

    
581
                    }
582
                }
583
                .btn5 {
584
                    &:hover {
585
                        color:white;
586
                }
587
                    &.current, &.current:hover {
588
                        color:$overlay-color;
589
                    }
590
                }
591
                .advanced-conf-options {
592
                    display: none;
593
                    .check {
594
                    	font-size: 20px;
595
                    }
596
                    .area {
597
                        padding:$step-adv-padding 0;
598
                        .row {
599
	                        p{
600
								max-width:340px;
601
	                        	margin-bottom: 20px;
602
	                        }
603
                        }
604
                        ul {
605
                            li {
606
                                position: relative;
607
                                list-style:none outside none;
608
                                margin-bottom:7px;
609
                                &.checkbox {
610
                                    &:hover {
611
                                        cursor: pointer;
612
                                    }
613
                                }
614
                                h3 {
615
                                    width: $conf-area-h-width;
616
                                    color:white;
617
                                    font-size:1em;
618
                                    font-weight: normal;
619
                                    margin:0 28px 0 0;
620
                                    display: inline-block;
621
                                    //&.net-name { width: 9.063em }
622
                                }
623
                            }
624
                        }
625
                    }
626
                    .ssh-keys-area {
627
                        background-color: $ssh-opt-area-color;
628
                        .btn5 {
629
                        	margin-top: 3px;
630
                        }
631

    
632
                    }
633
                    .networks-area {
634
                        background-color: $net-opt-area-color;
635
                        ul {
636
                        	position: relative;
637
							margin-bottom:0;
638
                        }
639
                        li {
640
                            .net-icons {
641
                                padding-right:30px;
642
                                display: inline-block;
643
                                width:145px;
644
                                text-align: right;
645
                                font-size:30px;
646
                                margin-bottom: 0;
647
                                position: relative;
648
                                span {
649
 									position: relative;
650
                                    &.snf-modem {
651
                                        top:-1px;
652
                                    }
653
                                    &.snf-www {
654
                                        top:6px;
655
                                    }
656
                                    &.snf-network_full {
657
                                        top:5px;
658
                                    }
659
                                    &.temp-line {
660
										position: absolute;
661
										height:1px;
662
										width:13px;
663
										background:white;
664
										bottom:15px;
665
										&.line1 { right:56px; }
666
										&.line2 {
667
 											right:97px;
668
											width:10px;
669
 										}
670
 									}
671
 								}
672
                            }
673
                            &.more {
674
                                background:$net-more-opt-area-color;
675
                                margin:$step-adv-padding 0;
676
                                padding:$step-adv-padding 0;
677
                                color:$net-opt-area-color;
678
                                h3 {
679
                                    color:$net-opt-area-color;
680
                                    padding-left: 145px;
681
                                    &:hover {
682
 										cursor: pointer;
683
                                    }
684
                                }
685
                                .btn5 {
686
                                    margin-top:20px;
687
                                    border-color:$net-opt-area-color;
688
                                    color:$net-opt-area-color;
689
                                    margin-left:145px;
690
                                }
691
                                .checkbox {
692
                                    a {
693
                                        span {
694
                                            color: $net-opt-area-color;
695
                                        }
696
                                    }
697
                                }
698
                            }
699
                        }
700

    
701
                    }
702
                    .tags-area {
703
                        background-color: $tag-opt-area-color;
704
                        .snf-color-picker {
705
                            display: none;
706
                        }
707
                        #picker {
708
                            position: relative;
709
                            width: 207px;
710
                            margin: 30px 5px;
711
                            display: inline-block;
712
                        }
713
                        .btns {
714
                            margin-top: 77px;
715
                            margin-bottom: 30px;
716
                        }
717
                        .btn5 {
718
                            margin-right:20px;
719
                        }
720
                        .tag-demo {
721
							left:10px;
722
                        }
723
                      	h3 {
724
                            width: $conf-area-h-width;
725
                            color:white;
726
                            font-size:1em;
727
                            font-weight: normal;
728
                            margin:0 28px 0 0;
729
                            display: inline-block;
730
                            //&.net-name { width: 9.063em }
731
                           }
732
                        .list-header {
733
                        	position: relative;
734
                        	left: -14px;
735
                        	h3 {
736
                        		margin-right: 35px;
737
                        	}
738
                        }
739

    
740

    
741
                    }
742
                }
743
            }
744
        }
745
    }
746
    .bottom {
747
        position: fixed;
748
        left:0;
749
        right:0;
750
        bottom:0;
751
        border-top:1px solid $overlay-color-top;
752
        background:$overlay-color;
753
        .row {
754
            height: $bar-height;
755
            line-height: $bar-height;
756
        }
757
        .nav {
758
            height: $bar-height;
759
            line-height: $bar-height;
760
            color:white;
761
            display: inline-block;
762
            position: relative;
763
            font-size: emCalc(12px);
764
            top:($bar-height - 30px)/2;
765
            width: 100px;
766
            &:hover,
767
            &:focus {
768
                @include transition(background, 0ms, ease-out);
769
            }
770
            span {
771
                display: inline-block;
772
                height: 30px;
773
                line-height:30px;
774
                float: left;
775
                &:hover,
776
                &:focus {
777
                    @include transition(background, 0ms, linear);
778
                }
779
            }
780
        }
781
        .prev {
782
            float:left;
783
            height:30px;
784
            padding-left:18px;
785
            background:url('../images/nav-edge-lt.png') no-repeat left top;
786
            span {
787
                padding-right:10px;
788
                background:url('../images/nav-lt.png') no-repeat right top;
789
            }
790
            &:hover,
791
            &.active,
792
            &:focus {
793
                background-position:left bottom;
794
                span {
795
                    background-position:right bottom;
796
                }
797
            }
798
        }
799
        .next {
800
            float:right;
801
            height:30px;
802
            padding-right:18px;
803
            background:url('../images/nav-edge-rt.png') no-repeat right top;
804
            span {
805
                padding-left:10px;
806
                background:url('../images/nav-rt.png') no-repeat left top;
807
                float: right;
808
            }
809
            &:hover,
810
            &.active,
811
            &:focus {
812
                background-position:right bottom;
813
                span {
814
                    background-position:left bottom;
815
                    float:right;
816
                }
817
            }
818
        }
819
    }
820
}
821

    
822
/* Responive ------------------------------------------------ */
823
@media only screen and (max-width: $small-mobile) {
824
}
825

    
826
@media only screen and (max-width: $small-screen) {
827
    .wizard {
828
        .top {
829
            position: static;
830
        }
831
        .middle {
832
            padding-top:0;
833
        }
834
    }
835
    .overlay-wrapper {
836
        .overlay-area {
837
            top:0;
838
        }
839
    }
840
}