vuestic-ui
Version:
Vue 3 UI Framework
9 lines (8 loc) • 9.9 kB
JavaScript
import { _ as _sfc_main } from "./VaSlider.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 /* Track */\n --va-slider-track-border-radius: 0.25rem;\n --va-slider-track-transition: 0.5s ease-out;\n --va-slider-track-opacity: 1;\n /* Pin */\n --va-slider-pin-transition: background-color 0.3s ease-out 0.1s;\n /* Handler */\n --va-slider-handler-width: 1.25rem;\n --va-slider-handler-height: 1.25rem;\n --va-slider-handler-background: var(--va-background-primary);\n --va-slider-handler-border: 0.375rem solid;\n --va-slider-handler-border-radius: 50%;\n --va-slider-handler-outline: none !important;\n --va-slider-handler-left: -0.375rem;\n --va-slider-handler-transition: 0s;\n /* Dot */\n --va-slider-dot-transform: translate(-0.625rem, -0.625rem);\n --va-slider-dot-display: block;\n --va-slider-dot-width: 1.75rem;\n --va-slider-dot-height: 1.75rem;\n --va-slider-dot-border-radius: 50%;\n --va-slider-dot-opacity: 0.2;\n --va-slider-dot-pointer-events: none;\n /* Dot Value */\n --va-slider-dot-value-transform: translate(-50%, -100%);\n --va-slider-dot-value-user-select: none;\n --va-slider-dot-value-font-size: 0.625rem;\n --va-slider-dot-value-letter-spacing: 0.6px;\n --va-slider-dot-value-line-height: 1.2;\n --va-slider-dot-value-font-weight: 700;\n --va-slider-dot-value-text-transform: none;\n --va-slider-dot-value-white-space: nowrap;\n /* Input Label */\n --va-slider-input-label-user-select: none;\n --va-slider-input-label-font-size: 0.625rem;\n --va-slider-input-label-letter-spacing: 0.6px;\n --va-slider-input-label-line-height: 1.2;\n --va-slider-input-label-font-weight: 700;\n --va-slider-input-label-text-transform: uppercase;\n --va-slider-input-label-inverse-user-select: none;\n --va-slider-input-label-inverse-font-size: 0.625rem;\n --va-slider-input-label-inverse-letter-spacing: 0.6px;\n --va-slider-input-label-inverse-line-height: 1.2;\n --va-slider-input-label-inverse-font-weight: 700;\n --va-slider-input-label-inverse-text-transform: uppercase;\n /* Horizontal */\n --va-slider-horizontal-input-wrapper-margin-right: 1rem;\n /* Horizontal Track */\n --va-slider-horizontal-track-height: 0.5rem;\n --va-slider-horizontal-track-width: 100%;\n /* Horizontal Track */\n --va-slider-horizontal-handler-transform: translateX(-50%);\n /* Horizontal Dot */\n --va-slider-horizontal-dot-value-top: -8px;\n --va-slider-horizontal-dot-value-left: 50%;\n /* Vertical */\n --va-slider-vertical-height: 100%;\n --va-slider-vertical-padding: 12px 0 12px 0;\n --va-slider-vertical-flex-direction: column;\n --va-slider-vertical-align-items: center;\n /* Vertical Label */\n --va-slider-vertical-label-margin-bottom: 0.625rem;\n --va-slider-vertical-label-inverse-left: -0.375rem;\n --va-slider-vertical-label-inverse-margin-top: 0.625rem;\n /* Vertical Input Wrapper */\n --va-slider-vertical-input-wrapper-max-width: 1rem;\n --va-slider-vertical-input-wrapper-min-width: 2.5rem;\n /* Vertical Track */\n --va-slider-vertical-track-height: 100%;\n --va-slider-vertical-track-width: 0.5rem;\n --va-slider-vertical-track-bottom: 0;\n /* Vertical Handler */\n --va-slider-vertical-handler-transform: translateY(50%);\n /* Vertical Dot Value */\n --va-slider-vertical-dot-value-top: 0.625rem;\n --va-slider-vertical-dot-value-left: 1.25rem;\n}\n.va-slider {\n display: flex;\n align-items: center;\n font-family: var(--va-font-family);\n}\n.va-slider__input-wrapper {\n position: relative;\n display: flex;\n}\n.va-slider__container {\n position: relative;\n display: flex;\n align-items: center;\n cursor: grab;\n}\n.va-slider__track {\n position: absolute;\n border-radius: var(--va-slider-track-border-radius);\n transition: var(--va-slider-track-transition);\n opacity: var(--va-slider-track-opacity);\n}\n.va-slider__track--active {\n transition: 0s;\n}\n.va-slider__track--selected {\n opacity: 1;\n}\n.va-slider__handler {\n position: absolute;\n width: var(--va-slider-handler-width);\n height: var(--va-slider-handler-height);\n background: var(--va-slider-handler-background);\n border: var(--va-slider-handler-border);\n border-radius: var(--va-slider-handler-border-radius);\n outline: var(--va-slider-handler-outline);\n left: var(--va-slider-handler-left);\n transition: var(--va-slider-handler-transition);\n box-sizing: border-box;\n}\n.va-slider__handler__dot--focus {\n transform: var(--va-slider-dot-transform);\n display: block;\n width: var(--va-slider-dot-width);\n height: var(--va-slider-dot-height);\n position: absolute;\n border-radius: var(--va-slider-dot-border-radius);\n opacity: var(--va-slider-dot-opacity);\n pointer-events: var(--va-slider-dot-pointer-events);\n}\n.va-slider__handler__dot--value {\n transform: var(--va-slider-dot-value-transform);\n -webkit-user-select: var(--va-slider-dot-value-user-select);\n -moz-user-select: var(--va-slider-dot-value-user-select);\n user-select: var(--va-slider-dot-value-user-select);\n font-size: var(--va-slider-dot-value-font-size);\n letter-spacing: var(--va-slider-dot-value-letter-spacing);\n line-height: var(--va-slider-dot-value-line-height);\n font-weight: var(--va-slider-dot-value-font-weight);\n text-transform: var(--va-slider-dot-value-text-transform);\n white-space: var(--va-slider-dot-value-white-space);\n}\n.va-slider .va-input__label {\n -webkit-user-select: var(--va-slider-input-label-user-select);\n -moz-user-select: var(--va-slider-input-label-user-select);\n user-select: var(--va-slider-input-label-user-select);\n font-size: var(--va-slider-input-label-font-size);\n letter-spacing: var(--va-slider-input-label-letter-spacing);\n line-height: var(--va-slider-input-label-line-height);\n font-weight: var(--va-slider-input-label-font-weight);\n text-transform: var(--va-slider-input-label-text-transform);\n}\n.va-slider .va-input__label--inverse {\n -webkit-user-select: var(--va-slider-input-label-inverse-user-select);\n -moz-user-select: var(--va-slider-input-label-inverse-user-select);\n user-select: var(--va-slider-input-label-inverse-user-select);\n font-size: var(--va-slider-input-label-inverse-font-size);\n letter-spacing: var(--va-slider-input-label-inverse-letter-spacing);\n line-height: var(--va-slider-input-label-inverse-line-height);\n font-weight: var(--va-slider-input-label-inverse-font-weight);\n text-transform: var(--va-slider-input-label-inverse-text-transform);\n}\n.va-slider--grabbing .va-slider__container {\n cursor: grabbing;\n}\n.va-slider--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-slider--disabled .va-slider__container {\n cursor: default;\n}\n.va-slider--readonly .va-slider__container {\n cursor: default;\n}\n.va-slider--horizontal .va-slider__input-wrapper {\n flex-basis: fit-content;\n flex-grow: 0;\n margin-right: var(--va-slider-horizontal-input-wrapper-margin-right);\n}\n.va-slider--horizontal .va-slider__input-wrapper:last-of-type {\n margin-left: 1rem;\n}\n.va-slider--horizontal .va-slider__container {\n width: 100%;\n height: 1.5rem;\n}\n.va-slider--horizontal .va-slider__track {\n height: var(--va-slider-horizontal-track-height);\n width: var(--va-slider-horizontal-track-width);\n}\n.va-slider--horizontal .va-slider__mark {\n position: absolute;\n width: 0.125rem;\n height: 0.75rem;\n}\n.va-slider--horizontal .va-slider__handler {\n transform: var(--va-slider-horizontal-handler-transform);\n}\n.va-slider--horizontal .va-slider__handler--inactive {\n transition: left 0.5s ease-out;\n}\n.va-slider--horizontal .va-slider__handler__dot--value {\n position: absolute;\n top: var(--va-slider-horizontal-dot-value-top);\n left: var(--va-slider-horizontal-dot-value-left);\n}\n.va-slider--horizontal .va-input__label {\n margin-right: 1rem;\n}\n.va-slider--horizontal .va-input__label--inverse {\n margin-left: 1rem;\n}\n.va-slider--vertical {\n height: var(--va-slider-vertical-height);\n padding: var(--va-slider-vertical-padding);\n flex-direction: var(--va-slider-vertical-flex-direction);\n align-items: var(--va-slider-vertical-align-items);\n}\n.va-slider--vertical .va-input__label {\n margin-bottom: var(--va-slider-vertical-label-margin-bottom);\n}\n.va-slider--vertical .va-input__label--inverse {\n left: var(--va-slider-vertical-label-inverse-left);\n margin-top: var(--va-slider-vertical-label-inverse-margin-top);\n}\n.va-slider--vertical .va-slider__input-wrapper {\n flex-basis: fit-content;\n flex-grow: 0;\n max-width: var(--va-slider-vertical-input-wrapper-max-width);\n min-width: var(--va-slider-vertical-input-wrapper-min-width);\n position: relative;\n display: flex;\n}\n.va-slider--vertical .va-slider__input-wrapper:last-of-type {\n margin-top: 1rem;\n}\n.va-slider--vertical .va-slider__container {\n height: 100%;\n width: 0.5rem;\n}\n.va-slider--vertical .va-slider__track {\n height: var(--va-slider-vertical-track-height);\n width: var(--va-slider-vertical-track-width);\n bottom: var(--va-slider-vertical-track-bottom);\n}\n.va-slider--vertical .va-slider__mark {\n position: absolute;\n width: 0.75rem;\n height: 0.125rem;\n left: -2px;\n}\n.va-slider--vertical .va-slider__handler {\n transform: var(--va-slider-vertical-handler-transform);\n}\n.va-slider--vertical .va-slider__handler--inactive {\n transition: bottom 0.5s ease-out;\n}\n.va-slider--vertical .va-slider__handler__dot--value {\n position: relative;\n top: var(--va-slider-vertical-dot-value-top);\n left: var(--va-slider-vertical-dot-value-left);\n}";
const _VaSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaSlider as _
};
//# sourceMappingURL=VaSlider.js.map