]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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 | padding: $popover-inner-padding; | |
9 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. | |
10 | // So reset our font and text properties to avoid inheriting weird values. | |
11 | @include reset-text(); | |
12 | font-size: $font-size-sm; | |
13 | // Allow breaking very long words so they don't overflow the popover's bounds | |
14 | word-wrap: break-word; | |
15 | background-color: $popover-bg; | |
16 | background-clip: padding-box; | |
17 | border: $popover-border-width solid $popover-border-color; | |
18 | @include border-radius($border-radius-lg); | |
19 | @include box-shadow($popover-box-shadow); | |
20 | ||
21 | ||
22 | // Popover directions | |
23 | ||
24 | &.popover-top, | |
25 | &.bs-tether-element-attached-bottom { | |
26 | margin-top: -$popover-arrow-width; | |
27 | ||
28 | &::before, | |
29 | &::after { | |
30 | left: 50%; | |
31 | border-bottom-width: 0; | |
32 | } | |
33 | ||
34 | &::before { | |
35 | bottom: -$popover-arrow-outer-width; | |
36 | margin-left: -$popover-arrow-outer-width; | |
37 | border-top-color: $popover-arrow-outer-color; | |
38 | } | |
39 | ||
40 | &::after { | |
41 | bottom: -($popover-arrow-outer-width - 1); | |
42 | margin-left: -$popover-arrow-width; | |
43 | border-top-color: $popover-arrow-color; | |
44 | } | |
45 | } | |
46 | ||
47 | &.popover-right, | |
48 | &.bs-tether-element-attached-left { | |
49 | margin-left: $popover-arrow-width; | |
50 | ||
51 | &::before, | |
52 | &::after { | |
53 | top: 50%; | |
54 | border-left-width: 0; | |
55 | } | |
56 | ||
57 | &::before { | |
58 | left: -$popover-arrow-outer-width; | |
59 | margin-top: -$popover-arrow-outer-width; | |
60 | border-right-color: $popover-arrow-outer-color; | |
61 | } | |
62 | ||
63 | &::after { | |
64 | left: -($popover-arrow-outer-width - 1); | |
65 | margin-top: -($popover-arrow-outer-width - 1); | |
66 | border-right-color: $popover-arrow-color; | |
67 | } | |
68 | } | |
69 | ||
70 | &.popover-bottom, | |
71 | &.bs-tether-element-attached-top { | |
72 | margin-top: $popover-arrow-width; | |
73 | ||
74 | &::before, | |
75 | &::after { | |
76 | left: 50%; | |
77 | border-top-width: 0; | |
78 | } | |
79 | ||
80 | &::before { | |
81 | top: -$popover-arrow-outer-width; | |
82 | margin-left: -$popover-arrow-outer-width; | |
83 | border-bottom-color: $popover-arrow-outer-color; | |
84 | } | |
85 | ||
86 | &::after { | |
87 | top: -($popover-arrow-outer-width - 1); | |
88 | margin-left: -$popover-arrow-width; | |
89 | border-bottom-color: $popover-title-bg; | |
90 | } | |
91 | ||
92 | // This will remove the popover-title's border just below the arrow | |
93 | .popover-title::before { | |
94 | position: absolute; | |
95 | top: 0; | |
96 | left: 50%; | |
97 | display: block; | |
98 | width: 20px; | |
99 | margin-left: -10px; | |
100 | content: ""; | |
101 | border-bottom: 1px solid $popover-title-bg; | |
102 | } | |
103 | } | |
104 | ||
105 | &.popover-left, | |
106 | &.bs-tether-element-attached-right { | |
107 | margin-left: -$popover-arrow-width; | |
108 | ||
109 | &::before, | |
110 | &::after { | |
111 | top: 50%; | |
112 | border-right-width: 0; | |
113 | } | |
114 | ||
115 | &::before { | |
116 | right: -$popover-arrow-outer-width; | |
117 | margin-top: -$popover-arrow-outer-width; | |
118 | border-left-color: $popover-arrow-outer-color; | |
119 | } | |
120 | ||
121 | &::after { | |
122 | right: -($popover-arrow-outer-width - 1); | |
123 | margin-top: -($popover-arrow-outer-width - 1); | |
124 | border-left-color: $popover-arrow-color; | |
125 | } | |
126 | } | |
127 | } | |
128 | ||
129 | ||
130 | // Offset the popover to account for the popover arrow | |
131 | .popover-title { | |
132 | padding: $popover-title-padding-y $popover-title-padding-x; | |
133 | margin-bottom: 0; // Reset the default from Reboot | |
134 | font-size: $font-size-base; | |
135 | background-color: $popover-title-bg; | |
136 | border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); | |
137 | $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); | |
138 | @include border-top-radius($offset-border-width); | |
139 | ||
140 | &:empty { | |
141 | display: none; | |
142 | } | |
143 | } | |
144 | ||
145 | .popover-content { | |
146 | padding: $popover-content-padding-y $popover-content-padding-x; | |
147 | } | |
148 | ||
149 | ||
150 | // Arrows | |
151 | // | |
152 | // .popover-arrow is outer, .popover-arrow::after is inner | |
153 | ||
154 | .popover::before, | |
155 | .popover::after { | |
156 | position: absolute; | |
157 | display: block; | |
158 | width: 0; | |
159 | height: 0; | |
160 | border-color: transparent; | |
161 | border-style: solid; | |
162 | } | |
163 | ||
164 | .popover::before { | |
165 | content: ""; | |
166 | border-width: $popover-arrow-outer-width; | |
167 | } | |
168 | .popover::after { | |
169 | content: ""; | |
170 | border-width: $popover-arrow-width; | |
171 | } |