Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
/**
2
 * Tour step must sit above all other UI components.
3
 * The backdrop is the lowest point in the tour.
4
 * Everything else is in the container, and the target background should be at the same z-index.
5
 * ----- moodle
6
 *  ---- step backdrop
7
 *   --- step container
8
 *   --- step target background
9
 */
10
$flexitour-base-zindex: 1040;
11
 
12
// The backdrop is the backdrop used in 'modal' step display.
13
div[data-flexitour="backdrop"] {
14
    background-color: #{$modal-backdrop-bg};
15
    opacity: #{$modal-backdrop-opacity};
16
 
17
    // The backdrop needs to have a lower z-index than everything else in the tour, but higher than everything else in Moodle.
18
    z-index: #{$flexitour-base-zindex};
19
}
20
 
21
// The step-background is used to highlight the region targetted in the step.
22
div[data-flexitour="step-background-fader"],
23
div[data-flexitour="step-background"] {
24
    @include border-radius($border-radius-lg);
25
 
26
    // The step container, and the target background should be at the same z-index.
27
    z-index: ($flexitour-base-zindex + 1);
28
}
29
 
30
span[data-flexitour="container"],
31
div[data-flexitour="step-background-fader"],
32
[data-flexitour="step-backdrop"] > td,
33
[data-flexitour="step-backdrop"] {
34
    // The step container, and the target background should be at the same z-index.
35
    z-index: ($flexitour-base-zindex + 2);
36
}
37
 
38
span[data-flexitour="container"] {
39
    .modal-dialog {
40
        /**
41
         * Remove all margins to:
42
         * 1) ensure that the arrow touches the target; and
43
         * 2) ensure that the focus border touches the modal.
44
         */
45
        margin: 0;
46
    }
47
 
48
    div[data-role="arrow"] {
49
        border-width: $popover-arrow-width;
50
    }
51
 
52
    div[data-role="arrow"],
53
    div[data-role="arrow"]:after {
54
        position: absolute;
55
        display: block;
56
        width: 0;
57
        height: 0;
58
        border-color: transparent;
59
        border-style: solid;
60
        border-width: #{$popover-arrow-width};
61
    }
62
 
63
    // We need to know the opposite sides for arrow placement.
64
    $opposites:
65
        (
66
            top: bottom,
67
            bottom: top,
68
            left: right,
69
            right: left,
70
        );
71
 
72
    // These are the next leading side and allow for placement half-way along the step dialogue.
73
    $sides:
74
        (
75
            top: left,
76
            bottom: left,
77
            left: top,
78
            right: top,
79
        );
80
 
81
    @each $direction in map-keys($opposites) {
82
        $opposite: map_get($opposites, $direction);
83
        $side: map_get($sides, $direction);
84
        $oppositeside: map_get($opposites, $side);
85
 
86
        &[x-placement="#{$direction}"],
87
        &[x-placement="#{$direction}-start"] {
88
            margin-#{$opposite}: #{$popover-arrow-width};
89
            div[data-role="arrow"] {
90
                #{$opposite}: -$popover-arrow-width;
91
                #{$side}: 50%;
92
                margin-#{$side}: -$popover-arrow-width;
93
                border-#{$opposite}-width: 0;
94
                border-#{$direction}-color: $border-color;
95
 
96
                .theme-dark & {
97
                    border-#{$direction}-color: $dm-border-color;
98
                }
99
            }
100
            div[data-role="arrow"]:after {
101
                #{$opposite}: 1px;
102
                margin-#{$side}: -#{$popover-arrow-width};
103
                content: " ";
104
                border-#{$opposite}-width: 0;
105
                border-#{$direction}-color: $modal-content-bg;
106
 
107
                .theme-dark & {
108
                    border-#{$direction}-color: $dm-modal-content-bg;
109
                }
110
            }
111
        }
112
    }
113
}
114
 
115
// Hack the bone! Hack the bone!
116
[data-region="drawer"] [data-flexitour="container"] {
117
    /*rtl:ignore*/
118
    margin-left: -15px;
119
    width: $drawer-width - 10px;
120
}
121
 
122
span[data-flexitour="container"] .modal-dialog .modal-content .modal-header.minimal,
123
span[data-flexitour="container"] .modal-dialog .modal-content .modal-footer.minimal {
124
    padding-top: 15px;
125
    padding-bottom: 15px;
126
}