Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (23 kB)

1
/*
2

    
3
Overlays (Todo: clean up)
4

    
5
*/
6
// body.with-overlay {
7
//     background:$secondary-color;
8
// }
9

    
10
.reveal-modal {
11
    h3 {
12
        font-size:1em;
13
    }
14
    a {
15
        color: $secondary-color;
16
        &:hover {
17
            text-decoration: underline;
18
        }
19
        &.close-reveal-modal:hover {
20
            text-decoration: none;
21
            color:$secondary-color;
22
        }
23
    }   
24
}
25

    
26

    
27
// custom modal with opaque overlay
28
.reveal-custom {
29
    position: absolute;
30
    top:100px;
31
    left:25%;
32
    z-index:99;
33
    background:yellow;
34
    width:50%;
35
    display:none;
36
}
37

    
38

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

    
99

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

    
124
            }
125
        }
126

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

    
152
.wizard {
153
    position: relative;
154
    top:0;
155
    color:white;
156
    .top {
157
        background:$overlay-color-top;
158
        height:$bar-height+$bar-submenu-height;
159
        position:fixed;
160
        left:0;
161
        top:$header-height;
162
        width:100%;
163
        z-index:40;
164
        .numbers {
165
            height:$bar-height;
166
            line-height:$bar-height;
167
            background:$overlay-darker-color;
168
        }
169
        .sub-menu {
170
            display: none;
171
            &[data-step="1"] {
172
                display: block;
173
            }
174
            ul {
175
                margin:0;
176
                padding:0;
177
                list-style: none outside none;
178
                font-size:emCalc(12px);
179
                li {
180
                    display: inline;
181
                    margin-right:10px;
182
                    line-height: $bar-submenu-height;
183
                    list-style: none outside none;
184
                    a {
185
                        color:$black;
186
                        &:hover, &:focus, &.current {
187
                            color:white;
188
                        }
189
                        &.current {
190
                            text-decoration: underline;
191
                        }
192
                    }
193
                }
194
            }
195
        }
196
        .nums {
197
            text-align: right;
198
            list-style:none outside none;
199
            margin:0;
200
            height: $bar-height;
201
            line-height: $bar-height;
202
            font-size:emCalc(12px);
203
            padding-right:120px;
204
            color:$secondary-color;
205
            li {
206
                list-style:none outside none;
207
                display: inline;
208
                p {
209
                    display: none;
210
                    position: relative;
211
                    top: 1px;
212
                    strong {
213
                        font-size:16px;
214
                        margin-right:10px;
215
                    }
216
                }
217
                em {
218
                    display: inline-block;
219
                    border-radius:50%;
220
                    border:1px solid $secondary-color;
221
                    width:25px;
222
                    height:25px;
223
                    line-height: 21px;
224
                    margin:0 3px;
225
                    text-align: center;
226
                    font-style: normal;
227
                }
228
                a {
229
                    color:$secondary-color;
230
                    display: block;
231
                    &:hover {
232
                        cursor: default;
233
                    }
234
                }
235
                &.current{
236
                    float: left;
237
                    p {
238
                        display: inline-block;
239
                    }
240
                    em {
241
                        font-size:emCalc(16px);
242
                        width:30px;
243
                        height:30px;
244
                        line-height: 27px;
245
                        border-color:$secondary-color;
246
                        * {
247
                            color:$secondary-color;
248
                        }
249
                    }
250
                }
251
            }
252
        }
253
    }
254
    .middle {
255
        padding-top:$bar-height+$bar-submenu-height;
256
        .step {
257
            padding:50px 0 50px;
258
            position:relative;
259
            width:$row-width;
260
            overflow:hidden;
261
            overflow-y: scroll;
262
           &.step-3 {
263
           	padding-bottom: 0;
264
           }
265
            .os {
266
                li {
267
                    list-style: none outside none;
268
                    @extend .clearfix;
269
                    padding:0.5em 0;
270
                    &:hover,
271
                    &.hover {
272
                        background:$overlay-darker-color;
273
                    }
274
                    &.current {
275
                        background:white;
276
                        color:$overlay-color;
277
                        .name-col {
278
                            color:$overlay-color;
279
                        }
280
                        .btn-col {
281
                            a {
282
                                @extend .btn5;
283
                                border-color:$overlay-color;
284
                                color:$overlay-color;
285
                                &.current {
286
                                    color:white;
287
                                    background:$overlay-color;
288
                                }
289
                            }
290
                        }
291
                    }
292
                    .img-col {
293
                        float:left;
294
                        width:10%;
295
                        padding-right:10px;
296
                    }
297
                    .name-col {
298
                        float: left;
299
                        color: $wizard-base-font-color;
300
                        width:65%;
301
                        padding-right:10px;
302
                    }
303
                    .size-col {
304
                        float:left;
305
                        width:10%;
306
                    }
307
                    .btn-col {
308
                        float:left;
309
                        width:10%;
310
                        margin-left:10px;
311
                        a {
312
                            @extend .btn5;
313
                            &.current {
314
                                color:$overlay-color;
315
                            }
316
                        }
317
                    }
318
                    .details {
319
                        display: none;
320
                        background:darken(white,10%);
321
                        padding:30px 0;
322
                        margin:20px 6px 6px;
323
                        color: $body-font-color;
324
                        h3 {
325
                            font-size: 1em;
326
                        }
327
                        dl {
328
                            @extend .clearfix;
329
                            dt {
330
                                width: 20%;
331
                                float:left;
332
                                font-weight:normal;
333
                            }
334
                            dd {
335
                                margin:0 0 5px;
336
                            }
337
                        }
338
                    }
339
                }
340
            }
341
            .flavor {
342
                list-style: none outside none;
343
                li {
344
                    list-style:none outside none;
345
                    margin-bottom:1.5em;
346
                    .title {
347
                        @extend .clearfix;
348
                        margin-bottom:emCalc(5px);
349
                        color:white;
350
                        vertical-align: top;
351
                        .icon {
352
                            display: block;
353
                            width:5%;
354
                            font-size:emCalc(40px);
355
                            float: left;
356
                        }
357
                        h2 {
358
                            font-size:emCalc(16px);
359
                            span {
360
                                font-weight:normal;
361
                            }
362
                            float:left;
363
                            width: 19%;
364
                            color:white;
365
                            margin-right:4%;
366
                            padding-left:emCalc(10px);
367
                            &:hover {
368
                                & + p {
369
                                    visibility: visible;
370
                                }
371
                            }
372
                        }
373
                        p {
374
                            visibility: hidden;
375
                            float:left;
376
                            width:70%;
377
                            font-size:emCalc(12px);
378
                        }
379
                    }
380
                    .options-bar {
381
                        @extend .clearfix;
382
                        .bar {
383
                            width:24%;
384
                            float: left;
385
                            margin-right:4%;
386
                            height: 26px;
387
                            position: relative;
388
                            top:2px;
389
                            .wrap {
390
                                border:1px solid white;
391
                                padding:1px;
392
                                height: 100%;
393
                                &.disabled-progress-bar {
394
                                    border-color: #3a4046;
395
                                    .container{
396
                                        .total {
397
                                            background-color: #3a4046;
398
                                        }
399
                                    }
400
                                }
401
                                .container {
402
                                    height: 100%;
403
                                    .total {
404
                                        background:$primary-color;
405
                                        height: 100%;
406
                                        float:left;
407
                                        position: relative;
408
                                        .current {
409
                                            background:white;
410
                                            height: 100%;
411
                                            float:left;
412
                                        }
413
                                        span {
414
                                            position:absolute;
415
                                            right:10px;
416
                                            color:$black;
417
                                            font-size: emCalc(12px);
418
                                        }
419
                                        &.low {
420
                                            span {
421
                                                right:-30px;
422
                                                color:white;
423
                                            }
424
                                        }
425
                                    }
426
                                }
427

    
428
                            }
429
                        }
430
                        .options {
431
                            overflow:hidden;
432
                            list-style: none outside none;
433
                            li {
434
                                list-style: none outside none;
435
                                display: inline-block;
436
                                margin-right: 10px;
437
                                a {
438
                                    @extend .btn5;
439
                                    min-width: 60px;
440
                                    &.current {
441
                                        color:$overlay-color;
442
                                    }
443
                                }
444
                            }
445
                        }
446
                    }
447
                }
448
            }
449
            .summary {
450
                .row {
451
                    padding-top:1em;
452
                    margin-top:1em;
453
                    border-top:1px solid white;
454
                    &:first-child {
455
                        border-top:0 none;
456
                    }
457
                }
458
                h2 {
459
                    font-size:1em;
460
                    color:white;
461
                }
462
                dl {
463
                    margin-bottom:0;
464
                    span {
465
                        margin-right:10px;
466
                        font-size:20px;
467
                    }
468
                    dt {
469
                        display: inline-block;
470
                        width: 45%;
471
                        vertical-align: top;
472
                    }
473
                    dd {
474
                        display: inline-block;
475
                        width:45%;
476
                    }
477
                }
478
            }
479
            .advanced-conf-step {
480
                color: $wizard-base-font-color;
481
                h2 {
482
                    color: $wizard-base-font-color;
483
                    font-size: 1em;
484
                    margin:0 auto 1em;
485
                }
486
                p {
487
                    font-size: $wizard-paragraph-font-size;
488
                }
489

    
490
                .snf-checkbox-checked, .snf-checkbox-unchecked {
491
                    color: $wizard-base-font-color;
492
                }   
493
                .expand-btn {
494
                    margin: 50px 0 30px;
495
                    a {
496
                        color:$wizard-base-font-color;
497
                    }
498

    
499
                   
500
                }
501
                .adv-main {
502
                    padding: 10px 0 30px;
503
                    width:$row-small;
504
                    .vm-name {
505
                        h2 {
506
                            color:white;
507
                            font-size:1em;
508
                            margin-bottom:0.5em;
509
                        }
510
                    }
511
                }
512
                .btn5 {
513
                    &:hover {
514
                        color:white;
515
                }
516
                    &.current, &.current:hover {
517
                        color:$overlay-color;
518
                    }
519
                }
520
                .advanced-conf-options {
521
                    display: none;
522
                    .area {
523
                        padding:30px 0;
524
                        .row {
525
                            width:$row-small;
526
                            padding-left:0;
527
                        }
528
                        ul {
529
                            li {
530
                                position: relative;
531
                                list-style:none outside none;
532
                                margin-bottom:7px;
533
                                &.checkbox {
534
                                    &:hover {
535
                                        cursor: pointer;
536
                                    }
537
                                }
538
                                h3 {
539
                                    width: $conf-area-h-width;
540
                                    color:white;
541
                                    font-size:1em;
542
                                    font-weight: normal;
543
                                    margin:0 20px 0 0;
544
                                    display: inline-block;
545
                                    //&.net-name { width: 9.063em }
546
                                }
547
                            }
548
                        }
549
                    }
550
                    .ssh-keys-area {
551
                        background-color: $ssh-opt-area-color;
552
                    }
553
                    .networks-area {
554
                        background-color: $net-opt-area-color;
555
                        li {
556
                            .net-icons {
557
                                padding-right:20px;
558
                                // position:absolute;
559
                                // left:-200px;
560
                                // top:-12px;
561
                                display: inline-block;
562
                                width:145px;
563
                                text-align: right;
564
                                font-size:30px;
565
                                margin-bottom: 0;
566
                                span {
567
                                    margin-left:6px;
568
                                    &.snf-modem {
569
                                        position: relative;
570
                                        top:-6px;
571
                                    }
572
                                }
573
                            }
574
                   
575
                           
576
                           
577
                            &.more {
578
                                // display: none;
579
                                background:$net-more-opt-area-color;
580
                                margin-bottom:1em;
581
                                padding:30px 0;
582
                                color:$net-opt-area-color;
583
                                h3 {
584
                                    color:$net-opt-area-color;
585
                                    padding-left: 145px;
586
                                }
587
                                .btn5 {
588
                                    margin-top:1em;
589
                                    border-color:$net-opt-area-color;
590
                                    color:$net-opt-area-color;
591
                                }
592
                                .checkbox {
593
                                    a {
594
                                        span {
595
                                            color: $net-opt-area-color;
596
                                        }
597
                                    }
598
                                }
599
                            }
600
                        }
601

    
602
                    }
603
                    .tags-area {
604
                        background-color: $tag-opt-area-color;
605
                        .snf-color-picker {
606
                            display: none;
607
                        }
608
                        #picker {
609
                            position: relative;
610
                            width: 207px;
611
                            margin: 30px 5px;
612
                            display: inline-block;
613
                        }
614
                        .form-item {
615
                            //display:inline-block;
616
                            // position: relative;
617
                            // bottom: 20px;
618
                       
619
                        }
620
                        .btns {
621
                            // position: relative;
622
                            // bottom: -45px;
623
                            // margin-bottom: 45px;
624
                            margin-top: 77px;
625
                            margin-bottom: 30px;
626
                        }
627
                        .btn5 {
628
                            margin-right:20px;
629
                        }
630

    
631
                    }
632

    
633
                }
634
            }
635
        }
636
       
637
    }
638
    .bottom {
639
        position: fixed;
640
        left:0;
641
        right:0;
642
        bottom:0;
643
        border-top:1px solid $black;
644
        background:$overlay-color;
645
        .row {
646
            height: $bar-height;
647
            line-height: $bar-height;
648
        }
649
        .nav {
650
            height: $bar-height;
651
            line-height: $bar-height;
652
            color:white;
653
            display: inline-block;
654
            position: relative;
655
            font-size: emCalc(12px);
656
            top:($bar-height - 30px)/2;
657
            width: 100px;
658
            &:hover {
659
                @include transition(background, 0ms, ease-out);
660
            }
661
            span {
662
                display: inline-block;
663
                height: 30px;
664
                line-height:30px;
665
                float: left;
666
                &:hover {
667
                    @include transition(background, 0ms, linear);
668
                }
669
            }
670
            &:focus {
671
                color:green;
672
            }
673
        }
674
        .prev {
675
            float:left;
676
            height:30px;
677
            padding-left:18px;
678
            background:url('../images/nav-edge-lt.png') no-repeat left top;
679
            span {
680
                padding-right:10px;
681
                background:url('../images/nav-lt.png') no-repeat right top;
682
            }
683
            &:hover,
684
            &.active {
685
                background-position:left bottom;
686
                span {
687
                    background-position:right bottom;
688
                }
689
            }
690
        }
691
        .next {
692
            float:right;
693
            height:30px;
694
            padding-right:18px;
695
            background:url('../images/nav-edge-rt.png') no-repeat right top;
696
            span {
697
                padding-left:10px;
698
                background:url('../images/nav-rt.png') no-repeat left top;
699
                float: right;
700
            }
701
            &:hover,
702
            &.active {
703
                background-position:right bottom;
704
                span {
705
                    background-position:left bottom;
706
                    float:right;
707
                }
708
            }
709
        }
710
    }
711
}
712

    
713

    
714
.wizard-content {
715
    overflow: hidden;
716
    width:100%;
717
    .vm-wizard-carousel {
718
        position:relative;
719
        left:0;
720
        .step {
721
            float:left;
722
        }
723
    }
724
}
725

    
726
/* Responive ------------------------------------------------ */
727
@media only screen and (max-width: $small-mobile) {
728
}
729

    
730
@media only screen and (max-width: $small-screen) {
731
    .wizard {
732
        .top {
733
            position: static;
734
        }
735
        .middle {
736
            padding-top:0;
737
        }
738
    }
739
    .overlay-wrapper {
740
        .overlay-area {
741
            top:0;
742
        }
743
    }
744
}