Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_popover.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }