diff options
author | Matthew Lemon <y@yulqen.org> | 2024-09-16 17:12:15 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-09-16 17:12:15 +0100 |
commit | 86bb29b4d378314bd906248e08198c1952d2f0a4 (patch) | |
tree | 005bb24dfa6a0e5d911d6cfdda9d469828a387a1 /pyblackbird_cc/static/scss/_spinners.scss | |
parent | 0d3ae1492e1a88db69437cd277b7cf11c4e6274a (diff) |
Upgrade to bootstrap 5.3
Diffstat (limited to 'pyblackbird_cc/static/scss/_spinners.scss')
-rw-r--r-- | pyblackbird_cc/static/scss/_spinners.scss | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/pyblackbird_cc/static/scss/_spinners.scss b/pyblackbird_cc/static/scss/_spinners.scss new file mode 100644 index 0000000..ec84732 --- /dev/null +++ b/pyblackbird_cc/static/scss/_spinners.scss @@ -0,0 +1,85 @@ +// +// Rotating border +// + +.spinner-grow, +.spinner-border { + display: inline-block; + width: var(--#{$prefix}spinner-width); + height: var(--#{$prefix}spinner-height); + vertical-align: var(--#{$prefix}spinner-vertical-align); + // stylelint-disable-next-line property-disallowed-list + border-radius: 50%; + animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name); +} + +// scss-docs-start spinner-border-keyframes +@keyframes spinner-border { + to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } +} +// scss-docs-end spinner-border-keyframes + +.spinner-border { + // scss-docs-start spinner-border-css-vars + --#{$prefix}spinner-width: #{$spinner-width}; + --#{$prefix}spinner-height: #{$spinner-height}; + --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; + --#{$prefix}spinner-border-width: #{$spinner-border-width}; + --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; + --#{$prefix}spinner-animation-name: spinner-border; + // scss-docs-end spinner-border-css-vars + + border: var(--#{$prefix}spinner-border-width) solid currentcolor; + border-right-color: transparent; +} + +.spinner-border-sm { + // scss-docs-start spinner-border-sm-css-vars + --#{$prefix}spinner-width: #{$spinner-width-sm}; + --#{$prefix}spinner-height: #{$spinner-height-sm}; + --#{$prefix}spinner-border-width: #{$spinner-border-width-sm}; + // scss-docs-end spinner-border-sm-css-vars +} + +// +// Growing circle +// + +// scss-docs-start spinner-grow-keyframes +@keyframes spinner-grow { + 0% { + transform: scale(0); + } + 50% { + opacity: 1; + transform: none; + } +} +// scss-docs-end spinner-grow-keyframes + +.spinner-grow { + // scss-docs-start spinner-grow-css-vars + --#{$prefix}spinner-width: #{$spinner-width}; + --#{$prefix}spinner-height: #{$spinner-height}; + --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; + --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; + --#{$prefix}spinner-animation-name: spinner-grow; + // scss-docs-end spinner-grow-css-vars + + background-color: currentcolor; + opacity: 0; +} + +.spinner-grow-sm { + --#{$prefix}spinner-width: #{$spinner-width-sm}; + --#{$prefix}spinner-height: #{$spinner-height-sm}; +} + +@if $enable-reduced-motion { + @media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2}; + } + } +} |