diff options
| author | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-09 08:11:25 +0800 |
|---|---|---|
| committer | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-09 08:11:25 +0800 |
| commit | 928adae1042addb8cf123879dd8ec50928ac456f (patch) | |
| tree | 8802bda6967e7bd5e94db9700e1d934128497581 /ui/app/css | |
| parent | 922a272e811ad104c2d7b7d4c0912a4d629ec2e7 (diff) | |
| download | tangerine-wallet-browser-928adae1042addb8cf123879dd8ec50928ac456f.tar.gz tangerine-wallet-browser-928adae1042addb8cf123879dd8ec50928ac456f.tar.zst tangerine-wallet-browser-928adae1042addb8cf123879dd8ec50928ac456f.zip | |
Implement modal content for buy flow - mobile view
Diffstat (limited to 'ui/app/css')
| -rw-r--r-- | ui/app/css/itcss/components/index.scss | 1 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/modal.scss | 67 |
2 files changed, 63 insertions, 5 deletions
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 8b6698eed..2385866c1 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -3,6 +3,7 @@ @import './footer.scss'; @import './identicon.scss'; @import './network.scss'; +@import './modal.scss'; @import './newui-sections.scss'; @import './hero-balance.scss'; @import './sections.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 74e551ab7..37d866983 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,5 +1,62 @@ -.modal { - // first child - component - // second child - background - // boron should provide them, but we need breakpoints -}
\ No newline at end of file +.modal-contents { + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + font-family: 'DIN OT'; +} + +@media screen and (max-width: 575px) { + .buy-options { + flex-direction: column; + padding: 5% 33%; + } + + div.buy-option { + display: flex; + flex-direction: column; + width: 80vw; + height: 15vh; + margin: 10px; + text-align: center; + border-radius: 6px; + border: 1px solid black; + padding: 0% 7%; + justify-content: space-around; + + div.buy-option-title { + font-size: 20px; + } + + div.buy-option-subtitle { + font-size: 16px; + } + } +} + +@media screen and (min-width: 576px) { + .buy-options { + flex-direction: row; + } + + div.buy-option { + display: flex; + flex-direction: column; + width: 150px; + height: 135px; + text-align: center; + border-radius: 6px; + border: 1px solid black; + padding: 0% 7%; + + div.buy-option-title { + font-size: 1.55em; + margin-top: 22%; + } + + div.buy-option-subtitle { + font-size: 0.95em; + margin-top: 15%; + } + } +} |