cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds psuedo selectors to increase touch target

Browse Source
This commit is contained in:
harry 2023-11-15 20:35:12 +00:00
parent 30f3a697f0
commit d0cbe350a7
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
vue/src/components/IngredientComponent.vue
View File

@ -106,9 +106,22 @@ export default {
<style scoped> <style scoped>
/* increase size of hover/touchable space without changing spacing */ /* increase size of hover/touchable space without changing spacing */
.touchable { .touchable {
/* padding-right: 2em; --target-increase: 1em;
padding-left: 2em; */ display: flex;
margin-right: -1em;
margin-left: -1em;
} }
.touchable::after {
content: "";
display: inline-block;
width: var(--target-increase);
margin-right: calc(var(--target-increase) * -1);
}
.touchable::before {
content: "";
display: inline-block;
width: var(--target-increase);
margin-left: calc(var(--target-increase) * -1);
}
</style> </style>