weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / tool_usertours.scss
CommitLineData
001fc061
AN
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.
13div[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.
22div[data-flexitour="step-background-fader"],
23div[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.
139dfc8b 27 z-index: ($flexitour-base-zindex + 1);
001fc061
AN
28}
29
30span[data-flexitour="container"],
31div[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.
139dfc8b 35 z-index: ($flexitour-base-zindex + 2);
001fc061
AN
36}
37
38span[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"] {
4394f9e3 49 border-width: $popover-arrow-width;
001fc061
AN
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"] {
4394f9e3 90 #{$opposite}: -$popover-arrow-width;
001fc061 91 #{$side}: 50%;
4394f9e3 92 margin-#{$side}: -$popover-arrow-width;
001fc061
AN
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 }
105}
3eb3d916
RW
106
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;
112}