1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
market/src/components/molecules/Wallet/Details.module.css

64 lines
1.2 KiB
CSS

.details {
composes: box from '../../atoms/Box.module.css';
padding: calc(var(--spacer) / 2) !important;
min-width: 20rem;
max-width: 25rem;
}
.balance {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
white-space: nowrap;
}
.balance span {
width: 20%;
text-align: right;
font-weight: var(--font-weight-base);
font-size: var(--font-size-small);
display: inline-block;
margin-right: 0.4rem;
}
.actions {
border-top: 1px solid var(--brand-grey-lighter);
margin-top: calc(var(--spacer) / 2);
padding-top: calc(var(--spacer) / 2);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-small);
color: 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(--brand-grey-lighter);
}
.details[data-placement*='top'] > .arrow {
bottom: -4px;
}
.details[data-placement*='bottom'] > .arrow {
top: -4px;
}
.details[data-placement*='left'] > .arrow {
right: -4px;
}
.details[data-placement*='right'] > .arrow {
left: -4px;
}