You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.4 KiB
113 lines
3.4 KiB
7 years ago
|
/**
|
||
|
|
* Tour step must sit above all other UI components.
|
||
|
|
* The backdrop is the lowest point in the tour.
|
||
|
|
* Everything else is in the container, and the target background should be at the same z-index.
|
||
|
|
* ----- moodle
|
||
|
|
* ---- step backdrop
|
||
|
|
* --- step container
|
||
|
|
* --- step target background
|
||
|
|
*/
|
||
|
|
$flexitour-base-zindex: 1040;
|
||
|
|
|
||
|
|
// The backdrop is the backdrop used in 'modal' step display.
|
||
|
|
div[data-flexitour="backdrop"] {
|
||
|
|
background-color: #{$modal-backdrop-bg};
|
||
|
|
opacity: #{$modal-backdrop-opacity};
|
||
|
|
|
||
|
|
// The backdrop needs to have a lower z-index than everything else in the tour, but higher than everything else in Moodle.
|
||
|
|
z-index: #{$flexitour-base-zindex};
|
||
|
|
}
|
||
|
|
|
||
|
|
// The step-background is used to highlight the region targetted in the step.
|
||
|
|
div[data-flexitour="step-background-fader"],
|
||
|
|
div[data-flexitour="step-background"] {
|
||
|
|
@include border-radius($border-radius-lg);
|
||
|
|
|
||
|
|
// The step container, and the target background should be at the same z-index.
|
||
|
|
z-index: #{$flexitour-base-zindex} + 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
span[data-flexitour="container"],
|
||
|
|
div[data-flexitour="step-background-fader"],
|
||
|
|
[data-flexitour="step-backdrop"] > td,
|
||
|
|
[data-flexitour="step-backdrop"] {
|
||
|
|
// The step container, and the target background should be at the same z-index.
|
||
|
|
z-index: #{$flexitour-base-zindex} + 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
span[data-flexitour="container"] {
|
||
|
|
.modal-dialog {
|
||
|
|
/**
|
||
|
|
* Remove all margins to:
|
||
|
|
* 1) ensure that the arrow touches the target; and
|
||
|
|
* 2) ensure that the focus border touches the modal.
|
||
|
|
*/
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div[data-role="arrow"] {
|
||
|
|
border-width: #{$popover-arrow-outer-width};
|
||
|
|
}
|
||
|
|
|
||
|
|
div[data-role="arrow"],
|
||
|
|
div[data-role="arrow"]:after {
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-color: transparent;
|
||
|
|
border-style: solid;
|
||
|
|
border-width: #{$popover-arrow-width};
|
||
|
|
}
|
||
|
|
|
||
|
|
// We need to know the opposite sides for arrow placement.
|
||
|
|
$opposites:
|
||
|
|
(
|
||
|
|
top: bottom,
|
||
|
|
bottom: top,
|
||
|
|
left: right,
|
||
|
|
right: left,
|
||
|
|
);
|
||
|
|
|
||
|
|
// These are the next leading side and allow for placement half-way along the step dialogue.
|
||
|
|
$sides:
|
||
|
|
(
|
||
|
|
top: left,
|
||
|
|
bottom: left,
|
||
|
|
left: top,
|
||
|
|
right: top,
|
||
|
|
);
|
||
|
|
|
||
|
|
@each $direction in map-keys($opposites) {
|
||
|
|
$opposite: map_get($opposites, $direction);
|
||
|
|
$side: map_get($sides, $direction);
|
||
|
|
$oppositeside: map_get($opposites, $side);
|
||
|
|
|
||
|
|
&[x-placement="#{$direction}"],
|
||
|
|
&[x-placement="#{$direction}-start"] {
|
||
|
|
margin-#{$opposite}: #{$popover-arrow-width};
|
||
|
|
div[data-role="arrow"] {
|
||
|
|
#{$opposite}: -#{$popover-arrow-outer-width};
|
||
|
|
#{$side}: 50%;
|
||
|
|
margin-#{$side}: -#{$popover-arrow-outer-width};
|
||
|
|
border-#{$opposite}-width: 0;
|
||
|
|
border-#{$direction}-color: #{$popover-arrow-outer-color};
|
||
|
|
}
|
||
|
|
div[data-role="arrow"]:after {
|
||
|
|
#{$opposite}: 1px;
|
||
|
|
margin-#{$side}: -#{$popover-arrow-width};
|
||
|
|
content: " ";
|
||
|
|
border-#{$opposite}-width: 0;
|
||
|
|
border-#{$direction}-color: #{$popover-arrow-color};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hack the bone! Hack the bone!
|
||
|
|
[data-region="drawer"] [data-flexitour="container"] {
|
||
|
|
/*rtl:ignore*/
|
||
|
|
margin-left: -15px;
|
||
|
|
width: $drawer-width - 10px;
|
||
|
|
}
|