+1752
-11
lines changedFilter options
+1752
-11
lines changed Original file line number Diff line number Diff line change
@@ -276,7 +276,7 @@ module.exports = {
276 276
'highlight.js/styles/atom-one-light.css',
277 277
'codemirror/lib/codemirror.css',
278 278
'bootstrap/dist/css/bootstrap.css',
279 -
'../scripts/build.scss', // BootstrapVue SCSS
279 +
'../scripts/index.scss', // BootstrapVue SCSS
280 280
'@assets/css/docs.min.css',
281 281
'@assets/scss/styles.scss'
282 282
]
@@ -96,16 +96,16 @@ node-sass --output-style expanded \
96 96
--source-map true \
97 97
--source-map-contents true \
98 98
--precision 6 \
99 -
scripts/build.scss \
99 +
scripts/index.scss \
100 100
dist/bootstrap-vue.css
101 101
postcss --config scripts/postcss.config.js \
102 102
--replace dist/bootstrap-vue.css
103 -
# Icons only CSS
103 +
# BootstrapVue Icons only CSS
104 104
node-sass --output-style expanded \
105 105
--source-map true \
106 106
--source-map-contents true \
107 107
--precision 6 \
108 -
src/icons.scss \
108 +
scripts/icons.scss \
109 109
dist/bootstrap-vue-icons.css
110 110
postcss --config scripts/postcss.config.js \
111 111
--replace dist/bootstrap-vue-icons.css
@@ -0,0 +1,11 @@
1 +
/*!
2 +
* BootstrapVue Icons Custom CSS (https://bootstrap-vue.js.org)
3 +
*/
4 + 5 +
// Include Bootstrap functions, variables, and mixins
6 +
@import "node_modules/bootstrap/scss/functions";
7 +
@import "node_modules/bootstrap/scss/variables";
8 +
@import "node_modules/bootstrap/scss/mixins";
9 + 10 +
// Import BootstrapVue Icons custom SCSS
11 +
@import "../src/icons.scss";
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -59,6 +59,13 @@ $b-custom-file-height-inner-sm: calc(
59 59
#{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
60 60
) !default;
61 61 62 +
// --- Icons ---
63 + 64 +
// Animations
65 +
$b-icon-animation-spin-duration: 2s !default;
66 +
$b-icon-animation-pulse-duration: 1s !default;
67 +
$b-icon-animation-cylon-duration: 0.75s !default;
68 + 62 69
// --- Tables ---
63 70 64 71
// Table busy state
@@ -222,4 +222,8 @@ label is provided. You can easily customize the role if required via prop `role`
222 222
As well, when no label is provided, the spinner will automatically have the attribute
223 223
`aria-hidden="true"` to hide the spinner from screen reader users.
224 224 225 +
## See also
226 + 227 +
An alternative to the `<b-spinner>` component are [animated icons](/docs/icons/#animated-icons).
228 + 225 229
<!-- Component reference added automatically from component package.json -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
1 1
// --- BootstrapVue Icons Custom SCSS ---
2 2 3 +
// Include variables and utilities first
4 +
@import "variables";
5 +
@import "utilities";
6 + 3 7
// Include custom SCSS for icons
4 -
// Temporary until Bootstrap v5 (maybe)
5 8
@import "icons/index";
Original file line number Diff line number Diff line change
@@ -297,7 +297,7 @@ With the use of Bootstrap's border and background
297 297
<!-- icons-styling.vue -->
298 298
```
299 299 300 -
## Transforms
300 +
## SVG transforms
301 301 302 302
BootstrapVue icons provide several props for applying basic SVG transforms to the `<svg>`. All
303 303
transforms can be combined for added effect. Note that the transforms are applied to the `<svg>`
@@ -428,6 +428,64 @@ Shifting is applied after any rotation transforms. As with scaling, backgrounds
428 428
affected. If you need to shift the border/background with the icon, use Bootstrap's margin
429 429
[spacing utility classes](/docs/reference/utility-classes).
430 430 431 +
## Animated icons
432 + 433 +
<span class="badge badge-info small">v2.7.0+</span>
434 + 435 +
BootstrapVue includes two spinning animation options for icons: `spin` and `pulse`. Both animations
436 +
spin the icon clockwise, but pulse uses a stepped spin. A third animation called `cylon` is also
437 +
provided.
438 + 439 +
To use the spin animation, set the `animation` prop to one of the animation names `'spin'`,
440 +
`'pulse'` or `'cylon'`.
441 + 442 +
```html
443 +
<template>
444 +
<div>
445 +
<p>Spinning animation:</p>
446 +
<b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
447 + 448 +
<p class="mt-3">Pulsing animation:</p>
449 +
<b-icon icon="arrow-clockwise" animation="pulse" font-scale="4"></b-icon>
450 + 451 +
<p class="mt-3">Cylon animation:</p>
452 +
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
453 +
</div>
454 +
</template>
455 + 456 +
<!-- b-icon-spin-aminations.vue -->
457 +
```
458 + 459 +
Note with the `cylon` animation, the left-right movement extends past the icon's bounding box by
460 +
`25%`, so you may need to adjust padding or margins to compensate for your use case.
461 + 462 +
As the animations are CSS based, they are applied _after_ any SVG transforms have taken place:
463 + 464 +
```html
465 +
<template>
466 +
<div class="p-4">
467 +
<b-icon icon="clock" animation="spin" font-scale="4" shift-v="8"></b-icon>
468 +
</div>
469 +
</template>
470 + 471 +
<!-- b-icon-spin-aminations-transforms.vue -->
472 +
```
473 + 474 +
The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. The `animation`
475 +
prop translates to the class name `b-icon-animation-{animationName}`.
476 + 477 +
Need a different style animation? Just create a custom class defining the animation, and apply that
478 +
class to the icon component, or create a new animation class in the form of
479 +
`b-icon-animation-{animationName}` and pass the custom animation name to the `animation` prop.
480 + 481 +
**Note:** The BootstrapVue defined animation effects of this component is dependent on the
482 +
`prefers-reduced-motion` media query. See the
483 +
[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
484 +
additional details.
485 + 486 +
Side note: the `cylon` animation gets its name from the "eye" of the Cylons from the _original_
487 +
[1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
488 + 431 489
## Stacking icons
432 490 433 491
<span class="badge badge-info small">v2.3.0+</span>
@@ -492,6 +550,8 @@ Stacked icon notes:
492 550
- The `font-scale` prop cannot be used on the inner icon components
493 551
- The `width` and `height` attributes cannot be applied to the inner icon components
494 552
- Stacked icons **cannot** be stacked inside another `<b-iconstack>`
553 +
- Note the animation props on the child icons will have no effect, however you _can_ use the
554 +
animation props on the `<b-iconstack>` component.
495 555 496 556
## Using in components
497 557
@@ -9,6 +9,47 @@
9 9
// Perhaps this values should be SASS variables?
10 10
vertical-align: -0.15em;
11 11
}
12 + 13 +
&.b-icon-animation-spin {
14 +
animation: $b-icon-animation-spin-duration infinite linear b-icon-animation-spin;
15 +
@media (prefers-reduced-motion: reduce) {
16 +
animation: none;
17 +
}
18 +
}
19 + 20 +
&.b-icon-animation-pulse {
21 +
animation: $b-icon-animation-pulse-duration infinite steps(8) b-icon-animation-spin;
22 +
@media (prefers-reduced-motion: reduce) {
23 +
animation: none;
24 +
}
25 +
}
26 + 27 +
&.b-icon-animation-cylon {
28 +
animation: $b-icon-animation-cylon-duration infinite ease-in-out alternate
29 +
b-icon-animation-cylon;
30 +
@media (prefers-reduced-motion: reduce) {
31 +
animation: none;
32 +
}
33 +
}
34 +
}
35 + 36 +
// Animation for spinning icons
37 +
@keyframes b-icon-animation-spin {
38 +
0% {
39 +
transform: rotate(0deg);
40 +
}
41 +
100% {
42 +
transform: rotate(359deg);
43 +
}
44 +
}
45 + 46 +
@keyframes b-icon-animation-cylon {
47 +
0% {
48 +
transform: translateX(-25%);
49 +
}
50 +
100% {
51 +
transform: translateX(25%);
52 +
}
12 53
}
13 54 14 55
// Make icons slightly larger in buttons, nav-links, dropdowns, and input-group-text
@@ -37,6 +37,10 @@ export const commonIconProps = {
37 37
shiftV: {
38 38
type: [Number, String],
39 39
default: 0
40 +
},
41 +
animation: {
42 +
type: String,
43 +
default: null
40 44
}
41 45
}
42 46
@@ -73,6 +77,7 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({
73 77
const shiftV = toFloat(props.shiftV) || 0
74 78
const flipH = props.flipH
75 79
const flipV = props.flipV
80 +
const animation = props.animation
76 81
// Compute the transforms
77 82
// Note that order is important as SVG transforms are applied in order from
78 83
// left to right and we want flipping/scale to occur before rotation
@@ -116,7 +121,10 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({
116 121
mergeData(
117 122
{
118 123
staticClass: 'b-icon bi',
119 -
class: { [`text-${props.variant}`]: !!props.variant },
124 +
class: {
125 +
[`text-${props.variant}`]: !!props.variant,
126 +
[`b-icon-animation-${animation}`]: !!animation
127 +
},
120 128
attrs: baseAttrs,
121 129
style: isStacked ? {} : { fontSize: fontScale === 1 ? null : `${fontScale * 100}%` }
122 130
},
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4