vuestic-ui
Version:
Vue 3 UI Framework
9 lines (8 loc) • 7.77 kB
JavaScript
import { _ as _sfc_main } from "./VaButton.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 /* General */\n --va-button-display: inline-flex;\n --va-button-justify-content: center;\n --va-button-align-items: center;\n --va-button-background-image: none;\n --va-button-box-shadow: none;\n --va-button-border-width: 0;\n --va-button-border-color: unset;\n --va-button-border-style: none;\n --va-button-font-weight: 600;\n --va-button-transition: none;\n --va-button-padding: 0;\n --va-button-cursor: pointer;\n /* Small */\n --va-button-sm-size: 1.5rem;\n --va-button-sm-content-py: 0.25rem;\n --va-button-sm-content-px: 0.375rem;\n --va-button-sm-only-icon-content-px: 0.25rem;\n --va-button-sm-font-size: 0.8125rem;\n --va-button-sm-letter-spacing: 0;\n --va-button-sm-line-height: 1rem;\n --va-button-sm-border-radius: 0.125rem;\n --va-button-sm-icon-side-padding: var(--va-button-sm-content-py);\n --va-button-sm-icons-spacing: 0.125rem;\n /* Medium */\n --va-button-size: 2.25rem;\n --va-button-content-py: 0.5rem;\n --va-button-content-px: 0.75rem;\n --va-button-only-icon-content-px: 0.5rem;\n --va-button-font-size: 1rem;\n --va-button-letter-spacing: 0;\n --va-button-line-height: 1.25rem;\n --va-button-border-radius: 0.25rem;\n --va-button-icon-side-padding: var(--va-button-content-py);\n --va-button-icons-spacing: 0.25rem;\n /* Large */\n --va-button-lg-size: 3rem;\n --va-button-lg-content-py: 0.75rem;\n --va-button-lg-content-px: 1rem;\n --va-button-lg-only-icon-content-px: 1rem;\n --va-button-lg-font-size: 1.05rem;\n --va-button-lg-letter-spacing: 0;\n --va-button-lg-line-height: 1.5rem;\n --va-button-lg-border-radius: 0.5rem;\n --va-button-lg-icon-side-padding: var(--va-button-lg-content-py);\n --va-button-lg-icons-spacing: 0.25rem;\n /* Bordered */\n --va-button-bordered-border: 1px;\n --va-button-bordered-style: solid;\n}\n.va-button {\n position: relative;\n padding: var(--va-button-padding);\n display: var(--va-button-display);\n justify-content: var(--va-button-justify-content);\n align-items: var(--va-button-align-items);\n border-width: var(--va-button-border-width);\n border-color: var(--va-button-border-color);\n border-style: var(--va-button-border-style);\n background-image: var(--va-button-background-image);\n box-shadow: var(--va-button-box-shadow);\n font-family: var(--va-font-family);\n font-weight: var(--va-button-font-weight);\n text-decoration: none;\n text-transform: initial;\n transition: var(--va-button-transition);\n box-sizing: border-box;\n cursor: var(--va-button-cursor);\n z-index: 0;\n vertical-align: top;\n}\n.va-button::after, .va-button::before {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n left: 0;\n top: 0;\n z-index: -1;\n}\n.va-button::before {\n background: var(--2dc0cb44);\n opacity: var(--18555027);\n}\n.va-button::after {\n background-color: var(--03936f38);\n opacity: var(--2f58d2c0);\n}\n.va-button__content {\n height: 100%;\n display: flex;\n align-items: center;\n z-index: 1;\n}\n.va-button__content--loading {\n opacity: 0;\n}\n.va-button--small {\n line-height: var(--va-button-sm-line-height);\n border-radius: var(--va-button-sm-border-radius);\n letter-spacing: var(--va-button-sm-letter-spacing);\n min-height: var(--va-button-sm-size);\n min-width: var(--va-button-sm-size);\n}\n.va-button--small .va-button__content {\n font-size: var(--va-button-sm-font-size);\n padding: var(--va-button-sm-content-py) var(--va-button-sm-content-px);\n}\n.va-button--small .va-button__left-icon {\n margin-right: var(--va-button-sm-icons-spacing);\n}\n.va-button--small .va-button__right-icon {\n margin-left: var(--va-button-sm-icons-spacing);\n}\n.va-button--small.va-button--bordered .va-button__content {\n padding-top: calc(var(--va-button-sm-content-py) - var(--va-button-bordered-border));\n padding-bottom: calc(var(--va-button-sm-content-py) - var(--va-button-bordered-border));\n}\n.va-button--small.va-button--left-icon .va-button__content {\n padding-left: var(--va-button-sm-icon-side-padding);\n}\n.va-button--small.va-button--right-icon .va-button__content {\n padding-right: var(--va-button-sm-icon-side-padding);\n}\n.va-button--normal {\n line-height: var(--va-button-line-height);\n border-radius: var(--va-button-border-radius);\n letter-spacing: var(--va-button-letter-spacing);\n min-height: var(--va-button-size);\n min-width: var(--va-button-size);\n}\n.va-button--normal .va-button__content {\n font-size: var(--va-button-font-size);\n padding: var(--va-button-content-py) var(--va-button-content-px);\n line-height: var(--va-button-line-height);\n}\n.va-button--normal .va-button__left-icon {\n margin-right: var(--va-gap-medium);\n}\n.va-button--normal .va-button__right-icon {\n margin-left: var(--va-gap-medium);\n}\n.va-button--normal.va-button--bordered .va-button__content {\n padding-top: calc(var(--va-button-content-py) - var(--va-button-bordered-border));\n padding-bottom: calc(var(--va-button-content-py) - var(--va-button-bordered-border));\n}\n.va-button--large {\n line-height: var(--va-button-lg-line-height);\n border-radius: var(--va-button-lg-border-radius);\n letter-spacing: var(--va-button-lg-letter-spacing);\n min-height: var(--va-button-lg-size);\n min-width: var(--va-button-lg-size);\n}\n.va-button--large .va-button__content {\n font-size: var(--va-button-lg-font-size);\n padding: var(--va-button-lg-content-py) var(--va-button-lg-content-px);\n}\n.va-button--large .va-button__left-icon {\n margin-right: var(--va-button-lg-icons-spacing);\n}\n.va-button--large .va-button__right-icon {\n margin-left: var(--va-button-lg-icons-spacing);\n}\n.va-button--large.va-button--bordered .va-button__content {\n padding-top: calc(var(--va-button-lg-content-py) - var(--va-button-bordered-border));\n padding-bottom: calc(var(--va-button-lg-content-py) - var(--va-button-bordered-border));\n}\n.va-button--large.va-button--left-icon .va-button__content {\n padding-left: var(--va-button-lg-icon-side-padding);\n}\n.va-button--large.va-button--right-icon .va-button__content {\n padding-right: var(--va-button-lg-icon-side-padding);\n}\n.va-button--small.va-button--icon-only .va-button__content, .va-button--normal.va-button--icon-only .va-button__content, .va-button--large.va-button--icon-only .va-button__content {\n padding-right: 0;\n padding-left: 0;\n}\n.va-button--plain {\n min-width: auto;\n min-height: auto;\n}\n.va-button--plain .va-button__content {\n padding: 0;\n z-index: unset;\n}\n.va-button--round {\n border-radius: 999px;\n}\n.va-button--bordered {\n border-width: var(--va-button-bordered-border);\n border-style: var(--va-button-bordered-style);\n}\n.va-button.va-button--disabled {\n cursor: default;\n opacity: 0.4;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.va-button--icon-only .va-button__left-icon,\n.va-button--icon-only .va-button__right-icon {\n margin-left: 0;\n margin-right: 0;\n}\n.va-button--icon-only .va-button__content {\n padding: 0;\n}\n.va-button:focus-visible {\n outline: 2px solid var(--va-focus) !important;\n border-radius: "inherit";\n}\n.va-button--loading {\n pointer-events: none;\n}\n.va-button--block {\n display: flex;\n min-width: 100%;\n}\n.va-button__loader {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}';
const _VaButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaButton as _
};
//# sourceMappingURL=VaButton.js.map