Skip to content

Commit 7840642

Browse files
woothuwoothu
committed
refactor: refactor tippy scc
1 parent ce6ce1a commit 7840642

File tree

3 files changed

+101
-156
lines changed

3 files changed

+101
-156
lines changed

‎scss/vendors/tippyjs/animations/fade.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../_mixins.scss';
21
@import '../_vars.scss';
32

43
.#{$namespace-prefix}-box {

‎scss/vendors/tippyjs/index.scss

Lines changed: 8 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import './_vars.scss';
22
@import './animations/fade.scss';
33
@import './../../variables';
4+
@import './popover.scss';
45

56
.#{$namespace-prefix}-iOS {
67
cursor: pointer !important;
@@ -32,18 +33,18 @@
3233
bottom: - $tooltip-arrow-height;
3334
left: 0;
3435
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
35-
border-top-color: $tooltip-arrow-color;
36+
border-top-color: initial;
3637
}
3738
}
3839

3940
&[data-placement^='bottom'] > .#{$namespace-prefix}-arrow {
4041
top: 0;
4142

4243
&::before {
43-
top: $tooltip-arrow-height;
44+
top: - $tooltip-arrow-height;
4445
left: 0;
4546
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
46-
border-bottom-color: $tooltip-arrow-color;
47+
border-bottom-color: initial;
4748
}
4849
}
4950

@@ -55,7 +56,7 @@
5556
&::before {
5657
right: - $tooltip-arrow-height;
5758
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
58-
border-left-color: $tooltip-arrow-color;
59+
border-left-color: initial;
5960
}
6061
}
6162

@@ -67,7 +68,7 @@
6768
&::before {
6869
left: - $tooltip-arrow-height;
6970
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
70-
border-right-color: $tooltip-arrow-color;
71+
border-right-color: initial;
7172
}
7273
}
7374

@@ -81,9 +82,11 @@
8182
display: block;
8283
width: $tooltip-arrow-width;
8384
height: $tooltip-arrow-height;
85+
color: $tooltip-arrow-color;
8486

8587
&::before {
8688
position: absolute;
89+
display: block;
8790
content: "";
8891
border-color: transparent;
8992
border-style: solid;
@@ -98,153 +101,3 @@
98101
background-color: $tooltip-bg;
99102
@include border-radius($tooltip-border-radius);
100103
}
101-
102-
// Popover
103-
104-
.#{$namespace-prefix}-box[data-theme~='cpopover'] {
105-
z-index: $zindex-popover;
106-
display: block;
107-
max-width: $popover-max-width;
108-
@include reset-text();
109-
@include font-size($popover-font-size);
110-
word-wrap: break-word;
111-
background-clip: padding-box;
112-
border: $popover-border-width solid;
113-
@include border-radius($popover-border-radius);
114-
@include box-shadow($popover-box-shadow);
115-
@include themes($popover-theme-map) {
116-
background-color: themes-get-value("popover-bg");
117-
border-color: themes-get-value("popover-border-color");
118-
}
119-
120-
> .#{$namespace-prefix}-content {
121-
max-width: auto;
122-
padding: 0;
123-
color: initial;
124-
text-align: initial;
125-
background-color: initial;
126-
border-radius: initial;
127-
}
128-
129-
> .#{$namespace-prefix}-arrow {
130-
position: absolute;
131-
display: block;
132-
width: $popover-arrow-width;
133-
height: $popover-arrow-height;
134-
margin: 0 $popover-border-radius;
135-
136-
&::before,
137-
&::after {
138-
position: absolute;
139-
display: block;
140-
content: "";
141-
border-color: transparent;
142-
border-style: solid;
143-
}
144-
}
145-
146-
&[data-placement^='top'] > .#{$namespace-prefix}-arrow {
147-
bottom: subtract(-$popover-arrow-height, $popover-border-width);
148-
149-
&::before {
150-
bottom: 0;
151-
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
152-
@include themes($popover-theme-map) {
153-
border-top-color: themes-get-value("popover-arrow-outer-color");
154-
}
155-
}
156-
157-
&::after {
158-
bottom: $popover-border-width;
159-
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
160-
@include themes($popover-theme-map) {
161-
border-top-color: themes-get-value("popover-arrow-color");
162-
}
163-
}
164-
}
165-
166-
&[data-placement^='right'] > .#{$namespace-prefix}-arrow {
167-
left: subtract(-$popover-arrow-height, $popover-border-width);
168-
width: $popover-arrow-height;
169-
height: add($popover-arrow-width, (2 * $popover-border-radius));
170-
padding: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
171-
margin: 0;
172-
173-
&::before {
174-
left: 0;
175-
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
176-
@include themes($popover-theme-map) {
177-
border-right-color: themes-get-value("popover-arrow-outer-color");
178-
}
179-
}
180-
181-
&::after {
182-
left: $popover-border-width;
183-
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
184-
@include themes($popover-theme-map) {
185-
border-right-color: themes-get-value("popover-arrow-color");
186-
}
187-
}
188-
}
189-
190-
&[data-placement^='bottom'] > .#{$namespace-prefix}-arrow {
191-
top: subtract(-$popover-arrow-height, $popover-border-width);
192-
193-
&::before {
194-
top: 0;
195-
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
196-
@include themes($popover-theme-map) {
197-
border-bottom-color: themes-get-value("popover-arrow-outer-color");
198-
}
199-
}
200-
201-
&::after {
202-
top: $popover-border-width;
203-
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
204-
@include themes($popover-theme-map) {
205-
border-bottom-color: themes-get-value("popover-arrow-color");
206-
}
207-
}
208-
}
209-
210-
&[data-placement^='bottom'] {
211-
> .#{$namespace-prefix}-arrow {
212-
right: subtract(-$popover-arrow-height, $popover-border-width);
213-
width: $popover-arrow-height;
214-
height: add($popover-arrow-width, (2 * $popover-border-radius));
215-
padding: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
216-
margin: 0;
217-
218-
&::before {
219-
right: 0;
220-
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
221-
@include themes($popover-theme-map) {
222-
border-left-color: themes-get-value("popover-arrow-outer-color");
223-
}
224-
}
225-
226-
&::after {
227-
right: $popover-border-width;
228-
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
229-
@include themes($popover-theme-map) {
230-
border-left-color: themes-get-value("popover-arrow-color");
231-
}
232-
}
233-
}
234-
235-
// This will remove the popover-header's border just below the arrow
236-
.popover-header::before {
237-
position: absolute;
238-
top: 0;
239-
left: 50%;
240-
display: block;
241-
width: $popover-arrow-width;
242-
margin-left: -$popover-arrow-width / 2;
243-
content: "";
244-
border-bottom: $popover-border-width solid;
245-
@include themes($popover-theme-map) {
246-
border-bottom-color: themes-get-value("popover-header-bg");
247-
}
248-
}
249-
}
250-
}

‎scss/vendors/tippyjs/popover.scss

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
.#{$namespace-prefix}-box[data-theme~='cpopover'] {
2+
z-index: $zindex-popover;
3+
display: block;
4+
max-width: $popover-max-width;
5+
@include reset-text();
6+
@include font-size($popover-font-size);
7+
word-wrap: break-word;
8+
background-clip: padding-box;
9+
border: $popover-border-width solid;
10+
@include border-radius($popover-border-radius);
11+
@include box-shadow($popover-box-shadow);
12+
13+
@include themes($popover-theme-map) {
14+
background-color: themes-get-value("popover-bg");
15+
border-color: themes-get-value("popover-border-color");
16+
}
17+
18+
>.#{$namespace-prefix}-content {
19+
max-width: auto;
20+
padding: 0;
21+
color: initial;
22+
text-align: initial;
23+
background-color: initial;
24+
border-radius: initial;
25+
}
26+
27+
>.#{$namespace-prefix}-arrow {
28+
position: absolute;
29+
display: block;
30+
width: $popover-arrow-width;
31+
height: $popover-arrow-height;
32+
// margin: 0 $popover-border-radius;
33+
34+
&::after {
35+
position: absolute;
36+
display: block;
37+
content: "";
38+
border-color: transparent;
39+
border-style: solid;
40+
}
41+
}
42+
.#{$namespace-prefix}-arrow {
43+
@include themes($popover-theme-map) {
44+
border-color: themes-get-value("popover-arrow-outer-color");
45+
color: themes-get-value("popover-arrow-color");
46+
}
47+
48+
&::after {
49+
content: '';
50+
z-index: -1;
51+
position: absolute;
52+
border-color: transparent;
53+
border-style: solid;
54+
border-width: 8px;
55+
}
56+
}
57+
58+
&[data-placement^='top']>.#{$namespace-prefix}-arrow {
59+
&::after {
60+
border-top-color: inherit;
61+
border-width: 8px 8px 0;
62+
bottom: -8px;
63+
left: -1.5px;
64+
}
65+
}
66+
67+
&[data-placement^='bottom']>.#{$namespace-prefix}-arrow {
68+
&::after {
69+
border-bottom-color: inherit;
70+
border-width: 0 8px 8px;
71+
top: -8px;
72+
left: -1.5px;
73+
}
74+
}
75+
76+
&[data-placement^='left']>.#{$namespace-prefix}-arrow {
77+
&::after {
78+
border-left-color: inherit;
79+
border-width: 8px 0 8px 8px;
80+
right: -8px;
81+
top: -1.5px;
82+
}
83+
}
84+
85+
&[data-placement^='right']>.#{$namespace-prefix}-arrow {
86+
&::after {
87+
border-width: 8px 8px 8px 0;
88+
left: -8px;
89+
top: -1.5px;
90+
border-right-color: inherit;
91+
}
92+
}
93+
}

0 commit comments

Comments
 (0)