weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / tool_usertours.scss
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;
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};
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 }
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);
26     // The step container, and the target background should be at the same z-index.
27     z-index: ($flexitour-base-zindex + 1);
28 }
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 }
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     }
48     div[data-role="arrow"] {
49         border-width: $popover-arrow-width;
50     }
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     }
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         );
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         );
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);
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: #{$popover-arrow-outer-color};
95             }
96             div[data-role="arrow"]:after {
97                 #{$opposite}: 1px;
98                 margin-#{$side}: -#{$popover-arrow-width};
99                 content: " ";
100                 border-#{$opposite}-width: 0;
101                 border-#{$direction}-color: #{$popover-arrow-color};
102             }
103         }
104     }
107 // Hack the bone! Hack the bone!
108 [data-region="drawer"] [data-flexitour="container"] {
109     /*rtl:ignore*/
110     margin-left: -15px;
111     width: $drawer-width - 10px;