diff options
author | Le Quoc Viet <vietlq85@gmail.com> | 2018-03-15 16:11:42 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-15 16:11:42 +0800 |
commit | 04079455e36e48433cf8055c8f1f79e1e7e18298 (patch) | |
tree | d7de2a6603b67b56abacf09bee4d2bbbfe886b8f /ui/app/css/itcss/components/hero-balance.scss | |
parent | 5bdee96e73f65a0b369277e9c56b0afe5159e65b (diff) | |
parent | e2efc91aee64072c408ab509219dcbfb389c7609 (diff) | |
download | tangerine-wallet-browser-04079455e36e48433cf8055c8f1f79e1e7e18298.tar.gz tangerine-wallet-browser-04079455e36e48433cf8055c8f1f79e1e7e18298.tar.zst tangerine-wallet-browser-04079455e36e48433cf8055c8f1f79e1e7e18298.zip |
Merge pull request #1 from MetaMask/master
Merge from the source
Diffstat (limited to 'ui/app/css/itcss/components/hero-balance.scss')
-rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss new file mode 100644 index 000000000..a3f051361 --- /dev/null +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -0,0 +1,115 @@ +.hero-balance { + + @media screen and (max-width: $break-small) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + flex: 0 0 auto; + } + + @media screen and (min-width: $break-large) { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 2.3em 2.37em .8em; + flex: 0 0 auto; + } + + .balance-container { + display: flex; + margin: 0; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: $break-small) { + flex-direction: column; + flex: 0 0 auto; + } + + @media screen and (min-width: $break-large) { + flex-direction: row; + flex-grow: 3; + } + } + + .balance-display { + .token-amount { + color: $black; + } + + @media screen and (max-width: $break-small) { + text-align: center; + + .token-amount { + font-size: 1.75rem; + margin-top: 1rem; + } + + .fiat-amount { + font-size: 115%; + margin-top: 8.5%; + color: #a0a0a0; + } + } + + @media screen and (min-width: $break-large) { + margin-left: .8em; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 1.5rem; + } + + .fiat-amount { + margin-top: .25%; + font-size: 105%; + } + } + + @media #{$sub-mid-size-breakpoint-range} { + margin-left: .4em; + margin-right: .4em; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 1rem; + } + + .fiat-amount { + margin-top: .25%; + font-size: 1rem; + } + } + } + + .hero-balance-buttons { + + @media screen and (max-width: $break-small) { + width: 100%; + // height: 100px; // needed a round number to set the heights of the buttons inside + flex: 0 0 auto; + padding: 16px 0; + } + + @media screen and (min-width: $break-large) { + flex-grow: 2; + justify-content: flex-end; + } + } +} + +.hero-balance-button { + width: 6rem; + + @media #{$sub-mid-size-breakpoint-range} { + padding: 0.4rem; + width: 4rem; + display: flex; + flex: 1; + justify-content: center; + } +} |