diff options
| author | Alexander_Kabui | 2023-03-14 01:48:21 +0300 |
|---|---|---|
| committer | Alexander_Kabui | 2023-03-14 01:48:21 +0300 |
| commit | 2e4ac35697bf16cd53ba549268bebb730bbfd6e9 (patch) | |
| tree | 7bf2552b6e2eb51a9eda8e265fcb89918ec4cbfe | |
| parent | 33a4e6aea5ecd7ceefdca90c2d86a971e5cf3d22 (diff) | |
| download | genenetwork2-2e4ac35697bf16cd53ba549268bebb730bbfd6e9.tar.gz | |
add shadow and border effect autocomplete
| -rw-r--r-- | wqflask/wqflask/static/new/css/autocomplete.css | 9 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/base.html | 4 |
2 files changed, 10 insertions, 3 deletions
diff --git a/wqflask/wqflask/static/new/css/autocomplete.css b/wqflask/wqflask/static/new/css/autocomplete.css index aba68e37..1501e280 100644 --- a/wqflask/wqflask/static/new/css/autocomplete.css +++ b/wqflask/wqflask/static/new/css/autocomplete.css @@ -2,6 +2,8 @@ /*the container must be positioned relative:*/ position: relative; display: inline-block; + + } input.autocomplete { @@ -21,7 +23,6 @@ input[type=submit].autocomplete { color: #fff; } - .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; @@ -32,13 +33,17 @@ input[type=submit].autocomplete { top: 100%; left: 0; right: 0; + border:1px solid black; + border-top:none; + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; - border-bottom: 1px solid #d4d4d4; + border-bottom: 1px dotted #d4d4d4; } .autocomplete-items div:hover { diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html index db2159e0..be241bc7 100644 --- a/wqflask/wqflask/templates/base.html +++ b/wqflask/wqflask/templates/base.html @@ -154,7 +154,9 @@ <div class="col-8 autocomplete" style="margin-left: 30px;margin-right: 10px;"> <input autocomplete="off" class="global_search_input" id="term" style="width:45vw;" type="text" required placeholder="enter you search term here" name="terms"> </div> - <span><a style="text-decoration: none;color: darkblue;" target="_blank" href="https://issues.genenetwork.org/topics/xapian-search-queries"><strong>click for more search hints</strong></a></span> + + <!-- todo fix text overlap for this;;responsiveness--> + <span><a style="text-decoration: none;color: darkblue;" target="_blank" href="https://issues.genenetwork.org/topics/xapian-search-queries"><strong>click for more search hints</strong></a><span/> </div> </div> </form> |