Proyectos de Subversion Moodle

Rev

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