Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
.popover {
2 
  position: absolute;
3 
  top: 0;
4 
  left: 0;
5 
  z-index: $zindex-popover;
6 
  display: block;
7 
  max-width: $popover-max-width;
8 
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9 
  // So reset our font and text properties to avoid inheriting weird values.
10 
  @include reset-text();
11 
  @include font-size($popover-font-size);
12 
  // Allow breaking very long words so they don't overflow the popover's bounds
13 
  word-wrap: break-word;
14 
  background-color: $popover-bg;
15 
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
16 
 
17 
  @include border-radius($popover-border-radius);
18 
 
19 
  .theme-dark & {
20 
    background-color: $dm-popover-bg;
21 
  }
22 
 
23 
  .arrow {
24 
    position: absolute;
25 
    display: block;
26 
    width: $popover-arrow-width;
27 
    height: $popover-arrow-height;
28 
    margin: 0 $popover-border-radius;
29 
 
30 
    &::before,
31 
    &::after {
32 
      position: absolute;
33 
      display: block;
34 
      content: "";
35 
      border-color: transparent;
36 
      border-style: solid;
37 
    }
38 
  }
39 
}
40 
 
41 
.bs-popover-top {
42 
  margin-bottom: $popover-arrow-height;
43 
 
44 
  >.arrow {
45 
    bottom: subtract(-$popover-arrow-height, $popover-border-width);
46 
 
47 
    &::before {
48 
      bottom: 0;
49 
      border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
50 
      border-top-color: $popover-arrow-outer-color;
51 
 
52 
      .theme-dark & {
53 
        border-top-color: $dm-popover-arrow-outer-color;
54 
      }
55 
    }
56 
 
57 
    &::after {
58 
      bottom: $popover-border-width;
59 
      border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
60 
      border-top-color: $popover-arrow-color;
61 
 
62 
      .theme-dark & {
63 
        border-top-color: $dm-popover-arrow-color;
64 
      }
65 
    }
66 
  }
67 
}
68 
 
69 
.bs-popover-right {
70 
  margin-left: $popover-arrow-height;
71 
 
72 
  >.arrow {
73 
    left: subtract(-$popover-arrow-height, $popover-border-width);
74 
    width: $popover-arrow-height;
75 
    height: $popover-arrow-width;
76 
    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
77 
 
78 
    &::before {
79 
      left: 0;
80 
      border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 0;
81 
      border-right-color: $popover-arrow-outer-color;
82 
 
83 
      .theme-dark & {
84 
        border-right-color: $dm-popover-arrow-outer-color;
85 
      }
86 
    }
87 
 
88 
    &::after {
89 
      left: $popover-border-width;
90 
      border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 0;
91 
      border-right-color: $popover-arrow-color;
92 
 
93 
      .theme-dark & {
94 
        border-right-color: $dm-popover-arrow-color;
95 
      }
96 
    }
97 
  }
98 
}
99 
 
100 
.bs-popover-bottom {
101 
  margin-top: $popover-arrow-height;
102 
 
103 
  >.arrow {
104 
    top: subtract(-$popover-arrow-height, $popover-border-width);
105 
 
106 
    &::before {
107 
      top: 0;
108 
      border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5);
109 
      border-bottom-color: $popover-arrow-outer-color;
110 
 
111 
      .theme-dark & {
112 
        border-bottom-color: $dm-popover-arrow-outer-color;
113 
      }
114 
    }
115 
 
116 
    &::after {
117 
      top: $popover-border-width;
118 
      border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5);
119 
      border-bottom-color: $popover-arrow-color;
120 
 
121 
      .theme-dark & {
122 
        border-bottom-color: $dm-popover-arrow-color;
123 
      }
124 
    }
125 
  }
126 
 
127 
  // This will remove the popover-header's border just below the arrow
128 
  .popover-header::before {
129 
    position: absolute;
130 
    top: 0;
131 
    left: 50%;
132 
    display: block;
133 
    width: $popover-arrow-width;
134 
    margin-left: -$popover-arrow-width * 0.5;
135 
    content: "";
136 
    border-bottom: $popover-border-width solid $popover-header-bg;
137 
 
138 
    .theme-dark & {
139 
      border-bottom: $popover-border-width solid $dm-popover-header-bg;
140 
    }
141 
  }
142 
}
143 
 
144 
.bs-popover-left {
145 
  margin-right: $popover-arrow-height;
146 
 
147 
  >.arrow {
148 
    right: subtract(-$popover-arrow-height, $popover-border-width);
149 
    width: $popover-arrow-height;
150 
    height: $popover-arrow-width;
151 
    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
152 
 
153 
    &::before {
154 
      right: 0;
155 
      border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $popover-arrow-height;
156 
      border-left-color: $popover-arrow-outer-color;
157 
 
158 
      .theme-dark & {
159 
        border-left-color: $dm-popover-arrow-outer-color;
160 
      }
161 
    }
162 
 
163 
    &::after {
164 
      right: $popover-border-width;
165 
      border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $popover-arrow-height;
166 
      border-left-color: $popover-arrow-color;
167 
 
168 
      .theme-dark & {
169 
        border-left-color: $dm-popover-arrow-color;
170 
      }
171 
    }
172 
  }
173 
}
174 
 
175 
.bs-popover-auto {
176 
  &[x-placement^="top"] {
177 
    @extend .bs-popover-top;
178 
  }
179 
 
180 
  &[x-placement^="right"] {
181 
    @extend .bs-popover-right;
182 
  }
183 
 
184 
  &[x-placement^="bottom"] {
185 
    @extend .bs-popover-bottom;
186 
  }
187 
 
188 
  &[x-placement^="left"] {
189 
    @extend .bs-popover-left;
190 
  }
191 
}
192 
 
193 
 
194 
// Offset the popover to account for the popover arrow
195 
.popover-header {
196 
  padding: $popover-header-padding-y $popover-header-padding-x 0;
197 
  margin-bottom: 0; // Reset the default from Reboot
198 
  font-size: $font-size-xs;
199 
  font-weight: $font-weight-medium;
200 
  color: $popover-header-color;
201 
  opacity: .7;
202 
  @include border-top-radius($popover-inner-border-radius);
203 
 
204 
  .theme-dark & {
205 
    color: $dm-popover-header-color;
206 
  }
207 
 
208 
  &:empty {
209 
    display: none;
210 
  }
211 
}
212 
 
213 
.popover-body {
214 
  padding: $popover-header-padding-x;
215 
  font-size: $font-size-xs;
216 
  overflow: hidden;
217 
  color: $popover-body-color;
218 
 
219 
  .theme-dark & {
220 
    color: $dm-popover-body-color;
221 
  }
222 
 
223 
  .event-icon {
224 
    display: block;
225 
 
226 
    .icon {
227 
      width: 40px;
228 
      height: 40px;
229 
    }
230 
  }
231 
 
232 
  div {
233 
    width: auto;
234 
    display: flex;
235 
    align-content: center;
236 
    align-items: center;
237 
 
238 
    font-size: $font-size-xs;
239 
    line-height: 1.3;
240 
    overflow: hidden;
241 
 
242 
    margin-bottom: .5rem;
243 
 
244 
    &:last-of-type {
245 
      margin-bottom: 0;
246 
    }
247 
  }
248 
 
249 
  .no-overflow {
250 
    width: 100%;
251 
    display: flex;
252 
    flex-wrap: wrap;
253 
  }
254 
 
255 
  p {
256 
    margin: 0;
257 
  }
258 
 
259 
  ul {
260 
    padding-left: 10px;
261 
    margin-left: 12px;
262 
    margin-top: 10px;
263 
    margin-bottom: 10px;
264 
    opacity: .8;
265 
 
266 
    li {
267 
      margin-bottom: 5px;
268 
 
269 
      &:last-child {
270 
        margin-bottom: 0;
271 
      }
272 
    }
273 
  }
274 
 
275 
  a {
276 
    padding: 6px 12px 6px 6px;
277 
 
278 
    background-color: transparent;
279 
    display: inline-flex;
280 
    align-items: center;
281 
 
282 
    font-size: $font-size-xs;
283 
    font-weight: $font-weight-medium;
284 
    background-color: $gray-700;
285 
    color: $popover-body-color;
286 
 
287 
    border-radius: $btn-border-radius;
288 
 
289 
    .theme-dark & {
290 
      color: $dm-popover-body-color;
291 
    }
292 
 
293 
    &:hover {
294 
      background-color: $gray-600;
295 
      color: $popover-body-color;
296 
      text-decoration: none;
297 
    }
298 
 
299 
    .icon {
300 
      display: flex;
301 
      align-items: center;
302 
      justify-content: center;
303 
      margin-right: 0.25rem;
304 
    }
305 
  }
306 
}