Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commitd42c3fc

Browse files
committed
fix(docs): use components for all icons
1 parent11505a0 commitd42c3fc

File tree

12 files changed

+297
-322
lines changed

12 files changed

+297
-322
lines changed

‎docs/components/bootstrap-logo.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 612 612"
5+
version="1.1"
6+
focusable="false"
7+
role="img"
8+
>
9+
<title>Bootstrap Logo</title>
10+
<pathfill="#563d7c"d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z" />
11+
<pathfill="#ffffff"d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z" />
12+
</svg>
13+
</template>

‎docs/components/bv-badge.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 953 953"
5+
version="1.1"
6+
shape-rendering="geometricPrecision"
7+
fill-rule="evenodd"
8+
clip-rule="evenodd"
9+
focusable="false"
10+
role="img"
11+
>
12+
<title>BootstrapVue Badge</title>
13+
<pathfill="currentColor"d="M92 0h769c50 0 92 42 92 92v769c0 50-42 92-92 92H92c-50 0-92-42-92-92V92C0 42 42 0 92 0zm216 710c100 0 160-50 160-133 0-62-44-107-108-113v-3c48-8 86-52 86-102 0-71-55-117-140-117H111v468h197zM195 307h90c50 0 78 23 78 64 0 44-33 68-91 68h-77V307zm0 338V499h90c64 0 98 25 98 73s-33 73-94 73h-94zm503 65l163-468h-90L652 621h-2L531 242h-92l163 468h96z" />
14+
</svg>
15+
</template>

‎docs/components/bv-logo-animated.vue

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<svg
3+
v-if="showLogo"
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 1200 1200"
6+
version="1.1"
7+
shape-rendering="geometricPrecision"
8+
fill-rule="evenodd"
9+
clip-rule="evenodd"
10+
preserveAspectRatio="xMidYMid meet"
11+
role="img"
12+
focusable="false"
13+
class="bv-logo-animated"
14+
>
15+
<title>BootstrapVue Logo</title>
16+
<defs>
17+
<!-- eslint-disable-next-line vue/max-attributes-per-line-->
18+
<filterid="logo-shadow"filterUnits="objectBoundingBox"x="-50%"y="-50%"width="200%"height="200%">
19+
<feOffsetin="SourceAlpha"dx="-10"dy="25"result="ALPHA1" />
20+
<feMorphologyin="ALPHA1"operator="dilate"radius="15"result="ALPHA" />
21+
<feGaussianBlurin="ALPHA"stdDeviation="20"result="DROP" />
22+
<feFloodin="DROP"flood-color="#333"result="SOLID" />
23+
<feCompositein="DROP"in2="SOLID"operator="in"result="SHADOW1" />
24+
<feComponentTransferin="SHADOW1"result="SHADOW">
25+
<feFuncAtype="linear"slope="0.55" />
26+
</feComponentTransfer>
27+
<feMerge>
28+
<feMergeNodein="SHADOW" />
29+
<feMergeNodein="SourceGraphic" />
30+
</feMerge>
31+
</filter>
32+
</defs>
33+
<!--
34+
IE 11 has issues with the same filter being applied to multiple elements,
35+
So we only apply it to the outer `g` for IE (as IE 11 also doesn't support
36+
animating SVG child elements)
37+
-->
38+
<g:filter="isIE ? 'url(#logo-shadow)' : null">
39+
<gclass="logo-dark-v":filter="isIE ? null : 'url(#logo-shadow)'">
40+
<pathfill="#34495E"d="M747 311L602 562 458 311H227l375 651 376-651z" />
41+
</g>
42+
<gclass="logo-purple-v":filter="isIE ? null : 'url(#logo-shadow)'">
43+
<pathfill="#563D7C"fill-rule="nonzero"d="M219 195h762L599 857z" />
44+
<path
45+
class="logo-white-b"
46+
fill="#ffffff"
47+
d="M501 282l132 0c25,0 44,5 59,16 15,12 22,28 22,51 0,14 -3,26 -10,35 -7,10 -16,18 -29,23l0 1c17,3 30,11 38,24 9,12 13,27 13,46 0,11 -2,21 -6,30 -3,9 -9,17 -17,24 -9,6 -19,12 -32,16 -12,4 -28,6 -45,6l-125 0 0 -272 0 0zm48 114l77 0c12,0 21,-4 29,-10 8,-7 11,-16 11,-28 0,-14 -3,-24 -10,-29 -7,-6 -17,-9 -30,-9l-77 0 0 76 0 0zm0 119l84 0c14,0 26,-4 33,-11 8,-8 13,-19 13,-32 0,-14 -4,-24 -13,-31 -8,-8 -19,-11 -33,-11l-84 0 0 85z"
48+
/>
49+
</g>
50+
<gclass="logo-green-v":filter="isIE ? null : 'url(#logo-shadow)'">
51+
<pathfill="#41B883"d="M839 357L600 771 361 357H202l398 690 398-690z" />
52+
</g>
53+
</g>
54+
</svg>
55+
<divv-elseclass="bv-logo-animated"></div>
56+
</template>
57+
58+
<script>
59+
exportdefault {
60+
data() {
61+
return {
62+
isIE:false,
63+
showLogo:false
64+
}
65+
},
66+
mounted() {
67+
this.$nextTick(()=> {
68+
this.isIE=/msie|trident/i.test(window.navigator.userAgent||'')
69+
this.showLogo=true
70+
})
71+
}
72+
}
73+
</script>
74+
75+
<style lang="scss" scoped>
76+
.bv-logo-animated {
77+
display:block;
78+
width:240px;
79+
height:240px;
80+
margin-left:auto;
81+
margin-right:auto;
82+
margin-top:0;
83+
will-change:opacity;
84+
animation: logo-splash-alpha0.15s1ease-in-out;
85+
// Allow logo path elements to expand outside the svg viewbox
86+
overflow:visible;
87+
88+
.logo-dark-v,
89+
.logo-purple-v,
90+
.logo-green-v {
91+
will-change:transform;
92+
transition:transform0.15sease-in-out;
93+
}
94+
95+
.logo-dark-v {
96+
transform-origin:centertop;
97+
animation: logo-splash-dark1.25sease-in-out1;
98+
}
99+
100+
.logo-purple-v {
101+
animation: logo-splash-purple1.25sease-in-out1;
102+
}
103+
104+
.logo-green-v {
105+
animation: logo-splash-green1.25sease-in-out1;
106+
}
107+
108+
&:hover {
109+
.logo-dark-v {
110+
transform:translateY(-6%)scale(1.15);
111+
}
112+
.logo-purple-v {
113+
transform:translateY(-12%);
114+
}
115+
.logo-green-v {
116+
transform:translateY(12%);
117+
}
118+
}
119+
120+
&,
121+
.logo-dark-v,
122+
.logo-purple-v,
123+
.logo-green-v {
124+
transform-style:preserve-3d;
125+
backface-visibility:hidden;
126+
animation-delay:0s;
127+
@media (prefers-reduced-motion: reduce) {
128+
transition:none;
129+
animation:none;
130+
}
131+
}
132+
}
133+
134+
@keyframeslogo-splash-alpha {
135+
0% {
136+
opacity:0.1;
137+
}
138+
100% {
139+
opacity:1;
140+
}
141+
}
142+
143+
@keyframeslogo-splash-dark {
144+
0% {
145+
transform:translateY(-6%)scale(1.15);
146+
}
147+
45% {
148+
transform:translateY(-6%)scale(1.15);
149+
}
150+
100% {
151+
transform:translateY(0)scale(1);
152+
}
153+
}
154+
155+
@keyframeslogo-splash-purple {
156+
0% {
157+
transform:translateY(-12%);
158+
}
159+
45% {
160+
transform:translateY(-12%);
161+
}
162+
100% {
163+
transform:translateY(0);
164+
}
165+
}
166+
167+
@keyframeslogo-splash-green {
168+
0% {
169+
transform:translateY(12%);
170+
}
171+
45% {
172+
transform:translateY(12%);
173+
}
174+
100% {
175+
transform:translateY(0);
176+
}
177+
}
178+
</style>

‎docs/components/bv-logo-outline.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 953 953"
5+
version="1.1"
6+
focusable="false"
7+
role="img"
8+
>
9+
<title>BootstrapVue Logo</title>
10+
<pathfill="#563d7c"d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z" />
11+
<pathfill="#ffffff"d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z" />
12+
</svg>
13+
</template>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp