mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
d887675f82
* upgrading to ocean.js 0.14.6 * saving initial changes * creating seperate component for adding tokens * showing datatoken name * adding button for metamask users * using substring as datatoken symbol * removing duplicated code * removing empty div element * removing unneccessary div element * no longer sending the whole DDO * refactoring add token functions * updating function name * no longer sending the whole ddo to the addDataToken component * removing DDO import * small refactor, get web3 provider info in useWeb3 * general AddToken component * cleanup * cleanup, remove symbol shortening * copy, layout tweaks Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
72 lines
1.2 KiB
CSS
72 lines
1.2 KiB
CSS
.button {
|
|
display: inline-block;
|
|
position: relative;
|
|
min-width: auto;
|
|
}
|
|
|
|
.button:hover,
|
|
.button:focus {
|
|
transform: none;
|
|
}
|
|
|
|
.logoWrap {
|
|
position: relative;
|
|
display: inline-block;
|
|
z-index: 1;
|
|
}
|
|
|
|
.logoWrap::before {
|
|
content: '+';
|
|
color: var(--color-secondary);
|
|
font-family: var(--font-family-base);
|
|
font-weight: var(--font-weight-base);
|
|
font-size: 1.25em;
|
|
position: absolute;
|
|
right: 0.05em;
|
|
top: 0.05em;
|
|
line-height: 0;
|
|
}
|
|
|
|
.logo {
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
display: inline-block;
|
|
margin-bottom: -0.35em;
|
|
border-radius: 50%;
|
|
border: 0.065rem solid var(--color-secondary);
|
|
margin-right: calc(var(--spacer) / 10);
|
|
transition: 0.2s ease-out;
|
|
}
|
|
|
|
.button:hover .logo,
|
|
.button:focus .logo {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.button:hover .logoWrap::before,
|
|
.button:focus .logoWrap::before {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.text {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.minimal .text {
|
|
opacity: 0;
|
|
transform: translate3d(-1rem, 0, 0);
|
|
transition: 0.2s ease-out;
|
|
z-index: 0;
|
|
white-space: pre;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 0.15rem;
|
|
}
|
|
|
|
.minimal:hover .text,
|
|
.minimal:focus .text {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|