diff options
Diffstat (limited to 'ui/app/css')
-rw-r--r-- | ui/app/css/itcss/components/modal.scss | 66 |
1 files changed, 50 insertions, 16 deletions
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 37d866983..4db560b21 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,4 +1,4 @@ -.modal-contents { +.modal-content { flex-direction: column; align-items: center; justify-content: center; @@ -7,12 +7,29 @@ } @media screen and (max-width: 575px) { - .buy-options { + .modal-content-title-wrapper { + justify-content: space-around; + width: 100%; + height: 100px; + } + + .modal-content.title { + font-size: 26px; + margin-top: 15px; + } + + .modal-content-options { flex-direction: column; padding: 5% 33%; } - div.buy-option { + .modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + div.modal-content-option { display: flex; flex-direction: column; width: 80vw; @@ -24,39 +41,56 @@ padding: 0% 7%; justify-content: space-around; - div.buy-option-title { + div.modal-content-option-title { font-size: 20px; } - div.buy-option-subtitle { + div.modal-content-option-subtitle { font-size: 16px; } } } @media screen and (min-width: 576px) { - .buy-options { + .modal-content-title-wrapper { + justify-content: space-around; + width: 100%; + height: 100px; + } + + .modal-content.title { + font-size: 26px; + margin-top: 15px; + } + + .modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + .modal-content-options { flex-direction: row; } - div.buy-option { + div.modal-content-option { display: flex; flex-direction: column; - width: 150px; - height: 135px; + width: 20vw; + height: 18vw; text-align: center; border-radius: 6px; border: 1px solid black; - padding: 0% 7%; + margin: 0px .5vw; + justify-content: space-around; - div.buy-option-title { - font-size: 1.55em; - margin-top: 22%; + div.modal-content-option-title { + font-size: 20px; } - div.buy-option-subtitle { - font-size: 0.95em; - margin-top: 15%; + div.modal-content-option-subtitle { + font-size: 16px; + padding: 0px 20px; } } } |