Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
// Base class
2 
.tooltip {
3 
  position: absolute;
4 
  z-index: $zindex-tooltip;
5 
  display: block;
6 
  margin: $tooltip-margin;
7 
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8 
  // So reset our font and text properties to avoid inheriting weird values.
9 
  @include reset-text();
10 
  @include font-size($tooltip-font-size);
11 
  // Allow breaking very long words so they don't overflow the tooltip's bounds
12 
  word-wrap: break-word;
13 
  opacity: 0;
14 
 
15 
  &.show { opacity: $tooltip-opacity; }
16 
 
17 
  .arrow {
18 
    position: absolute;
19 
    display: block;
20 
    width: $tooltip-arrow-width;
21 
    height: $tooltip-arrow-height;
22 
 
23 
    &::before {
24 
      position: absolute;
25 
      content: "";
26 
      border-color: transparent;
27 
      border-style: solid;
28 
    }
29 
  }
30 
}
31 
 
32 
.bs-tooltip-top {
33 
  padding: $tooltip-arrow-height 0;
34 
 
35 
  .arrow {
36 
    bottom: 0;
37 
 
38 
    &::before {
39 
      top: 0;
40 
      border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
41 
      border-top-color: $tooltip-arrow-color;
42 
 
43 
      .theme-dark & {border-top-color: $dm-tooltip-arrow-color;}
44 
    }
45 
  }
46 
}
47 
 
48 
.bs-tooltip-right {
49 
  padding: 0 $tooltip-arrow-height;
50 
 
51 
  .arrow {
52 
    left: 2px;
53 
    width: $tooltip-arrow-height;
54 
    height: $tooltip-arrow-width;
55 
 
56 
    &::before {
57 
      right: 0;
58 
      border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
59 
      border-right-color: $tooltip-arrow-color;
60 
 
61 
      .theme-dark & {border-right-color: $dm-tooltip-arrow-color;}
62 
    }
63 
  }
64 
}
65 
 
66 
.bs-tooltip-bottom {
67 
  padding: $tooltip-arrow-height 0;
68 
 
69 
  .arrow {
70 
    top: 0;
71 
 
72 
    &::before {
73 
      bottom: 0;
74 
      border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
75 
      border-bottom-color: $tooltip-arrow-color;
76 
 
77 
      .theme-dark & {border-bottom-color: $dm-tooltip-arrow-color;}
78 
    }
79 
  }
80 
}
81 
 
82 
.bs-tooltip-left {
83 
  padding: 0 $tooltip-arrow-height;
84 
 
85 
  .arrow {
86 
    right: 2px;
87 
    width: $tooltip-arrow-height;
88 
    height: $tooltip-arrow-width;
89 
 
90 
    &::before {
91 
      left: 0;
92 
      border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
93 
      border-left-color: $tooltip-arrow-color;
94 
 
95 
      .theme-dark & {border-left-color: $dm-tooltip-arrow-color;}
96 
    }
97 
  }
98 
}
99 
 
100 
.bs-tooltip-auto {
101 
  &[x-placement^="top"] {
102 
    @extend .bs-tooltip-top;
103 
  }
104 
  &[x-placement^="right"] {
105 
    @extend .bs-tooltip-right;
106 
 
107 
    .dir-rtl & {
108 
      @extend .bs-tooltip-left;
109 
    }
110 
  }
111 
  &[x-placement^="bottom"] {
112 
    @extend .bs-tooltip-bottom;
113 
  }
114 
  &[x-placement^="left"] {
115 
    @extend .bs-tooltip-left;
116 
 
117 
    .dir-rtl & {
118 
      @extend .bs-tooltip-right;
119 
    }
120 
  }
121 
}
122 
 
123 
// Wrapper for the tooltip content
124 
.tooltip-inner {
125 
  max-width: $tooltip-max-width;
126 
  padding: $tooltip-padding-y $tooltip-padding-x;
127 
  color: $tooltip-color;
128 
  text-align: center;
129 
  background-color: $tooltip-bg;
130 
  @include border-radius($tooltip-border-radius);
131 
 
132 
  .theme-dark & {
133 
    color: $dm-tooltip-color;
134 
    background-color: $dm-tooltip-bg;
135 
  }
136 
}