Skip to content

Commit f91f17a

Browse files
akinseyakinsey
committed
feat: refactor scss and import balloon.css
1 parent ab3628d commit f91f17a

File tree

4 files changed

+166
-4
lines changed

4 files changed

+166
-4
lines changed

‎src/assets/scss/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,6 @@ $medium: 1024px;
136136
$large: 1280px;
137137

138138
@import 'mixins';
139-
@import 'vendor';
139+
@import 'vendor/vendor';
140140
@import 'overrides';
141141
@import 'global-components';

‎src/assets/scss/vendor/_balloon.scss‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
[data-balloon] { position: relative; }
2+
[data-balloon]:before,
3+
[data-balloon]:after {
4+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
5+
filter: alpha(opacity=0);
6+
-khtml-opacity: 0;
7+
-moz-opacity: 0;
8+
opacity: 0;
9+
pointer-events: none;
10+
-webkit-transition: all 0.18s ease-out 0.18s;
11+
transition: all 0.18s ease-out 0.18s;
12+
bottom: 100%;
13+
left: 50%;
14+
position: absolute;
15+
z-index: 10;
16+
text-transform: initial;
17+
-webkit-transform: translate(-50%, 10px);
18+
-ms-transform: translate(-50%, 10px);
19+
transform: translate(-50%, 10px);
20+
-webkit-transform-origin: top;
21+
-ms-transform-origin: top;
22+
transform-origin: top;
23+
}
24+
[data-balloon]:after {
25+
background: rgba(17, 17, 17, 0.9);
26+
border-radius: 4px;
27+
color: #fff;
28+
content: attr(data-balloon);
29+
font-size: 12px;
30+
padding: .5em 1em;
31+
white-space: nowrap;
32+
margin-bottom: 11px;
33+
line-height: 1.3rem;
34+
z-index: 6000;
35+
}
36+
[data-balloon]:before {
37+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
38+
background-size: 100% auto;
39+
height: 6px;
40+
width: 18px;
41+
content: "";
42+
margin-bottom: 5px;
43+
}
44+
[data-balloon]:hover:before,
45+
[data-balloon]:hover:after {
46+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
47+
filter: alpha(opacity=100);
48+
-khtml-opacity: 1;
49+
-moz-opacity: 1;
50+
opacity: 1;
51+
pointer-events: auto;
52+
-webkit-transform: translate(-50%, 0);
53+
-ms-transform: translate(-50%, 0);
54+
transform: translate(-50%, 0);
55+
}
56+
[data-balloon][data-balloon-break]:after {
57+
white-space: normal;
58+
}
59+
[data-balloon-pos="down"]:before,
60+
[data-balloon-pos="down"]:after {
61+
bottom: auto;
62+
left: 50%;
63+
top: 100%;
64+
-webkit-transform: translate(-50%, -10px);
65+
-ms-transform: translate(-50%, -10px);
66+
transform: translate(-50%, -10px);
67+
}
68+
[data-balloon-pos="down"]:after {
69+
margin-top: 11px;
70+
}
71+
[data-balloon-pos="down"]:before {
72+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
73+
background-size: 100% auto;
74+
height: 6px;
75+
width: 18px;
76+
margin-top: 5px;
77+
margin-bottom: 0;
78+
}
79+
[data-balloon-pos="down"]:hover:before,
80+
[data-balloon-pos="down"]:hover:after {
81+
-webkit-transform: translate(-50%, 0);
82+
-ms-transform: translate(-50%, 0);
83+
transform: translate(-50%, 0);
84+
}
85+
[data-balloon-pos="left"]:before,
86+
[data-balloon-pos="left"]:after {
87+
bottom: auto;
88+
left: auto;
89+
right: 100%;
90+
top: 50%;
91+
-webkit-transform: translate(10px, -50%);
92+
-ms-transform: translate(10px, -50%);
93+
transform: translate(10px, -50%);
94+
}
95+
[data-balloon-pos="left"]:after {
96+
margin-right: 11px;
97+
}
98+
[data-balloon-pos="left"]:before {
99+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
100+
background-size: 100% auto;
101+
height: 18px;
102+
width: 6px;
103+
margin-right: 5px;
104+
margin-bottom: 0;
105+
}
106+
[data-balloon-pos="left"]:hover:before,
107+
[data-balloon-pos="left"]:hover:after {
108+
-webkit-transform: translate(0, -50%);
109+
-ms-transform: translate(0, -50%);
110+
transform: translate(0, -50%);
111+
}
112+
[data-balloon-pos="right"]:before,
113+
[data-balloon-pos="right"]:after {
114+
bottom: auto;
115+
left: 100%;
116+
top: 50%;
117+
-webkit-transform: translate(-10px, -50%);
118+
-ms-transform: translate(-10px, -50%);
119+
transform: translate(-10px, -50%);
120+
}
121+
[data-balloon-pos="right"]:after {
122+
margin-left: 11px;
123+
}
124+
[data-balloon-pos="right"]:before {
125+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
126+
background-size: 100% auto;
127+
height: 18px;
128+
width: 6px;
129+
margin-bottom: 0;
130+
margin-left: 5px;
131+
}
132+
[data-balloon-pos="right"]:hover:before,
133+
[data-balloon-pos="right"]:hover:after {
134+
-webkit-transform: translate(0, -50%);
135+
-ms-transform: translate(0, -50%);
136+
transform: translate(0, -50%);
137+
}
138+
[data-balloon-length]:after {
139+
white-space: normal;
140+
}
141+
[data-balloon-length="small"]:after {
142+
width: 80px;
143+
}
144+
[data-balloon-length="medium"]:after {
145+
width: 150px;
146+
}
147+
[data-balloon-length="large"]:after {
148+
width: 260px;
149+
}
150+
[data-balloon-length="xlarge"]:after {
151+
width: 90vw;
152+
}
153+
@media screen and (min-width: 768px) {
154+
[data-balloon-length="xlarge"]:after {
155+
width: 380px;
156+
}
157+
}
158+
[data-balloon-length="fit"]:after {
159+
width: 100%;
160+
}

‎src/assets/scss/_vendor.scss‎ renamed to ‎src/assets/scss/vendor/_nprogress.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@import '~normalize.css/normalize.css';
2-
@import '~@fortawesome/fontawesome-free/css/all.min.css';
3-
@import '~nprogress/nprogress.css';
41
// override vendor progress bar styles
52
#nprogress {
63
.bar {z-index: 9999; background: $color-primary; }

‎src/assets/scss/vendor/_vendor.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import '~normalize.css/normalize.css';
2+
@import '~@fortawesome/fontawesome-free/css/all.min.css';
3+
@import '~nprogress/nprogress.css';
4+
@import 'nprogress';
5+
@import 'balloon';

0 commit comments

Comments
 (0)