diff --git a/src/assets/show-ingredients.svg b/src/assets/show-ingredients.svg new file mode 100644 index 0000000..179eb12 --- /dev/null +++ b/src/assets/show-ingredients.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/components/meals/EditMealPage.vue b/src/components/meals/EditMealPage.vue index 69a0f8c..484a524 100644 --- a/src/components/meals/EditMealPage.vue +++ b/src/components/meals/EditMealPage.vue @@ -11,19 +11,33 @@

Recipes

@@ -45,6 +59,7 @@ @@ -250,7 +284,7 @@ li { font-style: italic; } -.delete-button { +.icon-button { background: none; border: none; cursor: pointer; @@ -258,9 +292,28 @@ li { padding: 0.5em; } -.delete-button:hover { +.icon-button:hover { /* Invert the colors of the trash icon */ filter: invert(1); } +.show-ingredient-checkbox { + display: none; +} + +.show-ingredient-checkbox + label { + cursor: pointer; + background-color: #fff; + padding: 0.5em; + border-radius: 1em; +} + +.show-ingredient-checkbox + label:hover { + background-color: #eee; +} + +.show-ingredient-checkbox:checked + label { + filter: invert(1); +} + \ No newline at end of file