536 lines
19 KiB
Vue
536 lines
19 KiB
Vue
<script setup>
|
|
// import { Vueform } from '@vueform/vueform';
|
|
// import cardiologyFormData from './cardiology-form.js'
|
|
import { defineProps, nextTick, onBeforeMount, onMounted, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const vueFormRef = ref(null);
|
|
const percentage = ref(0);
|
|
const currentTab = ref(0);
|
|
const question_length = ref(0);
|
|
const modelData = ref({})
|
|
const userRole = localStorage.getItem('user_role'); // Fetch user role from local storage
|
|
const isPatient = computed(() => userRole.toLowerCase() === 'patient');
|
|
const isAgent = computed(() => userRole.toLowerCase() === 'agent');
|
|
const isDisqualified = ref(false)
|
|
console.log('---', isPatient, isAgent)
|
|
const props = defineProps({
|
|
steps: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
schema: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
redirectTo: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
redirectBack: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
finishLabel: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
questionCategory: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
newForm: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
returningUser: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
})
|
|
const handleDisqualifyStep = () => {
|
|
// Logic to move to the disqualify step
|
|
console.log('vueFormRef.value>>>>')
|
|
// vueFormRef.value.stepper.goToStep('disqualification')
|
|
};
|
|
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
|
onBeforeMount(async () => {
|
|
console.log('>>>>>>>questionCategory', props.questionCategory)
|
|
if (props.finishLabel) {
|
|
const stepKeys = Object.keys(props.steps);
|
|
let step = stepKeys[stepKeys.length - 1]
|
|
props.steps[step].labels = {
|
|
next: props.finishLabel
|
|
}
|
|
}
|
|
store.dispatch('updateIsLoading', true)
|
|
if (isAgent.value) {
|
|
await store.dispatch('getAgentQuestionsAnswers')
|
|
}
|
|
|
|
if (isPatient.value) {
|
|
await store.dispatch('getPatientQuestionsAnswers')
|
|
}
|
|
|
|
console.log('Question Form Data', props.newForm, store.getters.getPatientAnswers, isEmpty(store.getters.getPatientAnswers))
|
|
if (props.returningUser && !isEmpty(store.getters.getPatientAnswers)) {
|
|
// console.log('Question Form Data', props.newForm, store.getters.getPatientAnswers, isEmpty(store.getters.getPatientAnswers))
|
|
modelData.value = store.getters.getPatientAnswers
|
|
for (const key in store.getters.getPatientAnswers) {
|
|
// Check if the objects object has the same key
|
|
if (vueFormRef.value.form$.data.hasOwnProperty(key)) {
|
|
// Assign the value from the response to the corresponding key in the objects object
|
|
vueFormRef.value.form$.data[key] = store.getters.getPatientAnswers[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log(modelData.value, store.getters.getPatientAnswers)
|
|
store.dispatch('updateIsLoading', false)
|
|
})
|
|
onMounted(async () => {
|
|
console.log(vueFormRef.value)
|
|
|
|
question_length.value = vueFormRef.value.steps$.steps$Array.length
|
|
vueFormRef.value.steps$.on('select', onSelect)
|
|
vueFormRef.value.steps$.on('finish', onFinish)
|
|
})
|
|
const onSelect = async (currentStep) => {
|
|
console.log('Form >>', vueFormRef.value.form$)
|
|
let disqualify = vueFormRef.value.form$.$el.getAttribute('disqualify')
|
|
if (disqualify) {
|
|
vueFormRef.value.form$.$el.removeAttribute('disqualify')
|
|
vueFormRef.value.form$.$el.setAttribute('disqualified', true)
|
|
store.dispatch('updateIsDisqualified', true)
|
|
await nextTick()
|
|
vueFormRef.value.form$.steps$.goTo('disqualification')
|
|
}
|
|
|
|
console.log('disqualify', disqualify, vueFormRef.value.form$.steps$)
|
|
currentTab.value = currentStep.index
|
|
percentage.value = calculatePercentage(currentTab.value, question_length.value);
|
|
console.log('current ', currentStep.index, vueFormRef.value.steps$.steps$Array.length, percentage.value, vueFormRef.value, currentStep)
|
|
|
|
}
|
|
const onFinish = async () => {
|
|
console.log('Finish questions ')
|
|
percentage.value = 100
|
|
store.dispatch('updateIsLoading', true)
|
|
console.log(vueFormRef.value.form$.data)
|
|
if (isPatient.value) {
|
|
await store.dispatch('saveQuestionAnswers', {
|
|
category: props.questionCategory,
|
|
answers: vueFormRef.value.form$.data
|
|
})
|
|
if (props.redirectTo) {
|
|
router.replace(route.query.to && route.query.to != '/questionere' ? String(route.query.to) : props.redirectTo)
|
|
} else {
|
|
router.replace(route.query.to && route.query.to != '/questionere' ? String(route.query.to) : '/category')
|
|
}
|
|
}
|
|
|
|
store.dispatch('updateIsLoading', false)
|
|
}
|
|
const calculatePercentage = (part, whole) => {
|
|
return (part / whole) * 100;
|
|
}
|
|
const backTab = () => {
|
|
if (isAgent.value) {
|
|
router.replace(route.query.to && route.query.to != '/provider/questionere' ? String(route.query.to) : '/provider/question-categories')
|
|
} else {
|
|
if (props.redirectBack)
|
|
router.replace(route.query.to && route.query.to != '/questionere' ? String(route.query.to) : props.redirectBack)
|
|
else
|
|
router.replace(route.query.to && route.query.to != '/questionere' ? String(route.query.to) : '/category')
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<template>
|
|
<VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
|
|
|
|
<VCardText class="" style="color: white !important;">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
|
|
</VDialog>
|
|
<!-- <VCard> -->
|
|
<!-- <VCardItem> -->
|
|
<p class="mb-4" v-if="!props.newForm">
|
|
<a class="mb-4 text-primary" @click="backTab" style="cursor: pointer;"><v-icon class="mb-0" color="primary"
|
|
icon="mdi-arrow-left" size="20"></v-icon> Back</a>
|
|
</p>
|
|
<div class="d-flex align-items-center mb-4">
|
|
<VProgressLinear v-model="percentage" height="3" width="100" color="success" :rounded="true" />
|
|
</div>
|
|
<div class="pt-2 pb-3 text-end" v-if="!props.newForm">{{ currentTab + 1 }}/{{ question_length }}</div>
|
|
|
|
<Vueform v-model="modelData" :sync="true" ref="vueFormRef" :steps="props.steps" :schema="props.schema">
|
|
</Vueform>
|
|
<!-- </VCardItem> -->
|
|
<!-- </VCard> -->
|
|
|
|
</template>
|
|
<style lang="scss">
|
|
@import "./../node_modules/bootstrap/scss/bootstrap";
|
|
@import "./../node_modules/@vueform/vueform/themes/bootstrap/scss/index.scss";
|
|
|
|
.bg-success {
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
}
|
|
|
|
.vf-steps-container {
|
|
display: none;
|
|
}
|
|
|
|
.vf-steps-controls {
|
|
flex-direction: column-reverse;
|
|
gap: 10px;
|
|
}
|
|
|
|
.vf-steps-controls {
|
|
padding: 5px;
|
|
}
|
|
|
|
.vf-btn.vf-btn-primary {
|
|
background-color: rgb(var(--v-theme-yellow-theme-button));
|
|
}
|
|
|
|
/* Your component styles here */
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.vf-static-tag-h4 h4,
|
|
.vf-static-tag-h4 .h4 {
|
|
font-family: Roboto, sans-serif !important;
|
|
line-height: 2rem !important;
|
|
text-transform: none !important;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 500;
|
|
line-height: 2rem;
|
|
letter-spacing: normal !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
span.vf-radio-text {
|
|
font-size: 1rem;
|
|
letter-spacing: .009375em;
|
|
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
|
|
}
|
|
</style>
|
|
<style>
|
|
*,
|
|
*:before,
|
|
*:after,
|
|
:root {
|
|
--bs-heading-color: #32475c;
|
|
--vf-primary: rgb(var(--v-theme-yellow));
|
|
--vf-primary-darker: #012740;
|
|
--vf-color-on-primary: #ffffff;
|
|
--vf-danger: #ef4444;
|
|
--vf-danger-lighter: #fee2e2;
|
|
--vf-success: rgb(var(--v-theme-yellow));
|
|
--vf-success-lighter: #d1fae5;
|
|
--vf-gray-50: #f9fafb;
|
|
--vf-gray-100: #f3f4f6;
|
|
--vf-gray-200: #e5e7eb;
|
|
--vf-gray-300: #d1d5db;
|
|
--vf-gray-400: #9ca3af;
|
|
--vf-gray-500: #6b7280;
|
|
--vf-gray-600: #4b5563;
|
|
--vf-gray-700: #374151;
|
|
--vf-gray-800: #1f2937;
|
|
--vf-gray-900: #111827;
|
|
--vf-dark-50: #EFEFEF;
|
|
--vf-dark-100: #DCDCDC;
|
|
--vf-dark-200: #BDBDBD;
|
|
--vf-dark-300: #A0A0A0;
|
|
--vf-dark-400: #848484;
|
|
--vf-dark-500: #737373;
|
|
--vf-dark-600: #393939;
|
|
--vf-dark-700: #323232;
|
|
--vf-dark-800: #262626;
|
|
--vf-dark-900: #191919;
|
|
--vf-ring-width: 2px;
|
|
--vf-ring-color: #07bf9b66;
|
|
--vf-link-color: var(--vf-primary);
|
|
--vf-link-decoration: inherit;
|
|
--vf-font-size: 1rem;
|
|
--vf-font-size-sm: 0.875rem;
|
|
--vf-font-size-lg: 1rem;
|
|
--vf-font-size-small: 0.875rem;
|
|
--vf-font-size-small-sm: 0.8125rem;
|
|
--vf-font-size-small-lg: 0.875rem;
|
|
--vf-font-size-h1: 2.125rem;
|
|
--vf-font-size-h1-sm: 2.125rem;
|
|
--vf-font-size-h1-lg: 2.125rem;
|
|
--vf-font-size-h2: 1.875rem;
|
|
--vf-font-size-h2-sm: 1.875rem;
|
|
--vf-font-size-h2-lg: 1.875rem;
|
|
--vf-font-size-h3: 1.5rem;
|
|
--vf-font-size-h3-sm: 1.5rem;
|
|
--vf-font-size-h3-lg: 1.5rem;
|
|
--vf-font-size-h4: 1.25rem;
|
|
--vf-font-size-h4-sm: 1.25rem;
|
|
--vf-font-size-h4-lg: 1.25rem;
|
|
--vf-font-size-h1-mobile: 1.5rem;
|
|
--vf-font-size-h1-mobile-sm: 1.5rem;
|
|
--vf-font-size-h1-mobile-lg: 1.5rem;
|
|
--vf-font-size-h2-mobile: 1.25rem;
|
|
--vf-font-size-h2-mobile-sm: 1.25rem;
|
|
--vf-font-size-h2-mobile-lg: 1.25rem;
|
|
--vf-font-size-h3-mobile: 1.125rem;
|
|
--vf-font-size-h3-mobile-sm: 1.125rem;
|
|
--vf-font-size-h3-mobile-lg: 1.125rem;
|
|
--vf-font-size-h4-mobile: 1rem;
|
|
--vf-font-size-h4-mobile-sm: 1rem;
|
|
--vf-font-size-h4-mobile-lg: 1rem;
|
|
--vf-font-size-blockquote: 1rem;
|
|
--vf-font-size-blockquote-sm: 0.875rem;
|
|
--vf-font-size-blockquote-lg: 1rem;
|
|
--vf-line-height: 1.5rem;
|
|
--vf-line-height-sm: 1.25rem;
|
|
--vf-line-height-lg: 1.5rem;
|
|
--vf-line-height-small: 1.25rem;
|
|
--vf-line-height-small-sm: 1.125rem;
|
|
--vf-line-height-small-lg: 1.25rem;
|
|
--vf-line-height-headings: 1.2;
|
|
--vf-line-height-headings-sm: 1.2;
|
|
--vf-line-height-headings-lg: 1.2;
|
|
--vf-line-height-blockquote: 1.5rem;
|
|
--vf-line-height-blockquote-sm: 1.25rem;
|
|
--vf-line-height-blockquote-lg: 1.5rem;
|
|
--vf-letter-spacing: 0px;
|
|
--vf-letter-spacing-sm: 0px;
|
|
--vf-letter-spacing-lg: 0px;
|
|
--vf-letter-spacing-small: 0px;
|
|
--vf-letter-spacing-small-sm: 0px;
|
|
--vf-letter-spacing-small-lg: 0px;
|
|
--vf-letter-spacing-headings: 0px;
|
|
--vf-letter-spacing-headings-sm: 0px;
|
|
--vf-letter-spacing-headings-lg: 0px;
|
|
--vf-letter-spacing-blockquote: 0px;
|
|
--vf-letter-spacing-blockquote-sm: 0px;
|
|
--vf-letter-spacing-blockquote-lg: 0px;
|
|
--vf-gutter: 1rem;
|
|
--vf-gutter-sm: 0.5rem;
|
|
--vf-gutter-lg: 1rem;
|
|
--vf-min-height-input: 2.375rem;
|
|
--vf-min-height-input-sm: 2.125rem;
|
|
--vf-min-height-input-lg: 2.875rem;
|
|
--vf-py-input: 0.375rem;
|
|
--vf-py-input-sm: 0.375rem;
|
|
--vf-py-input-lg: 0.625rem;
|
|
--vf-px-input: 0.75rem;
|
|
--vf-px-input-sm: 0.5rem;
|
|
--vf-px-input-lg: 0.875rem;
|
|
--vf-py-btn: 0.375rem;
|
|
--vf-py-btn-sm: 0.375rem;
|
|
--vf-py-btn-lg: 0.625rem;
|
|
--vf-px-btn: 0.875rem;
|
|
--vf-px-btn-sm: 0.75rem;
|
|
--vf-px-btn-lg: 1.25rem;
|
|
--vf-py-btn-small: 0.25rem;
|
|
--vf-py-btn-small-sm: 0.25rem;
|
|
--vf-py-btn-small-lg: 0.375rem;
|
|
--vf-px-btn-small: 0.625rem;
|
|
--vf-px-btn-small-sm: 0.625rem;
|
|
--vf-px-btn-small-lg: 0.75rem;
|
|
--vf-py-group-tabs: 0.375rem;
|
|
--vf-py-group-tabs-sm: 0.375rem;
|
|
--vf-py-group-tabs-lg: 0.625rem;
|
|
--vf-px-group-tabs: 0.75rem;
|
|
--vf-px-group-tabs-sm: 0.5rem;
|
|
--vf-px-group-tabs-lg: 0.875rem;
|
|
--vf-py-group-blocks: 0.75rem;
|
|
--vf-py-group-blocks-sm: 0.625rem;
|
|
--vf-py-group-blocks-lg: 0.875rem;
|
|
--vf-px-group-blocks: 1rem;
|
|
--vf-px-group-blocks-sm: 1rem;
|
|
--vf-px-group-blocks-lg: 1rem;
|
|
--vf-py-tag: 0px;
|
|
--vf-py-tag-sm: 0px;
|
|
--vf-py-tag-lg: 0px;
|
|
--vf-px-tag: 0.4375rem;
|
|
--vf-px-tag-sm: 0.4375rem;
|
|
--vf-px-tag-lg: 0.4375rem;
|
|
--vf-py-slider-tooltip: 0.125rem;
|
|
--vf-py-slider-tooltip-sm: 0.0625rem;
|
|
--vf-py-slider-tooltip-lg: 0.1875rem;
|
|
--vf-px-slider-tooltip: 0.375rem;
|
|
--vf-px-slider-tooltip-sm: 0.3125rem;
|
|
--vf-px-slider-tooltip-lg: 0.5rem;
|
|
--vf-py-blockquote: 0.25rem;
|
|
--vf-py-blockquote-sm: 0.25rem;
|
|
--vf-py-blockquote-lg: 0.25rem;
|
|
--vf-px-blockquote: 0.75rem;
|
|
--vf-px-blockquote-sm: 0.75rem;
|
|
--vf-px-blockquote-lg: 0.75rem;
|
|
--vf-py-hr: 0.25rem;
|
|
--vf-space-addon: 0px;
|
|
--vf-space-addon-sm: 0px;
|
|
--vf-space-addon-lg: 0px;
|
|
--vf-space-checkbox: 0.375rem;
|
|
--vf-space-checkbox-sm: 0.375rem;
|
|
--vf-space-checkbox-lg: 0.375rem;
|
|
--vf-space-tags: 0.1875rem;
|
|
--vf-space-tags-sm: 0.1875rem;
|
|
--vf-space-tags-lg: 0.1875rem;
|
|
--vf-space-static-tag-1: 1rem;
|
|
--vf-space-static-tag-2: 2rem;
|
|
--vf-space-static-tag-3: 3rem;
|
|
--vf-floating-top: 0rem;
|
|
--vf-floating-top-sm: 0rem;
|
|
--vf-floating-top-lg: 0.6875rem;
|
|
--vf-bg-input: #ffffff;
|
|
--vf-bg-input-hover: #ffffff;
|
|
--vf-bg-input-focus: #ffffff;
|
|
--vf-bg-input-danger: #ffffff;
|
|
--vf-bg-input-success: #ffffff;
|
|
--vf-bg-checkbox: #ffffff;
|
|
--vf-bg-checkbox-hover: #ffffff;
|
|
--vf-bg-checkbox-focus: #ffffff;
|
|
--vf-bg-checkbox-danger: #ffffff;
|
|
--vf-bg-checkbox-success: #ffffff;
|
|
--vf-bg-disabled: var(--vf-gray-200);
|
|
--vf-bg-selected: #1118270d;
|
|
--vf-bg-passive: var(--vf-gray-300);
|
|
--vf-bg-icon: var(--vf-gray-500);
|
|
--vf-bg-danger: var(--vf-danger-lighter);
|
|
--vf-bg-success: var(--vf-success-lighter);
|
|
--vf-bg-tag: var(--vf-primary);
|
|
--vf-bg-slider-handle: var(--vf-primary);
|
|
--vf-bg-toggle-handle: #ffffff;
|
|
--vf-bg-date-head: var(--vf-gray-100);
|
|
--vf-bg-addon: #ffffff00;
|
|
--vf-bg-btn: var(--vf-primary);
|
|
--vf-bg-btn-danger: var(--vf-danger);
|
|
--vf-bg-btn-secondary: var(--vf-gray-200);
|
|
--vf-color-input: var(--vf-gray-800);
|
|
--vf-color-input-hover: var(--vf-gray-800);
|
|
--vf-color-input-focus: var(--vf-gray-800);
|
|
--vf-color-input-danger: var(--vf-gray-800);
|
|
--vf-color-input-success: var(--vf-gray-800);
|
|
--vf-color-disabled: var(--vf-gray-400);
|
|
--vf-color-placeholder: var(--vf-gray-300);
|
|
--vf-color-passive: var(--vf-gray-700);
|
|
--vf-color-muted: var(--vf-gray-500);
|
|
--vf-color-floating: var(--vf-gray-500);
|
|
--vf-color-floating-focus: var(--vf-gray-500);
|
|
--vf-color-floating-success: var(--vf-gray-500);
|
|
--vf-color-floating-danger: var(--vf-gray-500);
|
|
--vf-color-danger: var(--vf-danger);
|
|
--vf-color-success: var(--vf-success);
|
|
--vf-color-tag: var(--vf-color-on-primary);
|
|
--vf-color-addon: var(--vf-gray-800);
|
|
--vf-color-date-head: var(--vf-gray-700);
|
|
--vf-color-btn: var(--vf-color-on-primary);
|
|
--vf-color-btn-danger: #ffffff;
|
|
--vf-color-btn-secondary: var(--vf-gray-700);
|
|
--vf-border-color-input: var(--vf-gray-300);
|
|
--vf-border-color-input-hover: var(--vf-gray-300);
|
|
--vf-border-color-input-focus: var(--vf-primary);
|
|
--vf-border-color-input-danger: var(--vf-gray-300);
|
|
--vf-border-color-input-success: var(--vf-gray-300);
|
|
--vf-border-color-checkbox: var(--vf-gray-300);
|
|
--vf-border-color-checkbox-focus: var(--vf-primary);
|
|
--vf-border-color-checkbox-hover: var(--vf-gray-300);
|
|
--vf-border-color-checkbox-danger: var(--vf-gray-300);
|
|
--vf-border-color-checkbox-success: var(--vf-gray-300);
|
|
--vf-border-color-checked: var(--vf-primary);
|
|
--vf-border-color-passive: var(--vf-gray-300);
|
|
--vf-border-color-slider-tooltip: var(--vf-primary);
|
|
--vf-border-color-tag: var(--vf-primary);
|
|
--vf-border-color-btn: var(--vf-primary);
|
|
--vf-border-color-btn-danger: var(--vf-danger);
|
|
--vf-border-color-btn-secondary: var(--vf-gray-200);
|
|
--vf-border-color-blockquote: var(--vf-gray-300);
|
|
--vf-border-color-hr: var(--vf-gray-300);
|
|
--vf-border-width-input-t: 1px;
|
|
--vf-border-width-input-r: 1px;
|
|
--vf-border-width-input-b: 1px;
|
|
--vf-border-width-input-l: 1px;
|
|
--vf-border-width-radio-t: 1px;
|
|
--vf-border-width-radio-r: 1px;
|
|
--vf-border-width-radio-b: 1px;
|
|
--vf-border-width-radio-l: 1px;
|
|
--vf-border-width-checkbox-t: 1px;
|
|
--vf-border-width-checkbox-r: 1px;
|
|
--vf-border-width-checkbox-b: 1px;
|
|
--vf-border-width-checkbox-l: 1px;
|
|
--vf-border-width-dropdown: 1px;
|
|
--vf-border-width-btn: 1px;
|
|
--vf-border-width-toggle: 0.125rem;
|
|
--vf-border-width-tag: 1px;
|
|
--vf-border-width-blockquote: 3px;
|
|
--vf-shadow-input: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-input-hover: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-input-focus: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-handles: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-handles-hover: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-handles-focus: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-btn: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-shadow-dropdown: 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
--vf-radius-input: 0.25rem;
|
|
--vf-radius-input-sm: 0.25rem;
|
|
--vf-radius-input-lg: 0.25rem;
|
|
--vf-radius-btn: 0.25rem;
|
|
--vf-radius-btn-sm: 0.25rem;
|
|
--vf-radius-btn-lg: 0.25rem;
|
|
--vf-radius-small: 0.25rem;
|
|
--vf-radius-small-sm: 0.25rem;
|
|
--vf-radius-small-lg: 0.25rem;
|
|
--vf-radius-large: 0.25rem;
|
|
--vf-radius-large-sm: 0.25rem;
|
|
--vf-radius-large-lg: 0.25rem;
|
|
--vf-radius-tag: 0.25rem;
|
|
--vf-radius-tag-sm: 0.25rem;
|
|
--vf-radius-tag-lg: 0.25rem;
|
|
--vf-radius-checkbox: 0.25rem;
|
|
--vf-radius-checkbox-sm: 0.25rem;
|
|
--vf-radius-checkbox-lg: 0.25rem;
|
|
--vf-radius-slider: 0.25rem;
|
|
--vf-radius-slider-sm: 0.25rem;
|
|
--vf-radius-slider-lg: 0.25rem;
|
|
--vf-radius-image: 0.25rem;
|
|
--vf-radius-image-sm: 0.25rem;
|
|
--vf-radius-image-lg: 0.25rem;
|
|
--vf-radius-gallery: 0.25rem;
|
|
--vf-radius-gallery-sm: 0.25rem;
|
|
--vf-radius-gallery-lg: 0.25rem;
|
|
--vf-checkbox-size: 1rem;
|
|
--vf-checkbox-size-sm: 0.875rem;
|
|
--vf-checkbox-size-lg: 1rem;
|
|
--vf-gallery-size: 6rem;
|
|
--vf-gallery-size-sm: 5rem;
|
|
--vf-gallery-size-lg: 7rem;
|
|
--vf-toggle-width: 3rem;
|
|
--vf-toggle-width-sm: 2.75rem;
|
|
--vf-toggle-width-lg: 3rem;
|
|
--vf-toggle-height: 1.25rem;
|
|
--vf-toggle-height-sm: 1rem;
|
|
--vf-toggle-height-lg: 1.25rem;
|
|
--vf-slider-height: 0.375rem;
|
|
--vf-slider-height-sm: 0.3125rem;
|
|
--vf-slider-height-lg: 0.5rem;
|
|
--vf-slider-height-vertical: 20rem;
|
|
--vf-slider-height-vertical-sm: 20rem;
|
|
--vf-slider-height-vertical-lg: 20rem;
|
|
--vf-slider-handle-size: 1rem;
|
|
--vf-slider-handle-size-sm: 0.875rem;
|
|
--vf-slider-handle-size-lg: 1.25rem;
|
|
--vf-slider-tooltip-distance: 0.5rem;
|
|
--vf-slider-tooltip-distance-sm: 0.375rem;
|
|
--vf-slider-tooltip-distance-lg: 0.5rem;
|
|
--vf-slider-tooltip-arrow-size: 0.3125rem;
|
|
--vf-slider-tooltip-arrow-size-sm: 0.3125rem;
|
|
--vf-slider-tooltip-arrow-size-lg: 0.3125rem;
|
|
}
|
|
</style>
|