Davide Grilli
76135e404a
- style.css: shadows, transizioni, variabili --radius-sm/full, --color-primary-muted, --color-danger-muted - BottomNav: icone SVG cross-platform, indicatore pill attivo, shadow verso l'alto - MealCard: accordion (solo oggi aperto di default), badge voci quando chiusa, icone pasto, fix touch target btn-remove - MealPlanner: rileva giorno corrente, mostra come sottotitolo - Converter: chip alimento selezionato, result box con formula (es. 140g x 0.75 = 105g), layout migliorato - ShoppingList: contatore X/Y completati, sezione separata voci spuntate, btn-clear ghost invece di solid rosso, empty state - CheckboxItem: touch target 44px garantito, transizione checked, icona SVG per rimuovere, fix plurale "1 voce / N voci" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
||
<li class="checkbox-item" :class="{ checked: item.checked }">
|
||
<label class="item-label">
|
||
<input type="checkbox" :checked="item.checked" @change="$emit('toggle')" />
|
||
<span class="item-name">{{ item.name }}</span>
|
||
</label>
|
||
<button class="btn-remove" @click="$emit('remove')" :aria-label="`Rimuovi ${item.name}`">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</li>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({ item: Object })
|
||
defineEmits(['toggle', 'remove'])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius-sm);
|
||
padding: 4px 4px 4px 14px;
|
||
border: 1.5px solid var(--color-border);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: background var(--transition), border-color var(--transition);
|
||
}
|
||
|
||
.checkbox-item.checked {
|
||
background: var(--color-bg);
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.item-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
accent-color: var(--color-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 1rem;
|
||
transition: color var(--transition);
|
||
}
|
||
|
||
.checked .item-name {
|
||
text-decoration: line-through;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
/* touch target pieno 44×44px */
|
||
.btn-remove {
|
||
background: none;
|
||
color: var(--color-muted);
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-sm);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.btn-remove:active { color: var(--color-danger); }
|
||
</style>
|