kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #44527 from Subhajit009iitr/searchbar 

Fix search-icon when typing
This commit is contained in:
Kubernetes Prow Robot 2024-01-04 03:15:51 +01:00 committed by GitHub
parent a5e512e0e9 38fee27aa5
commit eb855a708c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/scss/_custom.scss
View File

@ -1003,3 +1003,32 @@ div.alert > em.javascript-required {
margin: 0.25em;
}
}
// Adjust Search-bar search-icon
.search-bar {
display: flex;
align-items: center;
background-color: #fff;
border: 1px solid #4c4c4c;
border-radius: 20px;
vertical-align: middle;
flex-grow: 1;
overflow-x: hidden;
width: auto;
}
.search-bar:focus-within {
border: 2.5px solid rgba(47, 135, 223, 0.7);
}
.search-bar i.search-icon {
padding: .5em .5em .5em .75em;
opacity: .75;
}
.search-input {
flex: 1;
border: none;
outline: none;
padding: .5em 0 .5em 0;
}

42
layouts/partials/search-input.html
View File

@ -1,30 +1,36 @@
{{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
<div class="search-bar">
<i class="search-icon fas fa-search"></i>
<input
type="search"
class="form-control td-search-input"
placeholder="&#xf002; {{ T "ui_search_placeholder" }}"
class="search-input td-search-input"
placeholder="{{ T "ui_search_placeholder" }}"
aria-label="{{ T "ui_search_placeholder" }}"
autocomplete="off"
>
</div>
{{ else if .Site.Params.offlineSearch }}
<div id="search-nav-container">
<input
type="search"
id="search-input"
autocomplete="off"
class="form-control td-search-input"
placeholder="&#xf002 {{ T "ui_search_placeholder" }}"
autocomplete="off"
>
<div id="search-results" class="container"></div>
</div>
{{ else if .Site.Params.k8s_search }}
<div class="search-bar" id="search-nav-container">
<i class="search-icon fas fa-search"></i>
<input
type="search"
class="form-control td-search-input"
name="q"
placeholder="&#xf002 {{ T "ui_search_placeholder" }}"
class="search-input td-search-input"
id="search-input"
placeholder="{{ T "ui_search_placeholder" }}"
aria-label="{{ T "ui_search_placeholder" }}"
autocomplete="off"
>
{{ end }}
</div>
{{ else if .Site.Params.k8s_search }}
<div class="search-bar">
<i class="search-icon fas fa-search"></i>
<input
type="search"
name="q"
class="search-input td-search-input"
placeholder="{{ T "ui_search_placeholder" }}"
aria-label="{{ T "ui_search_placeholder" }}"
autocomplete="off"
>
</div>
{{ end }}