Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (20 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:50;
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
	.welcome { 
100
		display:none;
101
	}
102
	&.no-vm {
103
		background:url(../images/draw-welcome.png) no-repeat center 80px $secondary-color;
104
		.welcome {
105
			display:none;
106
			color:#fff;
107
			text-align:center;
108
			position: relative;
109
			top:10px;
110
			left:75px;
111
			display:block;
112
		}
113
	}
114
}
115

    
116

    
117
.overlay {
118
    background:$secondary-color;
119
    position: relative;
120
    // z-index:10;
121
    .lt-sidebar {
122
        border-right:1px solid #fff;
123
        color:#fff;
124
        ul {
125
            li {
126
                list-style:none outside none;
127
               
128
                a {
129
                    display: block;
130
                    color:#fff;
131
                    span { float:right; display:none;}
132
                    &:hover,
133
                    &.current {
134
                        text-decoration: none;
135
                        span {
136
                            display:inline;
137
                        }
138
                    }
139
                }
140

    
141
            }
142
        }
143

    
144
    }
145
    .lt-sidebar,
146
    .main {
147
        padding:100px $header-padding-horizontal;
148
        position:relative;
149
    }
150
    .navigation {
151
        .rt {
152
            float:right;
153
        }
154
    }
155
    .close {
156
        position: absolute;
157
        right:$header-padding-horizontal;
158
        top:50px;
159
        @include sprite('../images/info-close.png', 31px, 30px);
160
    }
161
    .close_char {
162
        background: none;
163
        text-indent: 0;
164
        font-size: 1.8em; /* for the the character e (for d we can put 2em) */
165
        color: white;
166
    }
167
}
168

    
169
.wizard {
170
	position: relative;
171
	top:0;
172
	color:white;
173
	.top {
174
		background:$overlay-color-top;
175
		height:90px; // numbers height+menus height-10px
176
		position:fixed;
177
		left:0;
178
		right:0;
179
		bottom:auto;
180
		top:$header-height;
181
		width:100%;
182
		z-index:40;
183
		.numbers {
184
			.row {
185
				max-width: 100%;
186
				padding:0 $header-padding-horizontal
187

    
188
			}
189
			height: 50px;
190
			line-height: 50px;
191
			background:$overlay-darker-color;
192
		}
193
		.menus {
194
			height: 50px;
195
			.sub-menu {
196
				display: none;
197
				&[data-step="1"] {
198
					display: block;
199
				}
200
				ul {
201
					margin:0;
202
					padding:0;
203
					list-style: none outside none;
204
					font-size:emCalc(12px);
205
					li {
206
						display: inline;
207
						margin-right:10px;
208
						line-height: $bar-submenu-height;
209
						list-style: none outside none;
210
						a {
211
							color:$black;
212
							&:hover, &:focus, &.current {
213
								color:white;
214
							}
215
							&.current {
216
								text-decoration: underline;
217
							}
218
							&.disabled {
219
								color: $disabled-flavor-color;
220
								cursor: default;
221

    
222
							}
223
						}
224
					}
225
				}
226
			}
227
		}
228
		.nums {
229
			text-align: right;
230
			list-style:none outside none;
231
			margin:0;
232
			height: 50px;
233
			line-height: 50px;
234
			font-size:emCalc(9px);
235
			padding-right:120px;
236
			color:$secondary-color;
237
			li {
238
				list-style:none outside none;
239
				display: inline;
240
				p {
241
					display: none;
242
					position: relative;
243
					top: 1px;
244
					font-size:12px;
245
					margin-left:12px;
246
					strong {
247
						margin-right:5px;
248
					}
249
				}
250
				em {
251
					display: inline-block;
252
					border-radius:50%;
253
					border:1px solid $secondary-color;
254
					width:20px;
255
					height:20px;
256
					line-height: 18px;
257
					margin:0 3px;
258
					text-align: center;
259
					font-style: normal;
260
				}
261
				a {
262
					color:$secondary-color;
263
					display: block;
264
					&:hover {
265
						cursor: default;
266
					}
267
				}
268
				&.current{
269
					float: left;
270
					p {
271
						display: inline-block;
272
					}
273
					em {
274
						font-size:12px;
275
						width:30px;
276
						height:30px;
277
						line-height: 27px;
278
						border-color:$secondary-color;
279
						* {
280
							color:$secondary-color;
281
						}
282
					}
283
				}
284
			}
285
		}
286
	}
287
	.middle {
288
		padding-top:$bar-height+$bar-submenu-height;
289
		.steps {
290
			position:relative;
291
			width:100%;
292
		}
293
		.step {
294
			position: absolute;
295
			top:0;
296
			width:100%;
297
			display:none;
298
			&.current {
299
				display: block;
300
			}
301
			padding:50px 0 50px;
302
			&.step-2 {
303
				// padding-top:30px;
304
				.dropdown {
305
					margin-bottom:40px;
306
				}
307
			}
308
			&.step-3 {
309
				// padding-top: 45px;
310
			}
311
			.os {
312
				li {
313
					display: none;
314
					list-style: none outside none;
315
					font-size:emCalc(12px);
316
					@extend .clearfix;
317
					padding:15px 0;
318
					&:hover,
319
					&.hover {
320
						background:$overlay-darker-color;
321
					}
322
					&.current {
323
						background:white;
324
						color:$overlay-color;
325
						.name-col {
326
							color:$overlay-color;
327
						}
328
						.btn-col {
329
							a {
330
								border-color:$overlay-color;
331
								color:$overlay-color;
332
								&.current {
333
									color:white;
334
									background:$overlay-color;
335
								}
336
							}
337
						}
338
					}
339
					&.system-images {
340
						display: list-item;
341
					}
342
					.img-wrap-col {
343
						float:left;
344
						width:50px;
345
						line-height: $btn-height;
346
					}
347
					.name-col {
348
						float: left;
349
						color: $wizard-base-font-color;
350
						width:71%;
351
						padding-right:10px;
352
						line-height: $btn-height;
353
					}
354
					.size-col {
355
						float:left;
356
						width:10%;
357
						line-height: $btn-height;
358
					}
359
					.btn-col {
360
						float:right;
361
						width:10%;
362
						margin-left:10px;
363
						a {
364
							@extend .btn5;
365

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

    
503
							}
504
						}
505
						.options {
506
							overflow:hidden;
507
							list-style: none outside none;
508
							li {
509
								list-style: none outside none;
510
								display: inline-block;
511
								margin-right: 10px;
512
								margin-bottom:0;
513
								a {
514
									@extend .btn5;
515
									min-width: 60px;
516
									&.current {
517
										color:$overlay-color;
518
									}
519
									&.disabled {
520
										border-color: $disabled-resource-color;
521
										color: $disabled-resource-color;
522
										&:hover, &:active {
523
											cursor: default;
524
											border-width: 1px;
525
											line-height: 28px;
526

    
527
										}
528
									}
529
								}
530
							}
531
						}
532
					}
533
				}
534
			}
535
			.summary {
536
				padding-bottom:40px;
537
				.row {
538
					.wrap {
539
						max-width: $row-small;
540
						border-top:1px solid white;
541
						// padding-top:2em;
542
						// margin-top:1em;
543
					}
544
					&:first-child {
545
						.wrap {
546
							border-top:0 none;
547
							margin-top:0;
548
						}
549
						dl {
550
							dt {
551
								font-weight: bold;
552
							}
553
						}
554
					}
555
				}
556
				h2 {
557
					font-size:1em;
558
					color:white;
559
					margin-bottom:1em;
560
				}
561
				dl {
562
					margin-bottom:0;
563
					span {
564
						width:40px;
565
						display: inline-block;
566
						font-size:20px;
567
					}
568
					dt {
569
						display: inline-block;
570
						width: 42%;
571
						vertical-align: top;
572
						font-weight:600;
573
					}
574
					dd {
575
						display: inline-block;
576
						width:45%;
577
						margin-bottom:1em;
578
					}
579
				}
580
			}
581
			.advanced-conf-step {
582
				color: $wizard-base-font-color;
583
				h2 {
584
					color: $wizard-base-font-color;
585
					font-size: 1em;
586
					margin-bottom: 10px;
587
					line-height: 1;
588
				}
589
				p {
590
					font-size: $wizard-paragraph-font-size;
591
				}
592
                .snf-checkbox-checked, .snf-checkbox-unchecked {
593
                    color: $wizard-base-font-color;
594
                }   
595
                .expand-btn {
596
                    margin: 50px 0 $step-adv-padding;
597
                    a {
598
                        color:$wizard-base-font-color;
599
                        span {
600
                        	padding-left:24px;
601
                        }
602
                      }
603

    
604
                   
605
                }
606
                .adv-main {
607
                    // padding: 10px 0 30px;
608
                    // width:$row-small;
609
                    .vm-name {
610
                        h2 {
611
                            color:white;
612
                            font-size:1em;
613
                            margin-bottom:0.5em;
614
                        }
615

    
616
                    }
617
                }
618
                .btn5 {
619
                    &:hover {
620
                        color:white;
621
                }
622
                    &.current, &.current:hover {
623
                        color:$overlay-color;
624
                    }
625
                }
626
                .advanced-conf-options {
627
                    display: none;
628
                    .check {
629
                    	font-size: 20px;
630
                    }
631
                    .area {
632
                        padding:$step-adv-padding 0;
633
                        .row {
634
	                        p{
635
								max-width:340px;
636
	                        	margin-bottom: 20px;
637
	                        }
638
                        }
639
                        ul {
640
                            li {
641
                                position: relative;
642
                                list-style:none outside none;
643
                                margin-bottom:7px;
644
                                &.checkbox {
645
                                    &:hover {
646
                                        cursor: pointer;
647
                                    }
648
                                }
649
                                h3 {
650
                                    width: $conf-area-h-width;
651
                                    color:white;
652
                                    font-size:1em;
653
                                    font-weight: normal;
654
                                    margin:0 28px 0 0;
655
                                    display: inline-block;
656
                                    //&.net-name { width: 9.063em }
657
                                }
658
                            }
659
                        }
660
                    }
661
                    .ssh-keys-area {
662
                        background-color: $ssh-opt-area-color;
663
                        .btn5 {
664
                        	margin-top: 3px;
665
                        }
666

    
667
                    }
668
                    .networks-area {
669
                        background-color: $net-opt-area-color;
670
                        ul {
671
                        	position: relative;
672
							margin-bottom:0;
673
                        }
674
                        li {
675
                            .net-icons {
676
                                padding-right:30px;
677
                                display: inline-block;
678
                                width:145px;
679
                                text-align: right;
680
                                font-size:30px;
681
                                margin-bottom: 0;
682
                                position: relative;
683
                                span {
684
 									position: relative;
685
                                    &.snf-modem {
686
                                        top:-1px;
687
                                    }
688
                                    &.snf-www {
689
                                        top:6px;
690
                                    }
691
                                    &.snf-network_full {
692
                                        top:5px;
693
                                    }
694
                                    &.temp-line {
695
										position: absolute;
696
										height:1px;
697
										width:13px;
698
										background:white;
699
										bottom:15px;
700
										&.line1 { right:56px; }
701
										&.line2 {
702
 											right:97px;
703
											width:10px;
704
 										}
705
 									}
706
 								}
707
                            }
708
                            &.more {
709
                                background:$net-more-opt-area-color;
710
                                margin:$step-adv-padding 0;
711
                                padding:$step-adv-padding 0;
712
                                color:$net-opt-area-color;
713
                                h3 {
714
                                    color:$net-opt-area-color;
715
                                    padding-left: 145px;
716
                                    &:hover {
717
 										cursor: pointer;
718
                                    }
719
                                }
720
                                .btn5 {
721
                                    margin-top:20px;
722
                                    border-color:$net-opt-area-color;
723
                                    color:$net-opt-area-color;
724
                                    margin-left:145px;
725
                                }
726
                                .with-checkbox {
727
                                    a {
728
                                        span {
729
                                            color: $net-opt-area-color;
730
                                        }
731
                                    }
732
                                }
733
                            }
734
                        }
735

    
736
                    }
737
                    .tags-area {
738
                        background-color: $tag-opt-area-color;
739
                        .snf-color-picker {
740
                            display: none;
741
                        }
742
                        #picker {
743
                            position: relative;
744
                            width: 207px;
745
                            margin: 30px 5px;
746
                            display: inline-block;
747
                        }
748
                        .btns {
749
                            margin-top: 77px;
750
                            margin-bottom: 30px;
751
                        }
752
                        .btn5 {
753
                            margin-right:20px;
754
                        }
755
                        .tag-demo {
756
							left:10px;
757
                        }
758
                      	h3 {
759
                            width: $conf-area-h-width;
760
                            color:white;
761
                            font-size:1em;
762
                            font-weight: normal;
763
                            margin:0 28px 0 0;
764
                            display: inline-block;
765
                            //&.net-name { width: 9.063em }
766
                           }
767
                        .list-header {
768
                        	position: relative;
769
                        	left: -14px;
770
                        	h3 {
771
                        		margin-right: 35px;
772
                        	}
773
                        }
774

    
775

    
776
                    }
777
                }
778
            }
779
        }
780
    }
781
    .bottom {
782
        position: fixed;
783
        left:0;
784
        right:0;
785
        bottom:0;
786
        border-top:1px solid $overlay-color-top;
787
        background:$overlay-color;
788
        .row {
789
            height: $bar-height;
790
            line-height: $bar-height;
791
        }
792
        .nav {
793
            height: $bar-height;
794
            line-height: $bar-height;
795
            color:white;
796
            display: inline-block;
797
            position: relative;
798
            font-size: emCalc(12px);
799
            top:($bar-height - 30px)/2;
800
            width: 100px;
801
            &:hover,
802
            &:focus {
803
                @include transition(background, 0ms, ease-out);
804
            }
805
            span {
806
                display: inline-block;
807
                height: 30px;
808
                line-height:30px;
809
                float: left;
810
                &:hover,
811
                &:focus {
812
                    @include transition(background, 0ms, linear);
813
                }
814
            }
815
        }
816
        .prev {
817
            float:left;
818
            height:30px;
819
            padding-left:18px;
820
            background:url('../images/nav-edge-lt.png') no-repeat left top;
821
            span {
822
                padding-right:10px;
823
                background:url('../images/nav-lt.png') no-repeat right top;
824
            }
825
            &:hover,
826
            &.active,
827
            &:focus {
828
                background-position:left bottom;
829
                span {
830
                    background-position:right bottom;
831
                }
832
            }
833
        }
834
        .next {
835
            float:right;
836
            height:30px;
837
            padding-right:18px;
838
            background:url('../images/nav-edge-rt.png') no-repeat right top;
839
            span {
840
                padding-left:10px;
841
                background:url('../images/nav-rt.png') no-repeat left top;
842
                float: right;
843
            }
844
            &:hover,
845
            &.active,
846
            &:focus {
847
                background-position:right bottom;
848
                span {
849
                    background-position:left bottom;
850
                    float:right;
851
                }
852
            }
853
        }
854
    }
855
}
856

    
857
/* Responive ------------------------------------------------ */
858
@media only screen and (max-width: $small-mobile) {
859
}
860

    
861
@media only screen and (max-width: $small-screen) {
862
    .wizard {
863
        .top {
864
            position: static;
865
        }
866
        .middle {
867
            padding-top:0;
868
        }
869
    }
870
    .overlay-wrapper {
871
        .overlay-area {
872
            top:0;
873
        }
874
    }
875
}