1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
market/src/components/atoms/Tooltip.module.css
claudiaHash ce81777030
view algorithms on homepage (#388)
* view algorithms on homepage

* linting error fixed

* view algos on rinkeby/mainnet, added algos on search

* global color system tweak, apply on asset teaser system

* create subtle hierarchical distinction between background & content
* output asset type
* add asset type as css class
* bonus side effect: a nicer dark mode theme on OLED screens

* add icon assets

* compute/download icons added to asset teaser

* tooltip content fix

* tooltip content width fix


tooltip message shortened

* max-width added

* links renamed, all algos section removed

* datatoken tooltip removed

* spacing tweaks

* visual separation of asset & access type, flip order
* spacing/font size tweaks, aligning things

* fix search

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* light mode color tweak

* change dataset display name

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* data set label fixed

* query updated for data sets and algos

Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro>
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro>
2021-02-22 16:25:27 +02:00

51 lines
812 B
CSS

.tooltip {
display: inline-block;
}
.content {
composes: box from './Box.module.css';
padding: calc(var(--spacer) / 4);
max-width: 25rem;
font-size: var(--font-size-small);
}
.icon {
width: 1rem;
height: 1rem;
cursor: help;
display: inline-block;
margin-bottom: -0.1rem;
margin-left: calc(var(--spacer) / 6);
fill: var(--color-secondary);
}
.arrow,
.arrow::before {
position: absolute;
width: 1.2rem;
height: 1.2rem;
z-index: -1;
}
.arrow::before {
content: '';
transform: rotate(45deg);
background: var(--border-color);
}
.content[data-placement*='top'] > .arrow {
bottom: -4px;
}
.content[data-placement*='bottom'] > .arrow {
top: -4px;
}
.content[data-placement*='left'] > .arrow {
right: 6px;
}
.content[data-placement*='right'] > .arrow {
left: -4px;
}