1078 lines
37 KiB
Vue
1078 lines
37 KiB
Vue
<!-- Cardiology.vue -->
|
|
|
|
<script>
|
|
import { useVueform, Vueform } from '@vueform/vueform';
|
|
import { onMounted, ref } from 'vue';
|
|
// import form from './form.vue'
|
|
export default {
|
|
mixins: [Vueform],
|
|
setup(props, context) {
|
|
const form = useVueform(props, context)
|
|
|
|
const vueform = ref({
|
|
size: 'md',
|
|
displayErrors: false,
|
|
steps: {
|
|
page0: {
|
|
elements: [
|
|
'h3',
|
|
'dizziness_or_fainting',
|
|
],
|
|
},
|
|
page1: {
|
|
elements: [
|
|
'h3_1',
|
|
'falls_that_caused_an_injury',
|
|
],
|
|
},
|
|
page2: {
|
|
elements: [
|
|
'h3_2',
|
|
'stroke',
|
|
],
|
|
},
|
|
page3: {
|
|
elements: [
|
|
'h3_3',
|
|
'shortness_of_breath_when_walking_1_to_2_blocks',
|
|
],
|
|
},
|
|
page4: {
|
|
elements: [
|
|
'h3_4',
|
|
'shortness_of_breath_when_climbing_1_flight_of_stairs',
|
|
],
|
|
},
|
|
page5: {
|
|
elements: [
|
|
'h3_5',
|
|
'shortness_of_breath_when_lying_down',
|
|
],
|
|
},
|
|
page6: {
|
|
elements: [
|
|
'h3_6',
|
|
'lower_leg_cramps_while_walking',
|
|
],
|
|
},
|
|
page7: {
|
|
elements: [
|
|
'h3_7',
|
|
'bleeding_problems_or_low_iron_also _called_anemia',
|
|
],
|
|
},
|
|
page8: {
|
|
elements: [
|
|
'h3_8',
|
|
'blood_clot_in_leg_also_called_phlebitis',
|
|
],
|
|
},
|
|
page9: {
|
|
elements: [
|
|
'h3_9',
|
|
'high_cholesterol',
|
|
],
|
|
},
|
|
page10: {
|
|
elements: [
|
|
'h3_10',
|
|
'diabetes',
|
|
],
|
|
},
|
|
page11: {
|
|
elements: [
|
|
'h3_11',
|
|
'high_blood_pressure',
|
|
],
|
|
},
|
|
page12: {
|
|
elements: [
|
|
'h3_12',
|
|
'heart_murmur_or_abnormal_heart_valve',
|
|
],
|
|
},
|
|
page13: {
|
|
elements: [
|
|
'h3_13',
|
|
'uncomfortable_feeling_in_the_chest',
|
|
],
|
|
},
|
|
page14: {
|
|
elements: [
|
|
'h3_14',
|
|
'chest_pain_with_activity_also_called_angina',
|
|
],
|
|
},
|
|
page15: {
|
|
elements: [
|
|
'h3_15',
|
|
'heart_attack_also_called_myocardial_infarction',
|
|
],
|
|
},
|
|
page16: {
|
|
elements: [
|
|
'h3_16',
|
|
'swollen_legs',
|
|
],
|
|
},
|
|
page17: {
|
|
elements: [
|
|
'h3_17',
|
|
'ankles_or_feet',
|
|
],
|
|
},
|
|
page18: {
|
|
elements: [
|
|
'h3_18',
|
|
'Irregular_heartbeat',
|
|
],
|
|
},
|
|
page19: {
|
|
elements: [
|
|
'h3_19',
|
|
'stress_test_or_treadmill_test',
|
|
],
|
|
},
|
|
page20: {
|
|
elements: [
|
|
'h3_20',
|
|
'cardiac_catheterization_or_angiogram',
|
|
],
|
|
},
|
|
page21: {
|
|
elements: [
|
|
'h3_21',
|
|
'angioplasty_or_stent',
|
|
],
|
|
},
|
|
page22: {
|
|
elements: [
|
|
'h3_22',
|
|
'heart_surgery_If_so_what_kind',
|
|
'hurt_surgery_kind_please_explain',
|
|
],
|
|
},
|
|
page23: {
|
|
elements: [
|
|
'h3_23',
|
|
'special_meal_plan_or_diet',
|
|
'which_special_meal_plan_or_diet',
|
|
],
|
|
},
|
|
page24: {
|
|
elements: [
|
|
'h3_24',
|
|
'do_you_exercise_regularly',
|
|
'exercisy_regularly_how many_days_a_week',
|
|
],
|
|
},
|
|
},
|
|
schema: {
|
|
h3: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Dizziness or fainting',
|
|
},
|
|
dizziness_or_fainting: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_1: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Falls that caused an injury',
|
|
},
|
|
falls_that_caused_an_injury: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_2: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Stroke',
|
|
},
|
|
stroke: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_3: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Shortness of breath when walking 1 to 2 blocks',
|
|
},
|
|
shortness_of_breath_when_walking_1_to_2_blocks: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_4: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Shortness of breath when climbing 1 flight of stairs',
|
|
},
|
|
shortness_of_breath_when_climbing_1_flight_of_stairs: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_5: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Shortness of breath when lying down',
|
|
},
|
|
shortness_of_breath_when_lying_down: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_6: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Lower leg cramps while walking',
|
|
},
|
|
lower_leg_cramps_while_walking: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_7: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Bleeding problems or low iron (also called anemia)',
|
|
},
|
|
'bleeding_problems_or_low_iron_also _called_anemia': {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_8: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Blood clot in leg (also called phlebitis)',
|
|
},
|
|
blood_clot_in_leg_also_called_phlebitis: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_9: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'High cholesterol',
|
|
},
|
|
high_cholesterol: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_10: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Diabetes',
|
|
},
|
|
diabetes: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_11: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'High blood pressure',
|
|
},
|
|
high_blood_pressure: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_12: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Heart murmur or abnormal heart valve',
|
|
},
|
|
heart_murmur_or_abnormal_heart_valve: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_13: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Uncomfortable feeling in the chest',
|
|
},
|
|
uncomfortable_feeling_in_the_chest: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_14: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Chest pain with activity (also called angina)',
|
|
},
|
|
chest_pain_with_activity_also_called_angina: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_15: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Heart attack (also called myocardial infarction)',
|
|
},
|
|
heart_attack_also_called_myocardial_infarction: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_16: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Swollen legs',
|
|
},
|
|
swollen_legs: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_17: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'ankles or feet',
|
|
},
|
|
ankles_or_feet: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_18: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Irregular heartbeat',
|
|
},
|
|
Irregular_heartbeat: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'Within last 30 days',
|
|
label: 'Within last 30 days',
|
|
},
|
|
{
|
|
value: 'In the past',
|
|
label: 'In the past',
|
|
},
|
|
],
|
|
},
|
|
h3_19: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Have you had any of the following tests or procedures?',
|
|
},
|
|
stress_test_or_treadmill_test: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'yes',
|
|
label: 'Yes',
|
|
},
|
|
{
|
|
value: 'no',
|
|
label: 'No',
|
|
},
|
|
],
|
|
label: 'Stress test or treadmill test:',
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_20: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Have you had any of the following tests or procedures',
|
|
},
|
|
cardiac_catheterization_or_angiogram: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'yes',
|
|
label: 'Yes',
|
|
},
|
|
{
|
|
value: 'no',
|
|
label: 'No',
|
|
},
|
|
],
|
|
label: 'Cardiac catheterization or angiogram:',
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_21: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Have you had any of the following tests or procedures?',
|
|
},
|
|
angioplasty_or_stent: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'yes',
|
|
label: 'Yes',
|
|
},
|
|
{
|
|
value: 'no',
|
|
label: 'No',
|
|
},
|
|
],
|
|
label: 'Angioplasty or stent',
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
h3_22: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Have you had any of the following tests or procedures?',
|
|
},
|
|
heart_surgery_If_so_what_kind: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'yes',
|
|
label: 'Yes',
|
|
},
|
|
{
|
|
value: 'no',
|
|
label: 'No',
|
|
},
|
|
],
|
|
label: 'Heart surgery If so, what kind?',
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
hurt_surgery_kind_please_explain: {
|
|
type: 'textarea',
|
|
label: 'Please explain',
|
|
conditions: [
|
|
[
|
|
'heart_surgery_If_so_what_kind',
|
|
'in',
|
|
[
|
|
'yes',
|
|
],
|
|
],
|
|
],
|
|
},
|
|
h3_23: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Do you follow a special meal plan or diet (such as Atkins®, Weight Watchers®, vegetarian, low fat, or diabetic)?',
|
|
},
|
|
special_meal_plan_or_diet: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'yes',
|
|
label: 'Yes',
|
|
},
|
|
{
|
|
value: 'no',
|
|
label: 'No',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
which_special_meal_plan_or_diet: {
|
|
type: 'text',
|
|
label: 'Which meal plan or diet you follow?',
|
|
conditions: [
|
|
[
|
|
'special_meal_plan_or_diet',
|
|
'in',
|
|
[
|
|
'yes',
|
|
],
|
|
],
|
|
],
|
|
},
|
|
h3_24: {
|
|
type: 'static',
|
|
tag: 'h3',
|
|
content: 'Do you exercise regularly?',
|
|
},
|
|
do_you_exercise_regularly: {
|
|
type: 'radiogroup',
|
|
items: [
|
|
{
|
|
value: 'yes',
|
|
label: 'Yes',
|
|
},
|
|
{
|
|
value: 'no',
|
|
label: 'No',
|
|
},
|
|
],
|
|
rules: [
|
|
'required',
|
|
],
|
|
},
|
|
'exercisy_regularly_how many_days_a_week': {
|
|
type: 'text',
|
|
label: 'How many days a week?',
|
|
conditions: [
|
|
[
|
|
'do_you_exercise_regularly',
|
|
'in',
|
|
[
|
|
'yes',
|
|
],
|
|
],
|
|
],
|
|
},
|
|
},
|
|
})
|
|
const onSelect = (currentStep) => {
|
|
// console.log(context.emit('current-index'))
|
|
console.log('current ', currentStep.index, form.steps$.value)
|
|
|
|
}
|
|
const onFinish = () => {
|
|
alert('Form submitted successfully!');
|
|
}
|
|
onMounted(async () => {
|
|
form.steps$.value.on('select', onSelect)
|
|
form.steps$.value.on('finish', onFinish)
|
|
// form.steps$.value.on('current', onCurrent)
|
|
console.log(form)
|
|
})
|
|
|
|
return {
|
|
...form,
|
|
vueform,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./../node_modules/bootstrap/scss/bootstrap";
|
|
@import "./../node_modules/@vueform/vueform/themes/bootstrap/scss/index.scss";
|
|
|
|
/* Your component styles here */
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
*,
|
|
*:before,
|
|
*:after,
|
|
:root {
|
|
--vf-primary: #07bf9b;
|
|
--vf-primary-darker: #06ac8b;
|
|
--vf-color-on-primary: #ffffff;
|
|
--vf-danger: #ef4444;
|
|
--vf-danger-lighter: #fee2e2;
|
|
--vf-success: #10b981;
|
|
--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>
|