mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
80 lines
No EOL
1.7 KiB
HTML
80 lines
No EOL
1.7 KiB
HTML
<div class="search-header">
|
|
<input placeholder="Search" class="search-header__input" type="text" />
|
|
<button class="search-header__button">
|
|
<svg
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
height="18"
|
|
width="18"
|
|
class="search-header__icon"
|
|
>
|
|
<path
|
|
fill="#3A3A3A"
|
|
d="M7.132 0C3.197 0 0 3.124 0 6.97c0 3.844 3.197 6.969 7.132 6.969 1.557 0 2.995-.49 4.169-1.32L16.82 18 18 16.847l-5.454-5.342a6.846 6.846 0 0 0 1.718-4.536C14.264 3.124 11.067 0 7.132 0zm0 .82c3.48 0 6.293 2.748 6.293 6.15 0 3.4-2.813 6.149-6.293 6.149S.839 10.37.839 6.969C.839 3.568 3.651.82 7.132.82z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by naelawadallah - Tags: input, dark, search */
|
|
.search-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-header__input {
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
background-color: #0a0a0a;
|
|
border: solid 0.5px #525252;
|
|
color: #646464;
|
|
padding: 0.7rem 1rem;
|
|
border-radius: 25px;
|
|
width: 240px;
|
|
height: 48px;
|
|
transition: all ease-in-out 0.5s;
|
|
margin-right: -2rem;
|
|
opacity: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-header__input:hover,
|
|
.search-header__input:focus {
|
|
box-shadow: 0 0 1em #00000013;
|
|
}
|
|
|
|
.search-header__input:focus {
|
|
outline: none;
|
|
background-color: #0a0a0aad;
|
|
}
|
|
|
|
.search-header__input::-webkit-input-placeholder {
|
|
font-weight: 100;
|
|
color: #3a3a3a;
|
|
}
|
|
|
|
.search-header__input:focus + .search-header__button {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.search-header__button {
|
|
border: none;
|
|
background-color: transparent;
|
|
margin-top: 0.1em;
|
|
}
|
|
|
|
.search-header__button:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-header__icon {
|
|
height: 1.3em;
|
|
width: 1.3em;
|
|
fill: #3a3a3a;
|
|
}
|
|
|
|
</style>
|
|
|