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;
  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: #{$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 }
 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 }