1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
market/src/components/molecules/SearchBar.module.css
Matthias Kretschmann a7998abb99
Multinetwork UI additions (#729)
* add BSC to default chains

* searchbar visual tweaks

* race condition fix

* network name tweaks

* beta → v3

* use publish form titles to inform about network

* form actions refactor

* simplify network name on asset details

* visual indicator for selected chains on button

* lint fix

* more layout flow tinkering, collapsed search by default

* search field layout tweaks

* unknown network/gaia-x name fixes

* put back search cancel button in webkit

* space fixes

* cross browser visual fixes
2021-07-26 15:48:24 +02:00

73 lines
1.1 KiB
CSS

.search {
display: flex;
position: relative;
}
.button {
color: var(--color-secondary);
cursor: pointer;
background: var(--background-content);
border: none;
box-shadow: none;
padding: 0;
position: absolute;
padding: calc(var(--spacer) / 4);
width: 100%;
right: 1px;
left: 1px;
top: 1px;
bottom: 1px;
z-index: -1;
}
.button:hover,
.button:focus {
color: var(--font-color-text);
}
.input {
background-color: transparent;
height: 36px;
margin: 0;
outline: 0;
padding-right: var(--spacer);
width: 0;
transition: none;
}
.input:focus {
width: calc(100% - var(--spacer));
background-color: var(--background-content);
position: fixed;
left: calc(var(--spacer) / 2);
right: 0;
z-index: 2;
}
@media screen and (min-width: 78rem) {
.input,
.input:focus {
width: auto;
position: relative;
left: initial;
right: initial;
}
.button {
width: auto;
left: auto;
background: none;
}
.input:focus + .button {
z-index: 3;
}
}
.searchIcon {
fill: currentColor;
transition: 0.2s ease-out;
width: var(--font-size-h5);
height: var(--font-size-h5);
}