oceanprotocol/market

View on GitHub
src/components/Header/Wallet/Details.module.css

Summary

Maintainability
Test Coverage
.details {
  padding: calc(var(--spacer) / 4);
  padding-right: calc(var(--spacer) / 2);
  min-width: 17rem;
}

@media (min-width: 40rem) {
  .details {
    padding: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 3);
    min-width: 20rem;
  }
}

.details > section[class*='feedback'] {
  margin-top: calc(var(--spacer) / 2);
}

.balance {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  white-space: nowrap;
}

.symbol {
  width: 22%;
  text-align: right;
  font-weight: var(--font-weight-base);
  font-size: var(--font-size-small);
  display: inline-block;
  margin-right: 0.4rem;
}

.value {
  color: var(--font-color-text);
}

.conversion strong {
  font-weight: var(--font-weight-base);
}

.actions {
  border-top: 1px solid var(--border-color);
  margin-top: calc(var(--spacer) / 2);
  padding-top: calc(var(--spacer) / 2);
  font-size: var(--font-size-small);
  color: var(--color-secondary);
  display: flex;
  justify-content: space-between;
}

.walletLogoWrap {
  display: block;
}

.actions p {
  margin: 0;
}

.actions button,
.actions button:hover {
  display: block;
  font-size: var(--font-size-mini);
  margin-top: calc(var(--spacer) / 3);
  text-align: left;
}

.actions button:first-child {
  margin-top: calc(var(--spacer) / 8);
}

.walletLogo {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--spacer) / 8);
  margin-top: -0.2rem;
}

.actions select {
  margin-top: calc(var(--spacer) / 4);
  min-width: 6rem;
}

.walletInfo {
  display: flex;
  flex-direction: column;
}

.walletInfo button {
  margin-top: calc(var(--spacer) / 5) !important;
}

.addToken {
  margin-left: 0.3rem;
}

.addToken svg path {
  fill: var(--brand-violet);
}