diff options
Diffstat (limited to 'ui/app/css/itcss/components/wallet-balance.scss')
-rw-r--r-- | ui/app/css/itcss/components/wallet-balance.scss | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss new file mode 100644 index 000000000..293771550 --- /dev/null +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -0,0 +1,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; +} |