From 37ce7b34a0f0cfb3e53745682a969fcc66198102 Mon Sep 17 00:00:00 2001 From: Chris <11177048+chrisli-03@users.noreply.github.com> Date: Thu, 20 Oct 2022 18:37:07 -0400 Subject: [PATCH] style cuisine page --- css/style.css | 31 +++++++++++++++++++++++++++++-- html/cuisine.html | 6 ++---- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 8b6c3d4..65b4177 100644 --- a/css/style.css +++ b/css/style.css @@ -107,7 +107,7 @@ header a:hover{ .add{ margin-top: 20px; text-align: center; - padding-left: 28%; + justify-content: center; } .submit{ @@ -125,9 +125,36 @@ h4, .instruction{ #ingredient-list{ text-align: center; - overflow-y: scroll; + overflow-y: auto; padding-left: 40%; padding-right: 40%; + position: relative; +} + +#ingredient-list .list-group-item { + cursor: pointer; + overflow: hidden; +} + +#ingredient-list .list-group-item::after { + content: 'x'; + position: absolute; + display: flex; + height: 100%; + width: 50px; + top: 0; + left: 100%; + cursor: pointer; + align-items: center; + justify-content: center; + border-left: 1px solid rgba(0,0,0,.125); + transition: transform 0.25s; + background-color: #FF6F91; + color: #fff; +} + +#ingredient-list .list-group-item:hover::after { + transform: translateX(-100%); } #submit-final:hover, #addingredient:hover{ diff --git a/html/cuisine.html b/html/cuisine.html index 962ff0c..5af6c8f 100644 --- a/html/cuisine.html +++ b/html/cuisine.html @@ -9,7 +9,7 @@
-
+

Recipley

@@ -47,10 +47,8 @@
Click the ingredient to remove it
- - - +