1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-26 03:06:49 +02:00
market/src/components/@shared/FormInput/TagsAutoComplete.module.css

102 lines
2.5 KiB
CSS
Raw Normal View History

Feat: autocomplete tags functionality (#1471) * 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>
2022-10-05 16:40:00 +02:00
.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;
}