Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (19.6 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
						&.disabled {
204
							color: $disabled-flavor-color;
205
							cursor: default;
206

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

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

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

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

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

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

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

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

    
755

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

    
837
/* Responive ------------------------------------------------ */
838
@media only screen and (max-width: $small-mobile) {
839
}
840

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