Proyectos de Subversion Moodle

/**
 * 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($btn-border-radius);
 
     // The step container, and the target background should be at the same z-index.
     padding: 10px;
     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-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-width;
                 #{$side}: 50%;
                 margin-#{$side}: -$popover-arrow-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};
             }
         }
     }
 
     // RTL specific styles.
     .dir-rtl & {
         &[x-placement^="right"] {
             margin-left: $popover-arrow-width;
             div[data-role="arrow"] {
                 transform: rotate(180deg);
                 left: -$popover-arrow-width;
                 right: auto;
             }
         }
         &[x-placement^="left"] {
             margin-right: $popover-arrow-width;
             div[data-role="arrow"] {
                 transform: rotate(180deg);
                 left: auto;
                 right: -$popover-arrow-width;
             }
         }
     }
 }
 
 // Hack the bone! Hack the bone!
 [data-region="drawer"] [data-flexitour="container"] {
     /*rtl:ignore*/
     margin-left: -15px;
     width: $drawer-width - 10px;
 }
 
 span[data-flexitour="container"][x-placement="bottom-start"] div[data-role="arrow"]:after {
    border-bottom-color: $container-bg;

    .theme-dark & {
        border-bottom-color: $dm-container-bg;  
    }
 }

 span[data-flexitour="container"][x-placement="top-start"] div[data-role="arrow"]:after {
    border-top-color: $container-bg;

    .theme-dark & {
        border-top-color: $dm-container-bg;
    }
 }

 span[data-flexitour="container"][x-placement="left"] div[data-role="arrow"]:after,
 span[data-flexitour="container"][x-placement="left-start"] div[data-role="arrow"]:after {
    border-left-color: $container-bg;

    .theme-dark & {
        border-left-color: $dm-container-bg;  
    }
 }

 span[data-flexitour="container"][x-placement="right"] div[data-role="arrow"]:after,
 span[data-flexitour="container"][x-placement="right-start"] div[data-role="arrow"]:after {
    border-right-color: $container-bg;

    .theme-dark & {
        border-right-color: $dm-container-bg;  
    }
 }


 span[data-flexitour="container"],
 div[data-flexitour="step-background-fader"],
 [data-flexitour="step-backdrop"]>td,
 [data-flexitour="step-backdrop"] {
    background-color: $container-bg;
    border-radius: $btn-border-radius;

    .theme-dark & {
        background-color: $dm-container-bg;
    }
 }