vuestic-ui
Version:
Vue 3 UI Framework
9 lines (8 loc) • 7.27 kB
JavaScript
import { _ as _sfc_main } from "./VaSwitch.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-switch-display: inline-block;\n /* Checker */\n --va-switch-checker-margin: auto;\n --va-switch-checker-transform: translateX(0.3rem);\n --va-switch-checker-height: 1.5rem;\n --va-switch-checker-width: 1.5rem;\n --va-switch-checker-active-background-color: #ffffff;\n --va-switch-checker-background-color: var(--va-secondary);\n --va-switch-checker-border-radius: 50%;\n --va-switch-checker-box-shadow: 0 0 0 var(--va-background-border);\n --va-switch-checker-transition: all 0.2s ease;\n /* Checker Wrapper */\n --va-switch-checker-wrapper-transform: translateX(0);\n --va-switch-checker-wrapper-top: 0;\n --va-switch-checker-wrapper-left: 0;\n --va-switch-checker-wrapper-bottom: 0;\n --va-switch-checker-wrapper-right: 0;\n --va-switch-checker-wrapper-width: 100%;\n --va-switch-checker-wrapper-height: 100%;\n --va-switch-checker-wrapper-transition: all 0.2s ease;\n --va-switch-checker-wrapper-pointer-events: none;\n /* Label */\n --va-switch-label-left-padding: 0.3rem;\n --va-switch-label-right-padding: 0.3rem;\n /* Track */\n --va-switch-track-border-radius: 1rem;\n --va-switch-track-height: 100%;\n --va-switch-track-width: 100%;\n --va-switch-track-background: var(--va-background-element);\n --va-switch-track-box-shadow: inset 0 0 0 var(--va-shadow);\n --va-switch-track-transition: background-color 0.2s ease;\n /* Inner */\n --va-switch-inner-cursor: pointer;\n --va-switch-inner-height: 2rem;\n --va-switch-inner-width: auto;\n --va-switch-inner-min-width: 4rem;\n --va-switch-inner-border-radius: 1rem;\n /* Small */\n --va-switch-sm-inner-height: 1.5rem;\n --va-switch-sm-inner-width: auto;\n --va-switch-sm-inner-min-width: 3rem;\n /* Large */\n --va-switch-lg-inner-height: 2.5rem;\n --va-switch-lg-inner-width: auto;\n --va-switch-lg-inner-min-width: 5rem;\n}\n.va-switch {\n line-height: 0;\n display: var(--va-switch-display);\n}\n.va-switch__container {\n display: inline-flex;\n align-items: center;\n width: 100%;\n}\n.va-switch:focus {\n outline: none;\n}\n.va-switch__inner {\n cursor: var(--va-switch-inner-cursor);\n display: inline-block;\n position: relative;\n height: var(--va-switch-inner-height);\n width: var(--va-switch-inner-width);\n min-width: var(--va-switch-inner-min-width);\n border-radius: var(--va-switch-inner-border-radius);\n}\n.va-switch__inner:focus {\n outline: 0;\n box-shadow: 0 0 0 0.3rem rgba(52, 144, 220, 0.5);\n}\n.va-switch--small .va-switch__inner {\n height: var(--va-switch-sm-inner-height);\n width: var(--va-switch-sm-inner-width);\n min-width: var(--va-switch-sm-inner-min-width);\n}\n.va-switch--small .va-switch__checker-circle {\n height: 1.1rem;\n width: 1.1rem;\n}\n.va-switch--large .va-switch__inner {\n height: var(--va-switch-lg-inner-height);\n width: var(--va-switch-lg-inner-width);\n min-width: var(--va-switch-lg-inner-min-width);\n}\n.va-switch--large .va-switch__checker-circle {\n height: 1.8rem;\n width: 1.8rem;\n}\n.va-switch--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-switch--readonly {\n cursor: default;\n pointer-events: none;\n}\n.va-switch--readonly .va-switch__label {\n cursor: initial;\n pointer-events: auto;\n}\n.va-switch--left-label .va-switch__container {\n flex-direction: row-reverse;\n justify-content: start;\n}\n.va-switch--left-label .va-switch__label {\n padding: 0 var(--va-switch-label-left-padding) 0 0;\n}\n.va-switch--indeterminate .va-switch__checker {\n margin: auto 0;\n transform: translateX(-50%);\n}\n.va-switch--indeterminate .va-switch__checker-wrapper {\n transform: translateX(50%);\n}\n.va-switch--checked .va-switch__checker {\n transform: translateX(calc(-100% - 0.3rem));\n}\n.va-switch--checked .va-switch__checker-circle {\n background-color: var(--va-switch-checker-active-background-color);\n}\n.va-switch--checked .va-switch__checker-wrapper {\n transform: translateX(100%);\n}\n.va-switch--error .va-switch__track {\n border: 0.1rem solid;\n}\n.va-switch__label {\n cursor: pointer;\n text-align: left;\n padding: 0 0 0 var(--va-switch-label-right-padding);\n}\n.va-switch .va-switch__track {\n display: flex;\n overflow: hidden;\n border-radius: var(--va-switch-track-border-radius);\n height: var(--va-switch-track-height);\n width: var(--va-switch-track-width);\n background: var(--va-switch-track-background);\n box-shadow: var(--va-switch-track-box-shadow);\n transition: var(--va-switch-track-transition);\n}\n.va-switch--keyboard-focus.va-switch .va-switch__track {\n outline: 2px solid var(--va-focus) !important;\n border-radius: "inherit";\n}\n.va-switch--small.va-switch .va-switch__track {\n border-radius: 0.75rem;\n}\n.va-switch--large.va-switch .va-switch__track {\n border-radius: 1.25rem;\n}\n.va-switch .va-switch__track-label {\n color: #ffffff;\n margin: auto 0.5rem auto 2rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n width: 100%;\n}\n.va-switch--checked.va-switch .va-switch__track-label {\n margin: auto 2rem auto 0.5rem;\n}\n.va-switch--small.va-switch .va-switch__track-label {\n margin: auto 0.5rem auto 1.55rem;\n}\n.va-switch--checked.va-switch--small.va-switch .va-switch__track-label {\n margin: auto 1.55rem auto 0.5rem;\n}\n.va-switch--large.va-switch .va-switch__track-label {\n margin: auto 0.5rem auto 2.3rem;\n}\n.va-switch--checked.va-switch--large.va-switch .va-switch__track-label {\n margin: auto 2.3rem auto 0.5rem;\n}\n.va-switch__checker {\n position: absolute;\n top: 0;\n bottom: 0;\n margin: var(--va-switch-checker-margin);\n transform: var(--va-switch-checker-transform);\n box-shadow: var(--va-switch-checker-box-shadow);\n transition: var(--va-switch-checker-transition);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.va-switch__checker-circle {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--va-switch-checker-height);\n width: var(--va-switch-checker-width);\n background-color: var(--va-switch-checker-background-color);\n border-radius: var(--va-switch-checker-border-radius);\n}\n.va-switch__checker-wrapper {\n position: absolute;\n margin: auto;\n transform: var(--va-switch-checker-wrapper-transform);\n top: var(--va-switch-checker-wrapper-top);\n left: var(--va-switch-checker-wrapper-left);\n bottom: var(--va-switch-checker-wrapper-bottom);\n right: var(--va-switch-checker-wrapper-right);\n width: var(--va-switch-checker-wrapper-width);\n height: var(--va-switch-checker-wrapper-height);\n transition: var(--va-switch-checker-wrapper-transition);\n pointer-events: var(--va-switch-checker-wrapper-pointer-events);\n}\n.va-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n}';
const _VaSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaSwitch as _
};
//# sourceMappingURL=VaSwitch.js.map