Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 5... Línea 5...
5 
 * ----- moodle
 5 
 * ----- moodle
6 
 *  ---- step backdrop
 6 
 *  ---- step backdrop
7 
 *   --- step container
 7 
 *   --- step container
8 
 *   --- step target background
 8 
 *   --- step target background
9 
 */
 9 
 */
10 
$flexitour-base-zindex: 1040;
 10 
 $flexitour-base-zindex: 1040;
Línea 11... Línea 11...
11 
 
 11 
 
12 
// The backdrop is the backdrop used in 'modal' step display.
 12 
 // The backdrop is the backdrop used in 'modal' step display.
13 
div[data-flexitour="backdrop"] {
 13 
 div[data-flexitour="backdrop"] {
14 
    background-color: #{$modal-backdrop-bg};
 14 
     background-color: #{$modal-backdrop-bg};
15 
    opacity: #{$modal-backdrop-opacity};
 15 
     opacity: #{$modal-backdrop-opacity};
16 
 
 16
17 
    // The backdrop needs to have a lower z-index than everything else in the tour, but higher than everything else in Moodle.
 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};
 18 
     z-index: #{$flexitour-base-zindex};
19 
}
 19 
 }
20 
 
 20
21 
// The step-background is used to highlight the region targetted in the step.
 21 
 // The step-background is used to highlight the region targetted in the step.
22 
div[data-flexitour="step-background-fader"],
 22 
 div[data-flexitour="step-background-fader"],
23 
div[data-flexitour="step-background"] {
 23 
 div[data-flexitour="step-background"] {
24 
    @include border-radius($border-radius-lg);
 24 
     @include border-radius($btn-border-radius);
25 
 
 25
- 
 
 26 
     // The step container, and the target background should be at the same z-index.
26 
    // The step container, and the target background should be at the same z-index.
 27 
     padding: 10px;
27 
    z-index: ($flexitour-base-zindex + 1);
 28 
     z-index: ($flexitour-base-zindex + 1);
28 
}
 29 
 }
29 
 
 30
30 
span[data-flexitour="container"],
 31 
 span[data-flexitour="container"],
31 
div[data-flexitour="step-background-fader"],
 32 
 div[data-flexitour="step-background-fader"],
32 
[data-flexitour="step-backdrop"] > td,
 33 
 [data-flexitour="step-backdrop"] > td,
33 
[data-flexitour="step-backdrop"] {
 34 
 [data-flexitour="step-backdrop"] {
34 
    // The step container, and the target background should be at the same z-index.
 35 
     // The step container, and the target background should be at the same z-index.
35 
    z-index: ($flexitour-base-zindex + 2);
 36 
     z-index: ($flexitour-base-zindex + 2);
36 
}
 37 
 }
37 
 
 38
38 
span[data-flexitour="container"] {
 39 
 span[data-flexitour="container"] {
39 
    .modal-dialog {
 40 
     .modal-dialog {
40 
        /**
 41 
         /**
41 
         * Remove all margins to:
 42 
          * Remove all margins to:
42 
         * 1) ensure that the arrow touches the target; and
 43 
          * 1) ensure that the arrow touches the target; and
43 
         * 2) ensure that the focus border touches the modal.
 44 
          * 2) ensure that the focus border touches the modal.
44 
         */
 45 
          */
- 
 
 46 
         margin: 0;
- 
 
 47 
     }
- 
 
 48
- 
 
 49 
     div[data-role="arrow"] {
- 
 
 50 
         border-width: $popover-arrow-width;
- 
 
 51 
     }
- 
 
 52
- 
 
 53 
     div[data-role="arrow"],
- 
 
 54 
     div[data-role="arrow"]:after {
- 
 
 55 
         position: absolute;
- 
 
 56 
         display: block;
- 
 
 57 
         width: 0;
- 
 
 58 
         height: 0;
- 
 
 59 
         border-color: transparent;
- 
 
 60 
         border-style: solid;
- 
 
 61 
         border-width: #{$popover-arrow-width};
- 
 
 62 
     }
- 
 
 63
- 
 
 64 
     // We need to know the opposite sides for arrow placement.
- 
 
 65 
     $opposites:
- 
 
 66 
         (
- 
 
 67 
             top: bottom,
- 
 
 68 
             bottom: top,
- 
 
 69 
             left: right,
- 
 
 70 
             right: left,
- 
 
 71 
         );
- 
 
 72
- 
 
 73 
     // These are the next leading side and allow for placement half-way along the step dialogue.
- 
 
 74 
     $sides:
- 
 
 75 
         (
- 
 
 76 
             top: left,
- 
 
 77 
             bottom: left,
- 
 
 78 
             left: top,
- 
 
 79 
             right: top,
- 
 
 80 
         );
- 
 
 81
- 
 
 82 
     @each $direction in map-keys($opposites) {
- 
 
 83 
         $opposite: map_get($opposites, $direction);
- 
 
 84 
         $side: map_get($sides, $direction);
- 
 
 85 
         $oppositeside: map_get($opposites, $side);
- 
 
 86
- 
 
 87 
         &[x-placement="#{$direction}"],
- 
 
 88 
         &[x-placement="#{$direction}-start"] {
- 
 
 89 
             margin-#{$opposite}: #{$popover-arrow-width};
- 
 
 90 
             div[data-role="arrow"] {
- 
 
 91 
                 #{$opposite}: -$popover-arrow-width;
- 
 
 92 
                 #{$side}: 50%;
- 
 
 93 
                 margin-#{$side}: -$popover-arrow-width;
- 
 
 94 
                 border-#{$opposite}-width: 0;
- 
 
 95 
                 //border-#{$direction}-color: #{$popover-arrow-outer-color};
- 
 
 96 
             }
- 
 
 97 
             div[data-role="arrow"]:after {
- 
 
 98 
                 #{$opposite}: 1px;
- 
 
 99 
                 margin-#{$side}: -#{$popover-arrow-width};
- 
 
 100 
                 content: " ";
- 
 
 101 
                 border-#{$opposite}-width: 0;
- 
 
 102 
                 border-#{$direction}-color: #{$popover-arrow-color};
- 
 
 103 
             }
- 
 
 104 
         }
- 
 
 105 
     }
- 
 
 106
- 
 
 107 
     // RTL specific styles.
- 
 
 108 
     .dir-rtl & {
- 
 
 109 
         &[x-placement^="right"] {
- 
 
 110 
             margin-left: $popover-arrow-width;
- 
 
 111 
             div[data-role="arrow"] {
- 
 
 112 
                 transform: rotate(180deg);
- 
 
 113 
                 left: -$popover-arrow-width;
- 
 
 114 
                 right: auto;
- 
 
 115 
             }
- 
 
 116 
         }
- 
 
 117 
         &[x-placement^="left"] {
- 
 
 118 
             margin-right: $popover-arrow-width;
- 
 
 119 
             div[data-role="arrow"] {
- 
 
 120 
                 transform: rotate(180deg);
- 
 
 121 
                 left: auto;
- 
 
 122 
                 right: -$popover-arrow-width;
- 
 
 123 
             }
- 
 
 124 
         }
- 
 
 125 
     }
- 
 
 126 
 }
- 
 
 127
- 
 
 128 
 // Hack the bone! Hack the bone!
- 
 
 129 
 [data-region="drawer"] [data-flexitour="container"] {
- 
 
 130 
     /*rtl:ignore*/
- 
 
 131 
     margin-left: -15px;
- 
 
 132 
     width: $drawer-width - 10px;
- 
 
 133 
 }
- 
 
 134
- 
 
 135 
 span[data-flexitour="container"][x-placement="bottom-start"] div[data-role="arrow"]:after {
- 
 
 136 
    border-bottom-color: $container-bg;
- 
 
 137 
 
- 
 
 138 
    .theme-dark & {
45 
        margin: 0;
 139 
        border-bottom-color: $dm-container-bg;
- 
 
 140 
    }
- 
 
 141 
 }
- 
 
 142 
 
- 
 
 143 
 span[data-flexitour="container"][x-placement="top-start"] div[data-role="arrow"]:after {
Línea 46... Línea 144...
46 
    }
 144 
    border-top-color: $container-bg;
47 
 
 145 
 
48 
    div[data-role="arrow"] {
 146 
    .theme-dark & {
- 
 
 147 
        border-top-color: $dm-container-bg;
Línea 49... Línea 148...
49 
        border-width: $popover-arrow-width;
 148 
    }
50 
    }
 149 
 }
51 
 
 150 
 
52 
    div[data-role="arrow"],
 - 
 
53 
    div[data-role="arrow"]:after {
 - 
 
- 
 
 151 
 span[data-flexitour="container"][x-placement="left"] div[data-role="arrow"]:after,
54 
        position: absolute;
 152 
 span[data-flexitour="container"][x-placement="left-start"] div[data-role="arrow"]:after {
55 
        display: block;
 153 
    border-left-color: $container-bg;
56 
        width: 0;
 - 
 
57 
        height: 0;
 - 
 
58 
        border-color: transparent;
 154 
 
- 
 
 155 
    .theme-dark & {
- 
 
 156 
        border-left-color: $dm-container-bg;
- 
 
 157 
    }
- 
 
 158 
 }
- 
 
 159 
 
Línea 59... Línea -...
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;
 160 
 span[data-flexitour="container"][x-placement="right"] div[data-role="arrow"]:after,
93 
                border-#{$opposite}-width: 0;
 - 
 
94 
                border-#{$direction}-color: $border-color;
 - 
 
95 
 
 - 
 
96 
                .theme-dark & {
 - 
 
97 
                    border-#{$direction}-color: $dm-border-color;
 - 
 
98 
                }
 - 
 
99 
            }
 - 
 
100 
            div[data-role="arrow"]:after {
 - 
 
101 
                #{$opposite}: 1px;
 161 
 span[data-flexitour="container"][x-placement="right-start"] div[data-role="arrow"]:after {
102 
                margin-#{$side}: -#{$popover-arrow-width};
 - 
 
103 
                content: " ";
 - 
 
104 
                border-#{$opposite}-width: 0;
 - 
 
105 
                border-#{$direction}-color: $modal-content-bg;
 - 
 
106 
 
 - 
 
107 
                .theme-dark & {
 - 
 
108 
                    border-#{$direction}-color: $dm-modal-content-bg;
 162 
    border-right-color: $container-bg;
109 
                }
 163 
 
Línea -... Línea 164...
- 
 
 164 
    .theme-dark & {
110 
            }
 165 
        border-right-color: $dm-container-bg;
111 
        }
 166 
    }
- 
 
 167 
 }
112 
    }
 168 
 
113 
}
 169 
 
114 
 
 170 
 span[data-flexitour="container"],
115 
// Hack the bone! Hack the bone!
 - 
 
116 
[data-region="drawer"] [data-flexitour="container"] {
 171 
 div[data-flexitour="step-background-fader"],
117 
    /*rtl:ignore*/
 - 
 
118 
    margin-left: -15px;
 - 
 
119 
    width: $drawer-width - 10px;
 172 
 [data-flexitour="step-backdrop"]>td,
120 
}
 173 
 [data-flexitour="step-backdrop"] {
- 
 
 174 
    background-color: $container-bg;
121 
 
 175 
    border-radius: $btn-border-radius;
122 
span[data-flexitour="container"] .modal-dialog .modal-content .modal-header.minimal,
 176