mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-17 01:43:23 +02:00
52eaee0ad5
* feat: add autocomplete tag component * feat: pass tags aggregated list to autocomplete component * feat: add initial styling to autocomplete tag component * fix: autocomplete style types * feat: move styling elements to module.css file * feat: update placeholder text for tag input field * feat: add default value to tags if present * feat: add edit tags functionality * fix: default tag value * fix: style for automplete menu's keyboard navigation * fix: tags aggregation query size * feat: return sorted tags aggregated list suggestion in publish * fix: set tags value touched state in edit mode * add package back * enhancement: autocomplete tag component config (#1679) * fix publishing when connecting wallet on publish form * fix reset pricing on tx execution * removed changing steps * cleanup * Fix headers (#1663) * test * test * test * test * test * test * test * remove link * enhancement: tag autocomplete settings * feat: add cursor type text * feat: tweak filter and sort for matched tags * fix: tags input font color * fix: tag autocomplete component input color Co-authored-by: EnzoVezzaro <enzo-vezzaro@live.it> Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: Ana <84312885+AnaLoznianu@users.noreply.github.com> * fix lock * test * fix * fix * minor fixes * fix cursor on remove item (x) * style updates * UX tweaks * start suggestions upon first key stroke * remove redundant help tooltip * change placeholder copy * remove input clear action * edit updates Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: EnzoVezzaro <enzo-vezzaro@live.it> Co-authored-by: Ana <84312885+AnaLoznianu@users.noreply.github.com> Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
102 lines
2.5 KiB
CSS
102 lines
2.5 KiB
CSS
.select [class$='control'] {
|
|
border-color: var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: none;
|
|
background-color: var(--background-content);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
font-weight: var(--font-weight-bold);
|
|
cursor: text;
|
|
min-height: 43px;
|
|
}
|
|
|
|
.select [class$='control']:hover {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.select [class$='control']:focus-within {
|
|
border-color: var(--font-color-text);
|
|
}
|
|
|
|
.select [class$='ValueContainer'] {
|
|
padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
|
|
}
|
|
|
|
.select [class$='Input'] {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.select input {
|
|
color: var(--font-color-heading) !important;
|
|
}
|
|
|
|
.select [class$='menu'] {
|
|
background-color: var(--background-highlight);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.select [class$='option'] {
|
|
color: var(--font-color-heading);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.select [class$='option']:active {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
.select [class$='multiValue'],
|
|
.select [class$='multiValue'] > *,
|
|
.select [class$='multiValue']:hover > * {
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--background-highlight);
|
|
color: var(--font-color-text);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
font-weight: var(--font-weight-bold);
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.select [class$='multiValue'] > div[role$='button'],
|
|
.select [class$='indicatorContainer'] svg {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select [class$='placeholder'] {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
color: var(--color-secondary);
|
|
font-weight: var(--font-weight-base);
|
|
transition: 0.2s ease-out;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.select [class$='menu'] {
|
|
background-color: var(--background-content);
|
|
margin-top: -2px;
|
|
border: 1px solid var(--font-color-text);
|
|
border-top-color: var(--border-color);
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.select [class$='menu'] [class$='option']:hover,
|
|
.select [class$='menu'] [class$='option']:focus-within {
|
|
background-color: var(--font-color-heading);
|
|
color: var(--background-content);
|
|
}
|
|
|
|
.select [class$='NoOptionsMessage'] {
|
|
font-size: var(--font-size-small);
|
|
color: var(--color-secondary);
|
|
text-align: left;
|
|
}
|