UNPKG

vuestic-ui

Version:

Vue 3 UI Framework

vuestic.dev

epicmaxco/vuestic-ui

9 lines (8 loc) • 3.71 kB
1
2
3
4
5
6
7
8
9
import { _ as _sfc_main } from "./VaProgressBar.vue_vue_type_script_setup_true_lang.js"; import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js"; const _style_0 = ":root,\n:host {\n --va-progress-bar-width: 100%;\n --va-progress-bar-position: relative;\n --va-progress-bar-overflow: hidden;\n --va-progress-bar-height: 0.5rem;\n --va-progress-bar-border-radius: 9999999px;\n /* Small */\n --va-progress-bar-sm-height: 2px;\n /* Large */\n --va-progress-bar-lg-height: 16px;\n /* Info */\n --va-progress-bar-info-font-weight: 700;\n --va-progress-bar-info-text-align: center;\n --va-progress-bar-info-text-transform: uppercase;\n --va-progress-bar-info-not-empty-margin-bottom: 0.1rem;\n /* Buffer */\n --va-progress-bar-buffer-opacity: 0.3;\n --va-progress-bar-buffer-transition: width ease 2s;\n /* Overlay */\n --va-progress-bar-transition: width ease 2s;\n --va-progress-bar-letter-spacing: 0.6px;\n --va-progress-bar-line-height: 1;\n --va-progress-bar-font-size: 0.8em;\n --va-progress-bar-font-weight: 700;\n}\n.va-progress-bar {\n width: var(--va-progress-bar-width);\n position: relative;\n overflow: hidden;\n font-family: var(--va-font-family);\n line-height: var(--va-progress-bar-line-height);\n}\n.va-progress-bar__info {\n font-weight: var(--va-progress-bar-info-font-weight);\n text-align: var(--va-progress-bar-info-text-align);\n text-transform: var(--va-progress-bar-info-text-transform);\n}\n.va-progress-bar__info:not(:empty) {\n margin-bottom: var(--va-progress-bar-info-not-empty-margin-bottom);\n}\n.va-progress-bar__wrapper {\n position: relative;\n overflow: hidden;\n border-radius: var(--va-progress-bar-border-radius);\n}\n.va-progress-bar--small .va-progress-bar__wrapper {\n height: var(--va-progress-bar-sm-height);\n}\n.va-progress-bar--medium .va-progress-bar__wrapper {\n height: var(--va-progress-bar-height);\n}\n.va-progress-bar--large .va-progress-bar__wrapper {\n height: var(--va-progress-bar-lg-height);\n}\n.va-progress-bar--square .va-progress-bar__wrapper {\n --va-progress-bar-border-radius: 0;\n}\n.va-progress-bar__buffer {\n position: absolute;\n top: 0;\n height: inherit;\n border-radius: inherit;\n transition: var(--va-progress-bar-buffer-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n letter-spacing: var(--va-progress-bar-letter-spacing);\n font-size: var(--va-progress-bar-font-size);\n font-weight: var(--va-progress-bar-font-weight);\n background-color: var(--va-progress-bar-background-color);\n}\n.va-progress-bar__progress {\n height: inherit;\n border-radius: inherit;\n transition: var(--va-progress-bar-transition);\n background-color: var(--va-progress-bar-color);\n}\n.va-progress-bar__progress--indeterminate-start {\n background-color: var(--va-progress-bar-color);\n animation: va-progress-bar-indeterminate-start 2s ease-in infinite;\n position: absolute;\n height: inherit;\n}\n.va-progress-bar__progress--indeterminate-end {\n background-color: var(--va-progress-bar-color);\n animation: va-progress-bar-indeterminate-end 2s ease-out 1s infinite;\n position: absolute;\n height: inherit;\n}\n@keyframes va-progress-bar-indeterminate-start {\n0% {\n width: 10%;\n left: -10%;\n}\n50% {\n width: 100%;\n left: 100%;\n}\n100% {\n width: 100%;\n left: 100%;\n}\n}\n@keyframes va-progress-bar-indeterminate-end {\n0% {\n width: 100%;\n left: -100%;\n}\n50% {\n width: 10%;\n left: 100%;\n}\n100% {\n width: 10%;\n left: 100%;\n}\n}"; const _VaProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]); export { _VaProgressBar as _ }; //# sourceMappingURL=VaProgressBar.js.map