ui/app/css/itcss/components/wallet-balance.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

$wallet-balance-bg: #e7e7e7;
$wallet-balance-breakpoint: 890px;
$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";

.wallet-balance-wrapper {
  flex: 0 0 auto;
  transition: linear 200ms;
  background: rgba($wallet-balance-bg, 0);

  &--active {
    background: $manatee;
    color: $white;
  }
}

.wallet-balance {
  background: inherit;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  border-top: 1px solid $wallet-balance-bg;

  .balance-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 24px;
    flex-direction: row;
    flex-grow: 3;

    @media #{$wallet-balance-breakpoint-range} {
      margin: 10% 4%;
    }
  }

  .balance-display {
    margin-left: 15px;
    justify-content: flex-start;
    align-items: flex-start;

    .token-amount {
      font-size: 1.5rem;
    }

    .fiat-amount {
      margin-top: .25%;
      font-size: 105%;
    }

    @media #{$wallet-balance-breakpoint-range} {
      margin-left: 4%;

      .token-amount {
        font-size: 105%;
      }

      .fiat-amount {
        font-size: 95%;
      }
    }
  }
}

.balance-icon {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  border: 1px solid $alto;
  padding: 5px;
  background: $white;
}