From 655dc922464a932fffe396b8da98c434a1b48d2d Mon Sep 17 00:00:00 2001 From: David Cook Date: Mon, 29 Jul 2024 15:02:03 +1000 Subject: [PATCH] =?UTF-8?q?Clean=20up=20wacky=20input=20styles=20?= =?UTF-8?q?=F0=9F=94=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Trying to style a pretend input just doesn't work in practice, it resulted in a couple of style issues. Let's keep it simple, --- app/webpacker/css/admin/products_v3.scss | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index fd292a3a39..a7622faf7c 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -257,31 +257,20 @@ min-width: 15em; .search-input { - width: 100%; position: relative; - background-color: $lighter-grey; - border: 1px solid $lighter-grey; - border-radius: 4px; - height: $btn-relaxed-height; - line-height: $btn-relaxed-height; - - &:has(input:focus), - &:has(input:active) { - border: 1px solid $dark-blue; - } > input { - // Totally hide the input from its container - background-color: transparent; - border: none; - width: calc(100% - 30px); // 30px is the width of the search icon + padding + padding-left: 33px; + width: 100%; } &:before { + position: absolute; font-family: FontAwesome; content: "\f002"; color: $near-black; font-size: 16px; + margin-top: 0.7rem; margin-left: 10px; } }