diff options
Diffstat (limited to 'ui/app/css/itcss/components/hero-balance.scss')
-rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 114 |
1 files changed, 114 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..bdbdd2645 --- /dev/null +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -0,0 +1,114 @@ +.hero-balance { + + @media screen and (max-width: $break-small) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin: .3em .9em 0; + // height: 80vh; + // max-height: 225px; + 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.8em 2.37em .8em; + } + + .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 { + + @media screen and (max-width: $break-small) { + text-align: center; + + .token-amount { + font-size: 175%; + margin-top: 12.5%; + } + + .fiat-amount { + font-size: 115%; + margin-top: 8.5%; + color: #a0a0a0; + } + } + + @media screen and (min-width: $break-large) { + margin-left: 3%; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 135%; + } + + .fiat-amount { + margin-top: .25%; + font-size: 105%; + } + } + } + + .balance-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + } + + .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; + } + + button.btn-clear { + background: $white; + border: 1px solid; + border-radius: 2px; + font-size: 12px; + + @media screen and (max-width: $break-small) { + border-color: $curious-blue; + color: $curious-blue; + height: 36px; + } + + @media screen and (min-width: $break-large) { + border-color: $curious-blue; + color: $curious-blue; + padding: 0; + width: 85px; + height: 34px; + } + } + } +} |