vuestic-ui
Version:
Vue 3 UI Framework
9 lines (8 loc) • 3.69 kB
JavaScript
import { _ as _sfc_main } from "./VaCheckbox.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-checkbox-display: inline-block;\n --va-checkbox-input-padding: 0;\n --va-checkbox-input-cursor: pointer;\n --va-checkbox-disabled-cursor: default;\n --va-checkbox-readonly-cursor: initial;\n --va-checkbox-label-display: inline-block;\n --va-checkbox-label-cursor: pointer;\n --va-checkbox-font-size: 15px;\n --va-checkbox-line-height: 20px;\n --va-checkbox-background: transparent;\n /* Square */\n --va-checkbox-square-width: 1.25rem;\n --va-checkbox-square-min-width: 1.25rem;\n --va-checkbox-square-height: 1.25rem;\n --va-checkbox-square-border: solid var(--va-form-element-border-width) var(--va-background-border);\n --va-checkbox-square-border-radius: calc(var(--va-form-element-border-radius) / 2);\n /* Padding */\n --va-checkbox-horizontal-gap: 0.5em;\n --va-checkbox-vertical-gap: 0.3em;\n --va-checkbox-vertical-padding: var(--va-checkbox-vertical-gap) 0 var(--va-checkbox-vertical-gap) var(--va-checkbox-horizontal-gap);\n --va-checkbox-horizontal-padding: 0 var(--va-checkbox-horizontal-gap);\n --va-checkbox-right-padding: 0 var(--va-checkbox-horizontal-gap) 0 0;\n --va-checkbox-left-padding: 0 0 0 var(--va-checkbox-horizontal-gap);\n}\n.va-checkbox {\n display: var(--16d78658);\n max-width: -moz-fit-content;\n max-width: fit-content;\n font-family: var(--va-font-family);\n}\n.va-checkbox__input-container {\n align-items: center;\n display: flex;\n padding: var(--va-checkbox-input-padding);\n cursor: var(--va-checkbox-input-cursor);\n font-size: var(--va-checkbox-font-size);\n line-height: var(--va-checkbox-line-height);\n}\n.va-checkbox--disabled .va-checkbox__input-container {\n cursor: default;\n opacity: 0.4;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: var(--va-checkbox-disabled-cursor);\n}\n.va-checkbox--readonly .va-checkbox__input-container {\n cursor: var(--va-checkbox-readonly-cursor);\n}\n.va-checkbox--left-label .va-checkbox__input-container {\n flex-direction: row-reverse;\n}\n.va-checkbox .va-checkbox__square {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--va-checkbox-square-width);\n min-width: var(--va-checkbox-square-min-width);\n height: var(--va-checkbox-square-height);\n position: relative;\n background: var(--va-checkbox-background, --va-checkbox-square-background-color);\n border: var(--va-checkbox-square-border, var(--va-control-border));\n border-radius: var(--va-checkbox-square-border-radius);\n}\n.va-checkbox--on-keyboard-focus.va-checkbox .va-checkbox__square {\n transition: all, 0.6s, ease-in;\n outline: 2px solid var(--va-focus);\n}\n.va-checkbox__input {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n white-space: nowrap;\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n clip: rect(0 0 0 0);\n overflow: hidden;\n}\n.va-checkbox__label {\n display: var(--va-checkbox-label-display);\n position: relative;\n cursor: var(--va-checkbox-label-cursor);\n}\n.va-checkbox__icon {\n pointer-events: none;\n position: absolute;\n}\n.va-checkbox--selected .va-checkbox__icon {\n color: var(--va-checkbox-selected-icon-color);\n}\n.va-checkbox--indeterminate .va-checkbox__icon {\n color: var(--va-checkbox-indeterminate-icon-color);\n}";
const _VaCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaCheckbox as _
};
//# sourceMappingURL=VaCheckbox.js.map