corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 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 | 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 / 2) 0; |
||
41 | border-top-color: $tooltip-arrow-color; |
||
42 | } |
||
43 | } |
||
44 | } |
||
45 | |||
46 | .bs-tooltip-right { |
||
47 | padding: 0 $tooltip-arrow-height; |
||
48 | |||
49 | .arrow { |
||
50 | left: 0; |
||
51 | width: $tooltip-arrow-height; |
||
52 | height: $tooltip-arrow-width; |
||
53 | |||
54 | &::before { |
||
55 | right: 0; |
||
56 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; |
||
57 | border-right-color: $tooltip-arrow-color; |
||
58 | } |
||
59 | } |
||
60 | } |
||
61 | |||
62 | .bs-tooltip-bottom { |
||
63 | padding: $tooltip-arrow-height 0; |
||
64 | |||
65 | .arrow { |
||
66 | top: 0; |
||
67 | |||
68 | &::before { |
||
69 | bottom: 0; |
||
70 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; |
||
71 | border-bottom-color: $tooltip-arrow-color; |
||
72 | } |
||
73 | } |
||
74 | } |
||
75 | |||
76 | .bs-tooltip-left { |
||
77 | padding: 0 $tooltip-arrow-height; |
||
78 | |||
79 | .arrow { |
||
80 | right: 0; |
||
81 | width: $tooltip-arrow-height; |
||
82 | height: $tooltip-arrow-width; |
||
83 | |||
84 | &::before { |
||
85 | left: 0; |
||
86 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; |
||
87 | border-left-color: $tooltip-arrow-color; |
||
88 | } |
||
89 | } |
||
90 | } |
||
91 | |||
92 | .bs-tooltip-auto { |
||
93 | &[x-placement^="top"] { |
||
94 | @extend .bs-tooltip-top; |
||
95 | } |
||
96 | &[x-placement^="right"] { |
||
97 | @extend .bs-tooltip-right; |
||
98 | } |
||
99 | &[x-placement^="bottom"] { |
||
100 | @extend .bs-tooltip-bottom; |
||
101 | } |
||
102 | &[x-placement^="left"] { |
||
103 | @extend .bs-tooltip-left; |
||
104 | } |
||
105 | } |
||
106 | |||
107 | // Wrapper for the tooltip content |
||
108 | .tooltip-inner { |
||
109 | max-width: $tooltip-max-width; |
||
110 | padding: $tooltip-padding-y $tooltip-padding-x; |
||
111 | color: $tooltip-color; |
||
112 | text-align: center; |
||
113 | background-color: $tooltip-bg; |
||
114 | @include border-radius($tooltip-border-radius); |
||
115 | } |