diff options
author | Csaba S <csaba.solya@gmail.com> | 2018-02-22 21:55:46 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-02-22 21:55:46 +0800 |
commit | 2f3463048685759319eb320c916cc7bc23a41649 (patch) | |
tree | e53ac24a1a127f1c684327bca00d23f51b56c542 /ui/app/css/itcss/components/wallet-balance.scss | |
parent | 5ec311ba3e01bd9b0a9ff447fd7639d22a7b3d9c (diff) | |
parent | eed75735b8e90d121537249cf147c1ece60f1e47 (diff) | |
download | tangerine-wallet-browser-2f3463048685759319eb320c916cc7bc23a41649.tar.gz tangerine-wallet-browser-2f3463048685759319eb320c916cc7bc23a41649.tar.zst tangerine-wallet-browser-2f3463048685759319eb320c916cc7bc23a41649.zip |
Merge branch 'master' into edge-support
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; +} |