673 lines
25 KiB
Vue
673 lines
25 KiB
Vue
<script setup>
|
|
import axios from '@axios';
|
|
import previousButton from '@images/svg/previous.svg';
|
|
import { onMounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import phpUnserialize from 'phpunserialize';
|
|
import { useStore } from 'vuex';
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px
|
|
|
|
const currentDialoagkey = ref('')
|
|
const isTonalSnackbarVisible = ref(false)
|
|
const patientResponse = ref(false)
|
|
const isLoadingVisible = ref(false)
|
|
const questionForm = ref()
|
|
const answers = ref([]);
|
|
const medical_question = ref([]);
|
|
const question_length = ref([]);
|
|
const isDialogVisible = ref(false)
|
|
const selectedQuestion = ref([]);
|
|
|
|
const previousQid = ref(null)
|
|
onBeforeMount(async () => {
|
|
|
|
await store.dispatch('getMedicalHistoryQuestion')
|
|
// medical_question.value.push({ answers: [] });
|
|
medical_question.value = store.getters.getMedicalCategoryQuestion.data;
|
|
|
|
question_length.value = medical_question.value.length;
|
|
|
|
console.log("medical_question", medical_question.value);
|
|
});
|
|
|
|
|
|
const questions = ref([
|
|
{
|
|
question_key: 'why_interested_hrt',
|
|
question: "What aspects of hormone replacement therapy (HRT) intrigue you?",
|
|
type: "text",
|
|
},
|
|
{
|
|
question_key: 'goal_loss_weight',
|
|
question: "Is your objective with the program to achieve weight loss?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'what_biological_sex',
|
|
question: "What is your assigned sex at birth?",
|
|
type: "radio",
|
|
options: ["Male", "Female"],
|
|
},
|
|
{
|
|
question_key: '3_years_physical_test',
|
|
question: "Have you undergone a comprehensive physical examination by a medical professional within the past three years, which included assessments of vital signs such as weight, blood pressure, and heart rate?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'medical_problems',
|
|
question: "Did you experience any medical issues? If so, could you please elaborate?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'have_prostate_cancer',
|
|
question: "Have you ever received a diagnosis of prostate cancer?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
// {
|
|
// question_key: 'what_height',
|
|
// question: "How tall are you?",
|
|
// type: "dropdown",
|
|
// options: ["5 ft 1 in",
|
|
// "5 ft 2 in",
|
|
// "5 ft 3 in",
|
|
// "5 ft 4 in",
|
|
// "5 ft 5 in",
|
|
// "5 ft 6 in",
|
|
// "5 ft 7 in",
|
|
// "5 ft 8 in",
|
|
// ],
|
|
// },
|
|
// {
|
|
// question_key: 'whight',
|
|
// question: "What is your weight?",
|
|
// type: "text",
|
|
// },
|
|
// {
|
|
// question_key: 'birthdate',
|
|
// question: "When were you born?",
|
|
// type: "date",
|
|
// sub_title: 'To proceed with medication, kindly input your accurate date of birth using the format mm/dd/yyyy.'
|
|
// },
|
|
{
|
|
question_key: 'past_harmone_treatments',
|
|
question: "Have you been prescribed any hormone treatments currently or in the past?",
|
|
type: "radio",
|
|
options: ["Thyroid Medication", "Testosterone Treatment", "Estrogen Blocker", "HGH", "Ipamoreline", "Colomipheine", "HCG", "Other", "None"],
|
|
},
|
|
{
|
|
question_key: 'take_medications',
|
|
question: "Are you currently using or have you used any over-the-counter or prescription medications, excluding hormone treatments? (Please note that your responses will be cross-checked against prescription and insurance records. Failure to disclose current prescriptions and/or medical conditions may result in disapproval for your safety.)",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'have_medications_allegies',
|
|
question: "Do you have any allergies to medications?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'plan_children',
|
|
question: "Do you intend to have children at some point in the future?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'partner_pregnant',
|
|
question: "Is your partner currently pregnant or breastfeeding?",
|
|
type: "radio",
|
|
options: ["Yes", "No", "Not Applicable"],
|
|
},
|
|
{
|
|
question_key: 'experience_ed',
|
|
question: "Are you currently experiencing any erectile dysfunction (ED) issues?",
|
|
type: "radio",
|
|
options: ["Never", "Almost Never", "Occasionally", "Almost Always", "Always"],
|
|
},
|
|
{
|
|
question_key: 'thyroid_disorders',
|
|
question: "Have you ever been diagnosed with thyroid disorders such as hypothyroidism (underactive thyroid), hyperthyroidism (overactive thyroid), Hashimoto's Disease, or Graves' Disease?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'family_history',
|
|
question: "Does your family have a history of any of the following disorders?",
|
|
type: "radio",
|
|
options: ["Drug Alcohol", "Cancer", "Heart Disease", "Thyroid Disease", "Low Testosterone",
|
|
"None"],
|
|
},
|
|
{
|
|
question_key: 'patient_concent',
|
|
question: "Please read and accept",
|
|
linktext: "Patient Content",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'appointment_cancel',
|
|
question: "Please read and accept",
|
|
linktext: "Appointment Cancel",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'medicare_disclaimer',
|
|
question: "Please read and accept",
|
|
linktext: "Medicare Disclaimer",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'telehealth_concent',
|
|
question: "Please read and accept",
|
|
linktext: "Telehealth Concent",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'secondary_contact',
|
|
question: "Please read and accept",
|
|
linktext: "Secondary Contact Disclosure(optional)",
|
|
type: "signalCheckbox",
|
|
},
|
|
|
|
]);
|
|
|
|
const validateQuestion = async () => {
|
|
const { valid: isValid } = await questionForm.value?.validate();
|
|
console.log('isValid ', isValid);
|
|
if (isValid)
|
|
saveAnswers()
|
|
};
|
|
|
|
onMounted(async () => {
|
|
window.addEventListener('resize', checkIfMobile);
|
|
await getPatientInfo()
|
|
})
|
|
// Detach event listener on component unmount
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', checkIfMobile);
|
|
});
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
const getPatientInfo = async () => {
|
|
const patient_id = localStorage.getItem('patient_id')
|
|
const access_token = localStorage.getItem('access_token');
|
|
console.log()
|
|
isLoadingVisible.value = true;
|
|
await axios.post('/api/get-patient-detail/' + patient_id, {
|
|
headers: {
|
|
'Authorization': `Bearer ${access_token}`,
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log('Response:', response.data);
|
|
if (response.data) {
|
|
let patientData = response.data.patient
|
|
isLoadingVisible.value = false;
|
|
} else {
|
|
isLoadingVisible.value = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
const saveAnswers = () => {
|
|
isLoadingVisible.value = true;
|
|
const patient_id = localStorage.getItem('patient_id');
|
|
const jsonData = {
|
|
questions: questions.value.reduce((accumulator, question, index) => {
|
|
const answerValue = answers.value[question.question_key];
|
|
|
|
if (answerValue !== undefined) {
|
|
accumulator.push({
|
|
question_key: question.question_key,
|
|
type: question.type,
|
|
answer: answerValue,
|
|
});
|
|
}
|
|
|
|
return accumulator;
|
|
}, []),
|
|
};
|
|
let qaData = Array({ 'answers': jsonData.questions });
|
|
console.log('answers ', JSON.stringify(qaData));
|
|
// You can send the jsonData to your server or use it as needed
|
|
axios.post('/api/medical-history-question-post/' + patient_id,
|
|
{
|
|
answers: jsonData.questions
|
|
}
|
|
)
|
|
.then(response => {
|
|
console.log('answer api', response.data)
|
|
// console.log(chooseDate);
|
|
isLoadingVisible.value = false;
|
|
router.replace(route.query.to && route.query.to != '/additional-information' ? String(route.query.to) : '/shipping-information')
|
|
})
|
|
.catch(error => {
|
|
isLoadingVisible.value = false;
|
|
// console.error(error);
|
|
});
|
|
};
|
|
const getCurrentDate = () => {
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
let month = today.getMonth() + 1;
|
|
let day = today.getDate();
|
|
|
|
// Format the date to match the input type="date" format
|
|
month = month < 10 ? `0${month}` : month;
|
|
day = day < 10 ? `0${day}` : day;
|
|
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
const openDialog = (question_key) => {
|
|
currentDialoagkey.value = question_key;
|
|
isDialogVisible.value = true;
|
|
window.addEventListener('click', closeDialogOnOutsideClick);
|
|
};
|
|
const closeDialogOnOutsideClick = (event) => {
|
|
const dialogElement = refs.myDialog.$el;
|
|
if (!dialogElement.contains(event.target)) {
|
|
isDialogVisible.value = false;
|
|
window.removeEventListener('click', closeDialogOnOutsideClick);
|
|
}
|
|
};
|
|
const handleContinueClick = (currentDialoagkey) => {
|
|
isDialogVisible.value = false; // Hide the dialog
|
|
answers.value[currentDialoagkey] = true; // Update the answers object
|
|
};
|
|
|
|
const breadcrums = [
|
|
{
|
|
title: 'Category',
|
|
disabled: false,
|
|
to: '/category',
|
|
},
|
|
{
|
|
title: localStorage.getItem('category_name'),
|
|
disabled: false,
|
|
},
|
|
];
|
|
const radioContent = [
|
|
{
|
|
title: 'Basic',
|
|
subtitle: 'Free',
|
|
desc: 'Get 1 project with 1 team member.',
|
|
value: 'basic',
|
|
},
|
|
{
|
|
title: 'Premium',
|
|
subtitle: '$45.80',
|
|
value: 'premium',
|
|
desc: 'Get 5 projects with 5 team members.',
|
|
},
|
|
]
|
|
|
|
const currentTab = ref(0);
|
|
const percentage = ref(0);
|
|
|
|
const tabItemText = 'hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer. Gummies sweet brownie brownie marshmallow chocolate cake pastry. Topping macaroon shortbread liquorice dragée macaroon.'
|
|
const changeTabOnArrowPress = (event) => {
|
|
if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
|
|
currentTab.value = (currentTab.value + 1) % 10;
|
|
} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
|
|
currentTab.value = (currentTab.value - 1 + 10) % 10;
|
|
}
|
|
};
|
|
watchEffect(() => {
|
|
window.addEventListener('keydown', changeTabOnArrowPress);
|
|
|
|
return () => {
|
|
window.removeEventListener('keydown', changeTabOnArrowPress);
|
|
};
|
|
});
|
|
const nextTab = (category_id, id, value) => {
|
|
// await store.dispatch('saveCategoryAnswer')
|
|
previousQid.value = id;
|
|
// console.log("nextTabid", previousQid.value);
|
|
selectedQuestion.value.push({ id: id, value: value });
|
|
// console.log("selectedQuestion", selectedQuestion.value);
|
|
store.dispatch('setSelectedQuestionAnswer', {
|
|
category_answers: selectedQuestion.value,
|
|
})
|
|
currentTab.value = currentTab.value + 1;
|
|
percentage.value = (currentTab.value / question_length.value) * 100;
|
|
// console.log("per", percentage.value);
|
|
}
|
|
const backTab = (id, indx) => {
|
|
let prevIndex = 0;
|
|
console.log("backTabid", previousQid.value, id, indx);
|
|
const data = store.getters.getSelectedQuestionAnswer;
|
|
const entries = Object.entries(data);
|
|
console.log("entries", entries[indx]);
|
|
|
|
for (const [index, [key, value]] of entries.entries()){
|
|
|
|
console.log("ans", index, value, key);
|
|
if(value.id == previousQid.value ){
|
|
|
|
if(index > 0){
|
|
previousQid.value = entries[index - 1][1].id;
|
|
console.log("abc",previousQid.value ,value.id, entries[index - 1][1]);
|
|
}else{
|
|
previousQid.value = entries[0][1].id;
|
|
console.log("abc",previousQid.value ,value.id, entries[0][1]);
|
|
|
|
}
|
|
selectedQuestionIndex.value[value.id] = value.value;
|
|
}
|
|
}
|
|
|
|
if (currentTab.value == 0) {
|
|
|
|
} else {
|
|
currentTab.value = currentTab.value - 1;
|
|
percentage.value = (currentTab.value / question_length.value) * 100;
|
|
}
|
|
|
|
}
|
|
const parseOptions = (optionsString) => {
|
|
try {
|
|
const optionsArray = phpUnserialize(optionsString);
|
|
return optionsArray.map((option, index) => ({ key: index, value: option }));
|
|
} catch (error) {
|
|
console.error('Error parsing options:', error);
|
|
return [];
|
|
}
|
|
};
|
|
const selectedQuestionIndex = ref(new Array(5).fill(false));
|
|
|
|
const subquestion1 = ref([
|
|
{ title: 'Test 1', key: 'Test 1' },
|
|
{ title: 'Test 2', key: 'Test 2' },
|
|
{ title: 'Test 3', key: 'Test 3' }
|
|
]);
|
|
|
|
const checked = ref([]);
|
|
const visibleQuestion = ref(-1); // Initially, no question is visible
|
|
|
|
const toggleSubquestion = (index) => {
|
|
alert(index);
|
|
checked.value[index] = !checked.value[index];
|
|
if (checked.value[index]) {
|
|
// If the checkbox is checked, set the visibleQuestion index to the next question
|
|
visibleQuestion.value = Math.min(index + 1, subquestion1.value.length - 1);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
|
|
<template v-slot:divider style="padding-top:0px; padding-bottom:0px">
|
|
<v-icon icon="mdi-chevron-right" style="padding-top:0px;"></v-icon>
|
|
</template>
|
|
</v-breadcrumbs>
|
|
|
|
<div class="auth-wrapper d-flex align-center justify-center">
|
|
<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>
|
|
|
|
<div class="auth-card pt-0 rounded-5" max-width="400">
|
|
|
|
<div class="d-flex align-items-center">
|
|
<VProgressLinear v-model="percentage" height="10" width="100" color="success" :rounded="true" />
|
|
</div>
|
|
<div class="pt-2 pb-3 text-end">{{ currentTab + 1 }}/{{ question_length }}</div>
|
|
<VCard max-width="400" class="category-card">
|
|
<p style="width: 350px;"></p>
|
|
<VCardText class="pt-0 px-0">
|
|
<VWindow v-model="currentTab" style="max-width:400px">
|
|
<VWindowItem v-for="(item,index) in medical_question" :key="item" :value="item">
|
|
<VImg :src="previousButton" width="25" height="25" @click="backTab(item.id, index)"
|
|
style="cursor: pointer;">
|
|
</VImg>
|
|
<div v-if="item.question_type == 'checkbox'">
|
|
<h4 class="text-center mt-0 mb-2">{{ item.question }}</h4>
|
|
<VCard class="mb-2 selectedCard"
|
|
v-for="( option, optionIndex ) in item.question_options" :key="optionIndex"
|
|
:value="optionIndex" v-model="answers[item.id]">
|
|
|
|
<VRow class="text-center pb-2 px-4 pt-4" :class="selectedQuestionIndex[item.id] === option ? 'selected-category-card' : ''" >
|
|
<VCol col="auto" class="category-card-option">
|
|
<div class="text-center flex-wrap gap-0 pb-2 text-capitalize">
|
|
{{ option }}
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
</VCard>
|
|
<div class="text-center py-2" @click="() => nextTab(item.id, option)">
|
|
<VBtn size="small">Submit</VBtn>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="item.question_type === 'radio'">
|
|
<h4 class="text-center mt-0 mb-2">{{ item.question }}</h4>
|
|
<VCard class="mb-2 selectedCard" @click="() => nextTab(item.id, option)"
|
|
v-for="( option, optionIndex ) in item.question_options" :key="optionIndex"
|
|
:value="optionIndex" v-model="answers[item.id]">
|
|
<VRow class="text-center pb-2 px-4 pt-4" :class="selectedQuestionIndex[item.id] === option ? 'selected-category-card' : ''" >
|
|
<VCol col="auto" class="category-card-option">
|
|
<div class="text-center flex-wrap gap-0 pb-2 text-capitalize">
|
|
{{ option }}
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</div>
|
|
<div v-if="item.question_type == 'text'">
|
|
<h4 class="text-center mt-5 mb-2">{{ item.question }}</h4>
|
|
<VCard class="mb-2">
|
|
<VRow class="text-center pb-0 px-4 pt-4">
|
|
<VCol col="12">
|
|
<div class="text-center flex-wrap gap-0">
|
|
<v-text-field v-model="answers[item.id]"/>
|
|
</div>
|
|
<div class="text-center py-2" @click="nextTab()">
|
|
<VBtn size="small">Submit</VBtn>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</div>
|
|
<div v-if="item.sub_questions" v-for="subquestion in item.sub_questions"
|
|
:key="subquestion">
|
|
<div v-if="subquestion.question && subquestion.sub_question_type == 'checkbox'">
|
|
<h4 class="text-center mt-5 mb-2">{{ subquestion.question }}</h4>
|
|
<VCard class="mb-2 selectedCard" @click="() => nextTab(item.id, opt)"
|
|
v-for="( opt, optionIndex ) in parseOptions(subquestion.sub_question_options)" :key="optionIndex">
|
|
<VRow class=" text-center pb-2 px-4 pt-4 selectedCard">
|
|
<VCol col="auto" class="category-card-option selectedCard">
|
|
<div class="text-center flex-wrap gap-0 pb-2">
|
|
{{ opt.value }}
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</div>
|
|
<div v-if="subquestion.question && subquestion.sub_question_type == 'radio'">
|
|
<h4 class="text-center mt-5 mb-2">{{ subquestion.question }}</h4>
|
|
<VCard class="mb-2 selectedCard" @click="() => nextTab(item.id, opt)"
|
|
v-for="( opt, optionIndex ) in parseOptions(subquestion.sub_question_options)" :key="optionIndex">
|
|
<VRow class=" text-center pb-2 px-4 pt-4 selectedCard">
|
|
<VCol col="auto" class="category-card-option selectedCard">
|
|
<div class="text-center flex-wrap gap-0 pb-2">
|
|
{{ opt.value }}
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.sub_questions.sub_questions" v-for="sub_subquestion in item.sub_questions.sub_questions"
|
|
:key="subquestion">
|
|
<div v-if="sub_subquestion.question && subquestion.sub_question_type == 'checkbox'">
|
|
<h4 class="text-center mt-5 mb-2">{{ subquestion.question }}</h4>
|
|
<VCard class="mb-2 selectedCard"
|
|
v-for="( opt, optionIndex ) in parseOptions(sub_subquestion.sub_question_options)" :key="optionIndex">
|
|
<VRow class=" text-center pb-2 px-4 pt-4 selectedCard">
|
|
<VCol col="auto" class="category-card-option selectedCard">
|
|
<div class="text-center flex-wrap gap-0 pb-2">
|
|
{{ opt.value }} Test
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</div>
|
|
<div v-if="subquestion.question && subquestion.sub_question_type == 'radio'">
|
|
<h4 class="text-center mt-5 mb-2">{{ subquestion.question }}</h4>
|
|
<VCard class="mb-2 selectedCard" @click="() => nextTab(item.id, opt)"
|
|
v-for="( opt, optionIndex ) in parseOptions(subquestion.sub_question_options)" :key="optionIndex">
|
|
<VRow class=" text-center pb-2 px-4 pt-4 selectedCard">
|
|
<VCol col="auto" class="category-card-option selectedCard">
|
|
<div class="text-center flex-wrap gap-0 pb-2">
|
|
{{ opt.value }}
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</div>
|
|
</div>
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
</template>
|
|
<style lang="scss">
|
|
.selectedCard div :hover,
|
|
.selectedCard:hover,
|
|
.selectedCard h4:hover {
|
|
background-color: rgb(105, 108, 255);
|
|
color: #fff !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category-card-option {
|
|
padding: 11px 15px;
|
|
}
|
|
.selected-category-card{
|
|
background-color: rgb(105, 108, 255);
|
|
color: #fff !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
// .selectedCard h4:hover {
|
|
// color: #fff;
|
|
// }
|
|
|
|
.category-card {
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.v-slide-group__next {
|
|
display: none !important;
|
|
}
|
|
|
|
.card-title {
|
|
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
.v-list-item-title {
|
|
white-space: inherit !important;
|
|
;
|
|
}
|
|
|
|
.v-list {
|
|
min-height: 168px;
|
|
}
|
|
|
|
@media (min-width: 320px) and (max-width: 768px) {
|
|
.v-container {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.auth-wrapper {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.input-width {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
// .input-width {
|
|
// max-width: 50%;
|
|
// }
|
|
|
|
.form-check-input[type=checkbox] {
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
.form-check .form-check-input {
|
|
float: left;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.form-check-input {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-check-input {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
margin-top: 0.135em;
|
|
vertical-align: top;
|
|
background-color: #fff;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
border: 2px solid #dbdade;
|
|
appearance: none;
|
|
}
|
|
|
|
.form-check .form-check-input:checked,
|
|
.form-check .form-check-input[type=checkbox]:indeterminate {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
|
|
}
|
|
|
|
.form-check-input:checked[type=checkbox] {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='13' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.form-check-input:checked,
|
|
.form-check-input[type=checkbox]:indeterminate {
|
|
background-color: #7367f0;
|
|
border-color: #7367f0;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: #7367f0;
|
|
border-color: #7367f0;
|
|
}
|
|
|
|
.form-check-input[type=checkbox] {
|
|
border-radius: 0.25em;
|
|
}
|
|
</style>
|