raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-11 23:17:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up wacky input styles 🔥

Browse Source 
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,
This commit is contained in:
David Cook
2024-07-29 15:02:03 +10:00
parent 53e3621e04
commit 655dc92246
1 changed files with 4 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/webpacker/css/admin/products_v3.scss
View File

@@ -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;
}
}