|
0
|
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 // Arrows
|
|
|
22 //
|
|
|
23 // .arrow is outer, .arrow::after is inner
|
|
|
24
|
|
|
25 .arrow {
|
|
|
26 position: absolute;
|
|
|
27 display: block;
|
|
|
28 width: $popover-arrow-width;
|
|
|
29 height: $popover-arrow-height;
|
|
|
30 }
|
|
|
31
|
|
|
32 .arrow::before,
|
|
|
33 .arrow::after {
|
|
|
34 position: absolute;
|
|
|
35 display: block;
|
|
|
36 border-color: transparent;
|
|
|
37 border-style: solid;
|
|
|
38 }
|
|
|
39
|
|
|
40 .arrow::before {
|
|
|
41 content: "";
|
|
|
42 border-width: $popover-arrow-outer-width;
|
|
|
43 }
|
|
|
44 .arrow::after {
|
|
|
45 content: "";
|
|
|
46 border-width: $popover-arrow-outer-width;
|
|
|
47 }
|
|
|
48
|
|
|
49 // Popover directions
|
|
|
50
|
|
|
51 &.bs-popover-top {
|
|
|
52 margin-bottom: $popover-arrow-width;
|
|
|
53
|
|
|
54 .arrow {
|
|
|
55 bottom: 0;
|
|
|
56 }
|
|
|
57
|
|
|
58 .arrow::before,
|
|
|
59 .arrow::after {
|
|
|
60 border-bottom-width: 0;
|
|
|
61 }
|
|
|
62
|
|
|
63 .arrow::before {
|
|
|
64 bottom: -$popover-arrow-outer-width;
|
|
|
65 margin-left: -($popover-arrow-outer-width - 5);
|
|
|
66 border-top-color: $popover-arrow-outer-color;
|
|
|
67 }
|
|
|
68
|
|
|
69 .arrow::after {
|
|
|
70 bottom: -($popover-arrow-outer-width - 1);
|
|
|
71 margin-left: -($popover-arrow-outer-width - 5);
|
|
|
72 border-top-color: $popover-arrow-color;
|
|
|
73 }
|
|
|
74 }
|
|
|
75
|
|
|
76 &.bs-popover-right {
|
|
|
77 margin-left: $popover-arrow-width;
|
|
|
78
|
|
|
79 .arrow {
|
|
|
80 left: 0;
|
|
|
81 }
|
|
|
82
|
|
|
83 .arrow::before,
|
|
|
84 .arrow::after {
|
|
|
85 margin-top: -($popover-arrow-outer-width - 3);
|
|
|
86 border-left-width: 0;
|
|
|
87 }
|
|
|
88
|
|
|
89 .arrow::before {
|
|
|
90 left: -$popover-arrow-outer-width;
|
|
|
91 border-right-color: $popover-arrow-outer-color;
|
|
|
92 }
|
|
|
93
|
|
|
94 .arrow::after {
|
|
|
95 left: -($popover-arrow-outer-width - 1);
|
|
|
96 border-right-color: $popover-arrow-color;
|
|
|
97 }
|
|
|
98 }
|
|
|
99
|
|
|
100 &.bs-popover-bottom {
|
|
|
101 margin-top: $popover-arrow-width;
|
|
|
102
|
|
|
103 .arrow {
|
|
|
104 top: 0;
|
|
|
105 }
|
|
|
106
|
|
|
107 .arrow::before,
|
|
|
108 .arrow::after {
|
|
|
109 margin-left: -($popover-arrow-width - 3);
|
|
|
110 border-top-width: 0;
|
|
|
111 }
|
|
|
112
|
|
|
113 .arrow::before {
|
|
|
114 top: -$popover-arrow-outer-width;
|
|
|
115 border-bottom-color: $popover-arrow-outer-color;
|
|
|
116 }
|
|
|
117
|
|
|
118 .arrow::after {
|
|
|
119 top: -($popover-arrow-outer-width - 1);
|
|
|
120 border-bottom-color: $popover-arrow-color;
|
|
|
121 }
|
|
|
122
|
|
|
123 // This will remove the popover-header's border just below the arrow
|
|
|
124 .popover-header::before {
|
|
|
125 position: absolute;
|
|
|
126 top: 0;
|
|
|
127 left: 50%;
|
|
|
128 display: block;
|
|
|
129 width: 20px;
|
|
|
130 margin-left: -10px;
|
|
|
131 content: "";
|
|
|
132 border-bottom: 1px solid $popover-header-bg;
|
|
|
133 }
|
|
|
134 }
|
|
|
135
|
|
|
136 &.bs-popover-left {
|
|
|
137 margin-right: $popover-arrow-width;
|
|
|
138
|
|
|
139 .arrow {
|
|
|
140 right: 0;
|
|
|
141 }
|
|
|
142
|
|
|
143 .arrow::before,
|
|
|
144 .arrow::after {
|
|
|
145 margin-top: -($popover-arrow-outer-width - 3);
|
|
|
146 border-right-width: 0;
|
|
|
147 }
|
|
|
148
|
|
|
149 .arrow::before {
|
|
|
150 right: -$popover-arrow-outer-width;
|
|
|
151 border-left-color: $popover-arrow-outer-color;
|
|
|
152 }
|
|
|
153
|
|
|
154 .arrow::after {
|
|
|
155 right: -($popover-arrow-outer-width - 1);
|
|
|
156 border-left-color: $popover-arrow-color;
|
|
|
157 }
|
|
|
158 }
|
|
|
159 &.bs-popover-auto {
|
|
|
160 &[x-placement^="top"] {
|
|
|
161 @extend .bs-popover-top;
|
|
|
162 }
|
|
|
163 &[x-placement^="right"] {
|
|
|
164 @extend .bs-popover-right;
|
|
|
165 }
|
|
|
166 &[x-placement^="bottom"] {
|
|
|
167 @extend .bs-popover-bottom;
|
|
|
168 }
|
|
|
169 &[x-placement^="left"] {
|
|
|
170 @extend .bs-popover-left;
|
|
|
171 }
|
|
|
172 }
|
|
|
173 }
|
|
|
174
|
|
|
175
|
|
|
176 // Offset the popover to account for the popover arrow
|
|
|
177 .popover-header {
|
|
|
178 padding: $popover-header-padding-y $popover-header-padding-x;
|
|
|
179 margin-bottom: 0; // Reset the default from Reboot
|
|
|
180 font-size: $font-size-base;
|
|
|
181 color: $popover-header-color;
|
|
|
182 background-color: $popover-header-bg;
|
|
|
183 border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
|
|
|
184 $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
|
|
|
185 @include border-top-radius($offset-border-width);
|
|
|
186
|
|
|
187 &:empty {
|
|
|
188 display: none;
|
|
|
189 }
|
|
|
190 }
|
|
|
191
|
|
|
192 .popover-body {
|
|
|
193 padding: $popover-body-padding-y $popover-body-padding-x;
|
|
|
194 color: $popover-body-color;
|
|
|
195 }
|
