Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (19.7 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:90px; // numbers height+menus height-10px
161
		position:fixed;
162
		left:0;
163
		right:0;
164
		bottom:auto;
165
		top:$header-height;
166
		width:100%;
167
		z-index:40;
168
		.numbers {
169
			.row {
170
				max-width: 100%;
171
				padding:0 $header-padding-horizontal
172

    
173
			}
174
			height: 50px;
175
			line-height: 50px;
176
			background:$overlay-darker-color;
177
		}
178
		.menus {
179
			height: 50px;
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
							&.disabled {
204
								color: $disabled-flavor-color;
205
								cursor: default;
206

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

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

    
488
							}
489
						}
490
						.options {
491
							overflow:hidden;
492
							list-style: none outside none;
493
							li {
494
								list-style: none outside none;
495
								display: inline-block;
496
								margin-right: 10px;
497
								margin-bottom:0;
498
								a {
499
									@extend .btn5;
500
									min-width: 60px;
501
									&.current {
502
										color:$overlay-color;
503
									}
504
									&.disabled {
505
										border-color: $disabled-resource-color;
506
										color: $disabled-resource-color;
507
										&:hover, &:active {
508
											cursor: default;
509
											border-width: 1px;
510
											line-height: 28px;
511

    
512
										}
513
									}
514
								}
515
							}
516
						}
517
					}
518
				}
519
			}
520
			.summary {
521
				padding-bottom:40px;
522
				.row {
523
					.wrap {
524
						max-width: $row-small;
525
						border-top:1px solid white;
526
						padding-top:2em;
527
						margin-top:1em;
528
					}
529
					&:first-child {
530
						.wrap {
531
							border-top:0 none;
532
							margin-top:0;
533
						}
534
						dl {
535
							dt {
536
								font-weight: bold;
537
							}
538
						}
539
					}
540
				}
541
				h2 {
542
					font-size:1em;
543
					color:white;
544
					margin-bottom:1em;
545
				}
546
				dl {
547
					margin-bottom:0;
548
					span {
549
						width:40px;
550
						display: inline-block;
551
						font-size:20px;
552
					}
553
					dt {
554
						display: inline-block;
555
						width: 42%;
556
						vertical-align: top;
557
						font-weight:600;
558
					}
559
					dd {
560
						display: inline-block;
561
						width:45%;
562
						margin-bottom:1em;
563
					}
564
				}
565
			}
566
			.advanced-conf-step {
567
				color: $wizard-base-font-color;
568
				h2 {
569
					color: $wizard-base-font-color;
570
					font-size: 1em;
571
					margin-bottom: 10px;
572
				}
573
				p {
574
					font-size: $wizard-paragraph-font-size;
575
				}
576
                .snf-checkbox-checked, .snf-checkbox-unchecked {
577
                    color: $wizard-base-font-color;
578
                }   
579
                .expand-btn {
580
                    margin: 50px 0 $step-adv-padding;
581
                    a {
582
                        color:$wizard-base-font-color;
583
                        span {
584
                        	padding-left:24px;
585
                        }
586
                      }
587

    
588
                   
589
                }
590
                .adv-main {
591
                    // padding: 10px 0 30px;
592
                    // width:$row-small;
593
                    .vm-name {
594
                        h2 {
595
                            color:white;
596
                            font-size:1em;
597
                            margin-bottom:0.5em;
598
                        }
599

    
600
                    }
601
                }
602
                .btn5 {
603
                    &:hover {
604
                        color:white;
605
                }
606
                    &.current, &.current:hover {
607
                        color:$overlay-color;
608
                    }
609
                }
610
                .advanced-conf-options {
611
                    display: none;
612
                    .check {
613
                    	font-size: 20px;
614
                    }
615
                    .area {
616
                        padding:$step-adv-padding 0;
617
                        .row {
618
	                        p{
619
								max-width:340px;
620
	                        	margin-bottom: 20px;
621
	                        }
622
                        }
623
                        ul {
624
                            li {
625
                                position: relative;
626
                                list-style:none outside none;
627
                                margin-bottom:7px;
628
                                &.checkbox {
629
                                    &:hover {
630
                                        cursor: pointer;
631
                                    }
632
                                }
633
                                h3 {
634
                                    width: $conf-area-h-width;
635
                                    color:white;
636
                                    font-size:1em;
637
                                    font-weight: normal;
638
                                    margin:0 28px 0 0;
639
                                    display: inline-block;
640
                                    //&.net-name { width: 9.063em }
641
                                }
642
                            }
643
                        }
644
                    }
645
                    .ssh-keys-area {
646
                        background-color: $ssh-opt-area-color;
647
                        .btn5 {
648
                        	margin-top: 3px;
649
                        }
650

    
651
                    }
652
                    .networks-area {
653
                        background-color: $net-opt-area-color;
654
                        ul {
655
                        	position: relative;
656
							margin-bottom:0;
657
                        }
658
                        li {
659
                            .net-icons {
660
                                padding-right:30px;
661
                                display: inline-block;
662
                                width:145px;
663
                                text-align: right;
664
                                font-size:30px;
665
                                margin-bottom: 0;
666
                                position: relative;
667
                                span {
668
 									position: relative;
669
                                    &.snf-modem {
670
                                        top:-1px;
671
                                    }
672
                                    &.snf-www {
673
                                        top:6px;
674
                                    }
675
                                    &.snf-network_full {
676
                                        top:5px;
677
                                    }
678
                                    &.temp-line {
679
										position: absolute;
680
										height:1px;
681
										width:13px;
682
										background:white;
683
										bottom:15px;
684
										&.line1 { right:56px; }
685
										&.line2 {
686
 											right:97px;
687
											width:10px;
688
 										}
689
 									}
690
 								}
691
                            }
692
                            &.more {
693
                                background:$net-more-opt-area-color;
694
                                margin:$step-adv-padding 0;
695
                                padding:$step-adv-padding 0;
696
                                color:$net-opt-area-color;
697
                                h3 {
698
                                    color:$net-opt-area-color;
699
                                    padding-left: 145px;
700
                                    &:hover {
701
 										cursor: pointer;
702
                                    }
703
                                }
704
                                .btn5 {
705
                                    margin-top:20px;
706
                                    border-color:$net-opt-area-color;
707
                                    color:$net-opt-area-color;
708
                                    margin-left:145px;
709
                                }
710
                                .with-checkbox {
711
                                    a {
712
                                        span {
713
                                            color: $net-opt-area-color;
714
                                        }
715
                                    }
716
                                }
717
                            }
718
                        }
719

    
720
                    }
721
                    .tags-area {
722
                        background-color: $tag-opt-area-color;
723
                        .snf-color-picker {
724
                            display: none;
725
                        }
726
                        #picker {
727
                            position: relative;
728
                            width: 207px;
729
                            margin: 30px 5px;
730
                            display: inline-block;
731
                        }
732
                        .btns {
733
                            margin-top: 77px;
734
                            margin-bottom: 30px;
735
                        }
736
                        .btn5 {
737
                            margin-right:20px;
738
                        }
739
                        .tag-demo {
740
							left:10px;
741
                        }
742
                      	h3 {
743
                            width: $conf-area-h-width;
744
                            color:white;
745
                            font-size:1em;
746
                            font-weight: normal;
747
                            margin:0 28px 0 0;
748
                            display: inline-block;
749
                            //&.net-name { width: 9.063em }
750
                           }
751
                        .list-header {
752
                        	position: relative;
753
                        	left: -14px;
754
                        	h3 {
755
                        		margin-right: 35px;
756
                        	}
757
                        }
758

    
759

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

    
841
/* Responive ------------------------------------------------ */
842
@media only screen and (max-width: $small-mobile) {
843
}
844

    
845
@media only screen and (max-width: $small-screen) {
846
    .wizard {
847
        .top {
848
            position: static;
849
        }
850
        .middle {
851
            padding-top:0;
852
        }
853
    }
854
    .overlay-wrapper {
855
        .overlay-area {
856
            top:0;
857
        }
858
    }
859
}