diff options
author | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-11 15:31:06 +0800 |
---|---|---|
committer | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-11 15:31:06 +0800 |
commit | 0fab1b54820aec01d3b4e7c2c351da57769647ee (patch) | |
tree | d698bf30938119044877bbf74d7f2893cb25cec7 /ui/app/css/itcss/components/wallet-balance.scss | |
parent | 8a39941d9a4c5b6fd4a3715394fec10c400c0f34 (diff) | |
download | tangerine-wallet-browser-0fab1b54820aec01d3b4e7c2c351da57769647ee.tar.gz tangerine-wallet-browser-0fab1b54820aec01d3b4e7c2c351da57769647ee.tar.zst tangerine-wallet-browser-0fab1b54820aec01d3b4e7c2c351da57769647ee.zip |
Implement responsive wallet balances
Diffstat (limited to 'ui/app/css/itcss/components/wallet-balance.scss')
-rw-r--r-- | ui/app/css/itcss/components/wallet-balance.scss | 63 |
1 files changed, 63 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..03cc38a03 --- /dev/null +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -0,0 +1,63 @@ +$wallet-balance-bg: $gallery; +$wallet-balance-breakpoint: 890px; +$wallet-balance-breakpoint-range: + "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + +.wallet-balance { + background: inherit; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .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: 135%; + } + + .fiat-amount { + margin-top: 0.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: 45px; + height: 45px; + border: 1px solid $alto; + } +} + +.wallet-balance-wrapper-active { + background: $wallet-balance-bg; +}
\ No newline at end of file |