Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f3e81d5

Browse filesBrowse files
woothuwoothu
committed
fix: CTooltip, CPopover: add legacy styles
1 parent 40a6ca9 commit f3e81d5
Copy full SHA for f3e81d5

File tree

8 files changed

+396
-11
lines changed
Filter options

8 files changed

+396
-11
lines changed

‎jest.config.js

Copy file name to clipboardExpand all lines: jest.config.js
+4-1Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@ module.exports = {
1515
'src/**/*.{js,vue}',
1616
'!src/index.umd.js',
1717
'!**/node_modules/**'
18-
]
18+
],
19+
moduleNameMapper: {
20+
'\\.(css|less)$': 'identity-obj-proxy'
21+
}
1922
};

‎package.json

Copy file name to clipboardExpand all lines: package.json
+4-1Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
"./src/components/alert/CAlert.vue",
1616
"./src/components/table/CDataTable.vue",
1717
"./src/components/tabs/CTab.vue",
18-
"./src/components/toast/CCarousel.vue"
18+
"./src/components/toast/CCarousel.vue",
19+
"./src/directives/old-popover.css",
20+
"./src/directives/old-tooltip.css"
1921
],
2022
"homepage": "https://coreui.io",
2123
"author": {
@@ -89,6 +91,7 @@
8991
"core-js": "~3.6.5",
9092
"eslint": "~6.8.0",
9193
"eslint-plugin-vue": "~6.2.2",
94+
"identity-obj-proxy": "^3.0.0",
9295
"node-sass": "~4.14.1",
9396
"node-sass-magic-importer": "~5.3.2",
9497
"npm-run-all": "~4.1.5",

‎src/directives/CPopover.js

Copy file name to clipboardExpand all lines: src/directives/CPopover.js
+5-4Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Tooltip from 'tooltip.js'
2+
import './old-popover.css'
23

34
export default {
45
name: 'c-popover',
@@ -32,7 +33,7 @@ export default {
3233
delay: props.delay || 0,
3334
offset: props.offset || 0,
3435
arrowSelector: '.arrow',
35-
innerSelector: '.popover-body',
36+
innerSelector: '.popover-old-body',
3637
template: binding.def.getTemplate(props.header),
3738
boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
3839
container: props.appendToBody ? document.body : false,
@@ -41,10 +42,10 @@ export default {
4142
}
4243
},
4344
getTemplate (header) {
44-
return `<div class="popover bs-popover-auto fade show" role="tooltip">
45+
return `<div class="popover-old bs-popover-old-auto fade show" role="tooltip">
4546
<div class="arrow"></div>
46-
<h3 class="popover-header">${header || 'header'}</h3>
47-
<div class="popover-body"></div>
47+
<h3 class="popover-old-header">${header || 'header'}</h3>
48+
<div class="popover-old-body"></div>
4849
</div>`
4950
}
5051
}

‎src/directives/CTooltip.js

Copy file name to clipboardExpand all lines: src/directives/CTooltip.js
+5-3Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import Tooltip from 'tooltip.js'
2+
import './old-tooltip.css'
3+
24
export default {
35
name: 'c-tooltip',
46
inserted (el, binding) {
@@ -29,7 +31,7 @@ export default {
2931
delay: props.delay || 0,
3032
offset: props.offset || 0,
3133
arrowSelector: '.arrow',
32-
innerSelector: '.tooltip-inner',
34+
innerSelector: '.tooltip-old-inner',
3335
template: binding.def.getTemplate(),
3436
boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
3537
container: props.appendToBody ? document.body : false,
@@ -38,9 +40,9 @@ export default {
3840
}
3941
},
4042
getTemplate () {
41-
return `<div class="tooltip bs-tooltip-auto fade show" role="tooltip">
43+
return `<div class="tooltip-old bs-tooltip-old-auto fade show" role="tooltip">
4244
<div class="arrow"></div>
43-
<div class="tooltip-inner"></div>
45+
<div class="tooltip-old-inner"></div>
4446
</div>`
4547
}
4648
}

‎src/directives/old-popover.css

Copy file name to clipboard
+264Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
.popover-old {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
z-index: 1060;
6+
display: block;
7+
max-width: 276px;
8+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
9+
font-style: normal;
10+
font-weight: 400;
11+
line-height: 1.5;
12+
text-align: left;
13+
text-align: start;
14+
text-decoration: none;
15+
text-shadow: none;
16+
text-transform: none;
17+
letter-spacing: normal;
18+
word-break: normal;
19+
word-spacing: normal;
20+
white-space: normal;
21+
line-break: auto;
22+
font-size: 0.765625rem;
23+
word-wrap: break-word;
24+
background-clip: padding-box;
25+
border: 1px solid;
26+
border-radius: 0.3rem;
27+
background-color: #fff;
28+
border-color: rgba(0, 0, 21, 0.2);
29+
}
30+
31+
.c-legacy-theme .popover-old {
32+
background-color: #fff;
33+
border-color: rgba(0, 0, 0, 0.2);
34+
}
35+
36+
.c-dark-theme .popover-old {
37+
background-color: #1e1e29;
38+
border-color: #181924;
39+
}
40+
41+
.popover-old .arrow {
42+
position: absolute;
43+
display: block;
44+
width: 1rem;
45+
height: 0.5rem;
46+
margin: 0 0.3rem;
47+
}
48+
49+
.popover-old .arrow::before, .popover-old .arrow::after {
50+
position: absolute;
51+
display: block;
52+
content: "";
53+
border-color: transparent;
54+
border-style: solid;
55+
}
56+
57+
.bs-popover-old-top, .bs-popover-old-auto[x-placement^="top"] {
58+
margin-bottom: 0.5rem;
59+
}
60+
61+
.bs-popover-old-top > .arrow, .bs-popover-old-auto[x-placement^="top"] > .arrow {
62+
bottom: calc(-0.5rem - 1px);
63+
}
64+
65+
.bs-popover-old-top > .arrow::before, .bs-popover-old-auto[x-placement^="top"] > .arrow::before {
66+
bottom: 0;
67+
border-width: 0.5rem 0.5rem 0;
68+
border-top-color: rgba(0, 0, 21, 0.25);
69+
}
70+
71+
.c-legacy-theme .bs-popover-old-top > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::before {
72+
border-top-color: rgba(0, 0, 0, 0.25);
73+
}
74+
75+
.c-dark-theme .bs-popover-old-top > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::before {
76+
border-top-color: #181924;
77+
}
78+
79+
.bs-popover-old-top > .arrow::after, .bs-popover-old-auto[x-placement^="top"] > .arrow::after {
80+
bottom: 1px;
81+
border-width: 0.5rem 0.5rem 0;
82+
border-top-color: #fff;
83+
}
84+
85+
.c-legacy-theme .bs-popover-old-top > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::after {
86+
border-top-color: #fff;
87+
}
88+
89+
.c-dark-theme .bs-popover-old-top > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::after {
90+
border-top-color: #1e1e29;
91+
}
92+
93+
.bs-popover-old-right, .bs-popover-old-auto[x-placement^="right"] {
94+
margin-left: 0.5rem;
95+
}
96+
97+
.bs-popover-old-right > .arrow, .bs-popover-old-auto[x-placement^="right"] > .arrow {
98+
left: calc(-0.5rem - 1px);
99+
width: 0.5rem;
100+
height: 1rem;
101+
margin: 0.3rem 0;
102+
}
103+
104+
.bs-popover-old-right > .arrow::before, .bs-popover-old-auto[x-placement^="right"] > .arrow::before {
105+
left: 0;
106+
border-width: 0.5rem 0.5rem 0.5rem 0;
107+
border-right-color: rgba(0, 0, 21, 0.25);
108+
}
109+
110+
.c-legacy-theme .bs-popover-old-right > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::before {
111+
border-right-color: rgba(0, 0, 0, 0.25);
112+
}
113+
114+
.c-dark-theme .bs-popover-old-right > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::before {
115+
border-right-color: #181924;
116+
}
117+
118+
.bs-popover-old-right > .arrow::after, .bs-popover-old-auto[x-placement^="right"] > .arrow::after {
119+
left: 1px;
120+
border-width: 0.5rem 0.5rem 0.5rem 0;
121+
border-right-color: #fff;
122+
}
123+
124+
.c-legacy-theme .bs-popover-old-right > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::after {
125+
border-right-color: #fff;
126+
}
127+
128+
.c-dark-theme .bs-popover-old-right > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::after {
129+
border-right-color: #1e1e29;
130+
}
131+
132+
.bs-popover-old-bottom, .bs-popover-old-auto[x-placement^="bottom"] {
133+
margin-top: 0.5rem;
134+
}
135+
136+
.bs-popover-old-bottom > .arrow, .bs-popover-old-auto[x-placement^="bottom"] > .arrow {
137+
top: calc(-0.5rem - 1px);
138+
}
139+
140+
.bs-popover-old-bottom > .arrow::before, .bs-popover-old-auto[x-placement^="bottom"] > .arrow::before {
141+
top: 0;
142+
border-width: 0 0.5rem 0.5rem 0.5rem;
143+
border-bottom-color: rgba(0, 0, 21, 0.25);
144+
}
145+
146+
.c-legacy-theme .bs-popover-old-bottom > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::before {
147+
border-bottom-color: rgba(0, 0, 0, 0.25);
148+
}
149+
150+
.c-dark-theme .bs-popover-old-bottom > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::before {
151+
border-bottom-color: #181924;
152+
}
153+
154+
.bs-popover-old-bottom > .arrow::after, .bs-popover-old-auto[x-placement^="bottom"] > .arrow::after {
155+
top: 1px;
156+
border-width: 0 0.5rem 0.5rem 0.5rem;
157+
border-bottom-color: #fff;
158+
}
159+
160+
.c-legacy-theme .bs-popover-old-bottom > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::after {
161+
border-bottom-color: #fff;
162+
}
163+
164+
.c-dark-theme .bs-popover-old-bottom > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::after {
165+
border-bottom-color: #1e1e29;
166+
}
167+
168+
.bs-popover-old-bottom .popover-old-header::before, .bs-popover-old-auto[x-placement^="bottom"] .popover-old-header::before {
169+
position: absolute;
170+
top: 0;
171+
left: 50%;
172+
display: block;
173+
width: 1rem;
174+
margin-left: -0.5rem;
175+
content: "";
176+
border-bottom: 1px solid;
177+
border-bottom-color: #f7f7f7;
178+
}
179+
180+
.c-legacy-theme .bs-popover-old-bottom .popover-old-header::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="bottom"] .popover-old-header::before {
181+
border-bottom-color: #f7f7f7;
182+
}
183+
184+
.c-dark-theme .bs-popover-old-bottom .popover-old-header::before, .c-dark-theme .bs-popover-old-auto[x-placement^="bottom"] .popover-old-header::before {
185+
border-bottom-color: #181924;
186+
}
187+
188+
.bs-popover-old-left, .bs-popover-old-auto[x-placement^="left"] {
189+
margin-right: 0.5rem;
190+
}
191+
192+
.bs-popover-old-left > .arrow, .bs-popover-old-auto[x-placement^="left"] > .arrow {
193+
right: calc(-0.5rem - 1px);
194+
width: 0.5rem;
195+
height: 1rem;
196+
margin: 0.3rem 0;
197+
}
198+
199+
.bs-popover-old-left > .arrow::before, .bs-popover-old-auto[x-placement^="left"] > .arrow::before {
200+
right: 0;
201+
border-width: 0.5rem 0 0.5rem 0.5rem;
202+
border-left-color: rgba(0, 0, 21, 0.25);
203+
}
204+
205+
.c-legacy-theme .bs-popover-old-left > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::before {
206+
border-left-color: rgba(0, 0, 0, 0.25);
207+
}
208+
209+
.c-dark-theme .bs-popover-old-left > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::before {
210+
border-left-color: #181924;
211+
}
212+
213+
.bs-popover-old-left > .arrow::after, .bs-popover-old-auto[x-placement^="left"] > .arrow::after {
214+
right: 1px;
215+
border-width: 0.5rem 0 0.5rem 0.5rem;
216+
border-left-color: #fff;
217+
}
218+
219+
.c-legacy-theme .bs-popover-old-left > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::after {
220+
border-left-color: #fff;
221+
}
222+
223+
.c-dark-theme .bs-popover-old-left > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::after {
224+
border-left-color: #1e1e29;
225+
}
226+
227+
.popover-old-header {
228+
padding: 0.5rem 0.75rem;
229+
margin-bottom: 0;
230+
font-size: 0.875rem;
231+
border-bottom: 1px solid;
232+
border-top-left-radius: calc(0.3rem - 1px);
233+
border-top-right-radius: calc(0.3rem - 1px);
234+
background-color: #f7f7f7;
235+
border-bottom-color: #ebebeb;
236+
}
237+
238+
.c-legacy-theme .popover-old-header {
239+
background-color: #f7f7f7;
240+
border-bottom-color: #ebebeb;
241+
}
242+
243+
.c-dark-theme .popover-old-header {
244+
color: #e1e1e1;
245+
background-color: #181924;
246+
border-bottom-color: #0e0e15;
247+
}
248+
249+
.popover-old-header:empty {
250+
display: none;
251+
}
252+
253+
.popover-old-body {
254+
padding: 0.5rem 0.75rem;
255+
color: #4f5d73;
256+
}
257+
258+
.c-legacy-theme .popover-old-body {
259+
color: #23282c;
260+
}
261+
262+
.c-dark-theme .popover-old-body {
263+
color: #e1e1e1;
264+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.