|
|
@@ -0,0 +1,722 @@
|
|
|
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
|
|
|
+<template>
|
|
|
+ <q-page class="sob-medida-page">
|
|
|
+ <div class="page-shell">
|
|
|
+ <span class="page-title gradient-diarista">
|
|
|
+ {{ $t('sob_medida.page_title') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- CARD PEDIDO -->
|
|
|
+ <q-card flat bordered class="figma-card compact-card">
|
|
|
+ <div class="card-title text-center gradient-diarista">
|
|
|
+ {{ $t('sob_medida.your_order') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- quantidade -->
|
|
|
+ <div class="field-label text-center gradient-diarista">
|
|
|
+ {{ $t('sob_medida.quantity_service') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="quantity-stepper">
|
|
|
+ <q-btn
|
|
|
+ round
|
|
|
+ flat
|
|
|
+ icon="remove"
|
|
|
+ class="quantity-btn"
|
|
|
+ @click="decreaseQuantity"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span class="quantity-value gradient-diarista">
|
|
|
+ {{ quantity }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <q-btn
|
|
|
+ round
|
|
|
+ flat
|
|
|
+ icon="add"
|
|
|
+ class="quantity-btn"
|
|
|
+ @click="increaseQuantity"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- endereço -->
|
|
|
+ <div class="options-grid gradient-diarista">
|
|
|
+ <div
|
|
|
+ v-for="option in addressTypesOptions"
|
|
|
+ :key="option.value"
|
|
|
+ class="option-col"
|
|
|
+ >
|
|
|
+ <q-radio
|
|
|
+ v-model="selectedOption"
|
|
|
+ :val="option.value"
|
|
|
+ :label="option.label"
|
|
|
+ color="purple"
|
|
|
+ dense
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tipo serviço -->
|
|
|
+ <div class="field-label text-center gradient-diarista">
|
|
|
+ {{ $t('sob_medida.service_type') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="service-type-inline">
|
|
|
+ <div
|
|
|
+ v-for="serviceType in serviceTypes"
|
|
|
+ :key="serviceType.id"
|
|
|
+ class="option-col"
|
|
|
+ >
|
|
|
+ <q-radio
|
|
|
+ v-model="selectedServiceType"
|
|
|
+ :val="serviceType.id"
|
|
|
+ :label="serviceType.description"
|
|
|
+ color="purple"
|
|
|
+ dense
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- especialidades -->
|
|
|
+ <div class="field-label text-center gradient-diarista">
|
|
|
+ {{ $t('sob_medida.preferred_specialty') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="options-grid specialties-grid">
|
|
|
+ <div
|
|
|
+ v-for="item in specialties"
|
|
|
+ :key="item.id"
|
|
|
+ class="specialty-col"
|
|
|
+ >
|
|
|
+ <q-checkbox
|
|
|
+ v-model="selectedSpecialties"
|
|
|
+ :val="item.id"
|
|
|
+ :label="item.description"
|
|
|
+ color="purple"
|
|
|
+ dense
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- descrição -->
|
|
|
+ <div class="field-label text-center gradient-diarista">
|
|
|
+ {{ $t('sob_medida.description_label') }}
|
|
|
+ <span class="optional">
|
|
|
+ {{ $t('sob_medida.optional') }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-input
|
|
|
+ v-model="description"
|
|
|
+ type="textarea"
|
|
|
+ outlined
|
|
|
+ bg-color="white"
|
|
|
+ color="dark"
|
|
|
+ input-class="text-black"
|
|
|
+ class="description-box"
|
|
|
+ :placeholder="$t('sob_medida.description_placeholder')"
|
|
|
+ />
|
|
|
+ </q-card>
|
|
|
+
|
|
|
+ <!-- FAIXA -->
|
|
|
+ <div class="section-title gradient-diarista">
|
|
|
+ {{ $t('sob_medida.price_range_title') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-card flat bordered class="figma-card compact-card">
|
|
|
+ <div class="range-container">
|
|
|
+ <div
|
|
|
+ class="price-pin"
|
|
|
+ :style="{ left: minPosition + '%' }"
|
|
|
+ >
|
|
|
+ <span>{{ priceRange.min }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="price-pin"
|
|
|
+ :style="{ left: maxPosition + '%' }"
|
|
|
+ >
|
|
|
+ <span>{{ priceRange.max }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-range
|
|
|
+ v-model="priceRange"
|
|
|
+ :min="PRICE_LIMITS.min"
|
|
|
+ :max="PRICE_LIMITS.max"
|
|
|
+ color="secondary"
|
|
|
+ class="price-range"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="range-helper gradient-diarista">
|
|
|
+ {{ $t('sob_medida.price_range_helper') }}
|
|
|
+ </div>
|
|
|
+ </q-card>
|
|
|
+
|
|
|
+ <!-- DATA -->
|
|
|
+ <div class="section-title gradient-diarista">
|
|
|
+ {{ $t('sob_medida.date_and_time') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-card flat bordered class="figma-card date-card">
|
|
|
+ <q-date
|
|
|
+ v-model="selectedDate"
|
|
|
+ minimal
|
|
|
+ color="purple"
|
|
|
+ class="figma-date calendar-custom"
|
|
|
+ />
|
|
|
+ </q-card>
|
|
|
+ </div>
|
|
|
+ </q-page>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+// IMPORTS
|
|
|
+import { ref, computed, watch, onMounted } from 'vue'
|
|
|
+import { useQuasar } from 'quasar'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+import ServiceSelectionSheet from 'src/pages/search/components/ServiceSelectionSheet.vue'
|
|
|
+import ServiceTimeSelectionDialog from 'src/pages/search/components/ServiceTimeSelectionDialog.vue'
|
|
|
+
|
|
|
+import { createCustomSchedule } from 'src/api/customSchedules'
|
|
|
+import { getPrimaryAddress } from 'src/api/address'
|
|
|
+import { getPublicServiceTypes } from 'src/api/serviceTypes'
|
|
|
+import { getPublicSpecialties } from 'src/api/specialties'
|
|
|
+import {useI18n} from 'vue-i18n'
|
|
|
+import { userStore } from 'src/stores/user'
|
|
|
+import { calculateDailyPrices } from 'src/helpers/utils'
|
|
|
+
|
|
|
+// SETUP
|
|
|
+const $q = useQuasar()
|
|
|
+const router = useRouter()
|
|
|
+const user = userStore()
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+// REFS
|
|
|
+const serviceTypes = ref([])
|
|
|
+const specialties = ref([])
|
|
|
+const address = ref(null)
|
|
|
+
|
|
|
+const selectedServiceType = ref(null)
|
|
|
+const selectedSpecialties = ref([])
|
|
|
+const selectedOption = ref('home')
|
|
|
+const description = ref('')
|
|
|
+const selectedDate = ref(null)
|
|
|
+const quantity = ref(1)
|
|
|
+
|
|
|
+const PRICE_LIMITS = Object.freeze({
|
|
|
+ min: 100,
|
|
|
+ max: 500
|
|
|
+})
|
|
|
+
|
|
|
+const priceRange = ref({
|
|
|
+ min: 150,
|
|
|
+ max: 300
|
|
|
+})
|
|
|
+
|
|
|
+// COMPUTED
|
|
|
+const addressTypesOptions = computed(() => [
|
|
|
+ { label: t('sob_medida.residential'), value: 'home' },
|
|
|
+ { label: t('sob_medida.commercial'), value: 'commercial' }
|
|
|
+])
|
|
|
+
|
|
|
+const providerPrices = computed(() =>
|
|
|
+ calculateDailyPrices(priceRange.value.max * quantity.value)
|
|
|
+)
|
|
|
+
|
|
|
+const minPosition = computed(() =>
|
|
|
+ ((priceRange.value.min - PRICE_LIMITS.min) /
|
|
|
+ (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
|
|
|
+)
|
|
|
+
|
|
|
+const maxPosition = computed(() =>
|
|
|
+ ((priceRange.value.max - PRICE_LIMITS.min) /
|
|
|
+ (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
|
|
|
+)
|
|
|
+
|
|
|
+// FUNCTIONS
|
|
|
+const openServiceSelection = () => {
|
|
|
+ $q.dialog({
|
|
|
+ component: ServiceSelectionSheet,
|
|
|
+ componentProps: {
|
|
|
+ provider: providerPrices.value,
|
|
|
+ selectedDate: selectedDate.value
|
|
|
+ }
|
|
|
+ }).onOk((payload) => {
|
|
|
+ if (payload?.serviceType) {
|
|
|
+ openServiceTimeSelection(payload.serviceType)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const openServiceTimeSelection = (serviceType) => {
|
|
|
+ $q.dialog({
|
|
|
+ component: ServiceTimeSelectionDialog,
|
|
|
+ componentProps: {
|
|
|
+ serviceType,
|
|
|
+ provider: providerPrices.value,
|
|
|
+ selectedDate: selectedDate.value
|
|
|
+ }
|
|
|
+ }).onOk(saveFinalOrder)
|
|
|
+}
|
|
|
+
|
|
|
+const saveFinalOrder = async (payloadFinal) => {
|
|
|
+ let [startHour, endHour] = payloadFinal.slot.split('-')
|
|
|
+
|
|
|
+ startHour = String(startHour).padStart(2, '0')
|
|
|
+ endHour = String(endHour).padStart(2, '0')
|
|
|
+
|
|
|
+ const payload = {
|
|
|
+ client_id: user.user.client.id,
|
|
|
+ address_id: address.value?.id,
|
|
|
+ quantity: quantity.value,
|
|
|
+ date: payloadFinal.date,
|
|
|
+ period_type: String(payloadFinal.serviceType.hoursCount),
|
|
|
+ start_time: `${startHour}:00`,
|
|
|
+ end_time: `${endHour}:00`,
|
|
|
+ address_type: selectedOption.value,
|
|
|
+ service_type_id: selectedServiceType.value,
|
|
|
+ description: description.value,
|
|
|
+ min_price: priceRange.value.min,
|
|
|
+ max_price: priceRange.value.max,
|
|
|
+ offers_meal: payloadFinal.meal === 'offer',
|
|
|
+ speciality_ids: selectedSpecialties.value
|
|
|
+ }
|
|
|
+
|
|
|
+ await createCustomSchedule(payload)
|
|
|
+
|
|
|
+ $q.notify({
|
|
|
+ type: 'positive',
|
|
|
+ message: t('sob_medida.success_message')
|
|
|
+ })
|
|
|
+
|
|
|
+ router.push('/#showSuccessModal')
|
|
|
+}
|
|
|
+
|
|
|
+const increaseQuantity = () => {
|
|
|
+ quantity.value++
|
|
|
+}
|
|
|
+
|
|
|
+const decreaseQuantity = () => {
|
|
|
+ if (quantity.value > 1) quantity.value--
|
|
|
+}
|
|
|
+
|
|
|
+// WATCH
|
|
|
+watch(selectedDate, (newDate, oldDate) => {
|
|
|
+ if (!newDate || newDate === oldDate) return
|
|
|
+ openServiceSelection()
|
|
|
+})
|
|
|
+
|
|
|
+// LIFECYCLE
|
|
|
+onMounted(async () => {
|
|
|
+ const { data } = await getPrimaryAddress(user.user.client.id, 'client')
|
|
|
+ address.value = data.payload
|
|
|
+
|
|
|
+ serviceTypes.value = await getPublicServiceTypes()
|
|
|
+ specialties.value = await getPublicSpecialties()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.sob-medida-page {
|
|
|
+ background: #f6f5fb;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-shell {
|
|
|
+ max-width: 420px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 0 0 20px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.figma-card {
|
|
|
+ border-radius: 24px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title,
|
|
|
+.section-title {
|
|
|
+ color: #7b61ff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.options-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px 20px;
|
|
|
+ justify-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ :deep(.q-radio__label),
|
|
|
+ :deep(.q-checkbox__label) {
|
|
|
+ color: #000 !important;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-checkbox__inner),
|
|
|
+ :deep(.q-radio__inner) {
|
|
|
+ color: #a78bfa !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ margin-left: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.field-label {
|
|
|
+ color: #7b61ff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 18px 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.optional {
|
|
|
+ color: #9e9e9e;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.option-col {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.description-box {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.description-box :deep(textarea) {
|
|
|
+ min-height: 90px;
|
|
|
+ resize: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* CARD */
|
|
|
+.compact-card {
|
|
|
+ border-radius: 32px;
|
|
|
+ padding: 28px 22px;
|
|
|
+ background: #fafafa;
|
|
|
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.date-card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: fit-content;
|
|
|
+ min-width: 320px;
|
|
|
+ max-width: 360px;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 24px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* container */
|
|
|
+.range-container {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 58px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* bolha tipo pin */
|
|
|
+.price-pin {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ background: linear-gradient(180deg, #8b7cff, #6f57db);
|
|
|
+ border-radius: 50% 50% 50% 0;
|
|
|
+ transform: translateX(-50%) rotate(-45deg);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 6px 14px rgba(111, 87, 219, 0.28);
|
|
|
+ z-index: 5;
|
|
|
+}
|
|
|
+
|
|
|
+.price-pin span {
|
|
|
+ transform: rotate(45deg);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/* RANGE */
|
|
|
+.price-range {
|
|
|
+ padding: 8px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* trilha */
|
|
|
+.price-range :deep(.q-slider__track-container) {
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: #ddd7ea;
|
|
|
+}
|
|
|
+
|
|
|
+/* preenchimento */
|
|
|
+.price-range :deep(.q-slider__track) {
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: linear-gradient(90deg, #d95cff, #7a5cff);
|
|
|
+}
|
|
|
+
|
|
|
+/* THUMB REAL FIGMA */
|
|
|
+.price-range :deep(.q-slider__thumb) {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ min-width: 24px;
|
|
|
+ min-height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #7a5cff !important;
|
|
|
+ border: 4px solid #ffffff;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* remove quadrado interno do quasar */
|
|
|
+.price-range :deep(.q-slider__thumb-shape) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.price-range :deep(.q-slider__focus-ring) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* texto helper */
|
|
|
+.range-helper {
|
|
|
+ margin-top: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.45;
|
|
|
+ text-align: center;
|
|
|
+ color: #6b6b6b;
|
|
|
+}
|
|
|
+
|
|
|
+/* transição suave */
|
|
|
+
|
|
|
+.price-pin,
|
|
|
+.price-range :deep(.q-slider__thumb) {
|
|
|
+ transition:
|
|
|
+ background 0.25s ease,
|
|
|
+ box-shadow 0.25s ease,
|
|
|
+ filter 0.25s ease;
|
|
|
+}
|
|
|
+
|
|
|
+// quantidade
|
|
|
+.quantity-stepper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 18px;
|
|
|
+ margin: 12px 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.quantity-btn {
|
|
|
+ background: #f5f0ff;
|
|
|
+ color: #7b61ff;
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+.quantity-value {
|
|
|
+ min-width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.service-type-inline {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 160px);
|
|
|
+ gap: 12px 24px;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.specialties-grid {
|
|
|
+ justify-items: center;
|
|
|
+ gap: 10px 18px;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.specialty-col {
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.specialties-grid :deep(.q-checkbox) {
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.specialties-grid :deep(.q-checkbox__label) {
|
|
|
+ color: #000 !important;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.2;
|
|
|
+ white-space: normal;
|
|
|
+}
|
|
|
+
|
|
|
+/* hover individual do balão */
|
|
|
+.price-pin:hover {
|
|
|
+ background: linear-gradient(180deg, #7b68ff, #5f46d8);
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* clique individual do balão */
|
|
|
+.price-pin:active {
|
|
|
+ background: linear-gradient(180deg, #6d52ff, #5438d6);
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* thumb hover individual */
|
|
|
+.price-range :deep(.q-slider__thumb:hover) {
|
|
|
+ background: #6d52ff !important;
|
|
|
+ box-shadow: 0 0 0 18px rgba(109, 82, 255, 0.22);
|
|
|
+}
|
|
|
+
|
|
|
+/* thumb selecionado */
|
|
|
+.price-range :deep(.q-slider__thumb:active) {
|
|
|
+ background: #5e3fff !important;
|
|
|
+ box-shadow: 0 0 0 22px rgba(94, 63, 255, 0.28);
|
|
|
+}
|
|
|
+
|
|
|
+/* trilha mais viva só quando mouse estiver no slider */
|
|
|
+.price-range:hover :deep(.q-slider__track) {
|
|
|
+ filter: brightness(0.95);
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-custom {
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: white !important;
|
|
|
+
|
|
|
+ :deep(.q-date__main) {
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__content) {
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar) {
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar-item--out) {
|
|
|
+ .q-btn__content {
|
|
|
+ color: #CBD5E1 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar-days .q-btn__content) {
|
|
|
+ font-family: 'Inter', sans-serif;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1E293B;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar-weekdays > div) {
|
|
|
+ color: #6366F1;
|
|
|
+ font-weight: 700;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__navigation) {
|
|
|
+ .q-btn {
|
|
|
+ color: #1E293B !important;
|
|
|
+ }
|
|
|
+ .q-btn__content {
|
|
|
+ color: #1E293B !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__nav-btn-month),
|
|
|
+ :deep(.q-date__nav-btn-year) {
|
|
|
+ color: #6366F1 !important;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__event) {
|
|
|
+ bottom: 4px;
|
|
|
+ height: 6px;
|
|
|
+ width: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__today) {
|
|
|
+ .q-btn__content {
|
|
|
+ color: #7c4dff !important;
|
|
|
+ background: #7c4dff15;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__selected) {
|
|
|
+ .q-btn__content {
|
|
|
+ background: #6366F1 !important;
|
|
|
+ color: white !important;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__view--months),
|
|
|
+ :deep(.q-date__view--years) {
|
|
|
+ .q-btn {
|
|
|
+ color: #1E293B !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 🔥 labels pretas */
|
|
|
+:deep(.q-radio__label),
|
|
|
+:deep(.q-checkbox__label) {
|
|
|
+ color: #000 !important;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.q-checkbox__inner),
|
|
|
+:deep(.q-radio__inner) {
|
|
|
+ color: #a78bfa !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 📱 celular */
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .page-shell {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .figma-card {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .figma-date {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 📲 tablet */
|
|
|
+@media (min-width: 768px) {
|
|
|
+ .page-shell {
|
|
|
+ max-width: 460px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
