diff options
Diffstat (limited to 'ui/app/css/itcss/components/confirm.scss')
| -rw-r--r-- | ui/app/css/itcss/components/confirm.scss | 154 |
1 files changed, 97 insertions, 57 deletions
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 36d1bdd9a..dc642c2bc 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -1,32 +1,43 @@ .confirm-screen-container { - position: absolute; + position: relative; align-items: center; + font-family: Roboto; + flex: 0 0 auto; + flex-flow: column nowrap; + box-shadow: 0 2px 4px 0 rgba($black, .08); + border-radius: 8px; @media screen and (max-width: 575px) { - margin-top: 35px; width: 100%; } @media screen and (min-width: 576px) { - margin-top: 6.9vh; + top: -26px; } } .confirm-screen-wrapper { + height: 100%; + width: 380px; + background-color: $white; display: flex; - flex-direction: column; + flex-flow: column nowrap; + z-index: 25; align-items: center; - z-index: 100; - top: 5%; - font-family: 'DIN NEXT'; - background: $white; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); - // padding: 20px 24px 32px; - color: $scorpion; - width: 100%; + font-family: Roboto; + position: relative; + overflow-y: auto; + overflow-x: hidden; + border-top-left-radius: 8px; + border-top-right-radius: 8px; - @media screen and (min-width: $break-large) { - width: 498px; + @media screen and (max-width: $break-small) { + width: 100%; + overflow-x: hidden; + overflow-y: auto; + top: 0; + box-shadow: none; + height: calc(100vh - 41px - 100px); } } @@ -39,27 +50,34 @@ margin: 0; } -.confirm-screen-wrapper > .confirm-screen-header { - - @media screen and (max-width: $break-small) { - margin-left: 8px; - } -} - .confirm-screen-header { - font-size: 26px; + height: 88px; + background-color: $athens-grey; position: relative; display: flex; - flex-flow: row nowrap; + justify-content: center; align-items: center; + font-size: 22px; + line-height: 29px; width: 100%; - padding: 20px 24px 0; + padding: 25px 0; + flex: 0 0 auto; @media screen and (max-width: $break-small) { font-size: 22px; } } +.confirm-screen-header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 71px; +} + .confirm-screen-title { line-height: 27px; @@ -70,12 +88,12 @@ } .confirm-screen-back-button { - background: $white; - border: 1px solid $dusty-gray; + background: transparent; + border: 1px solid $curious-blue; left: 24px; position: absolute; text-align: center; - color: $black; + color: $curious-blue; padding: 6px 13px 7px 12px; border-radius: 2px; height: 30px; @@ -93,14 +111,15 @@ .confirm-screen-account-name { margin-top: 12px; + font-size: 14px; + line-height: 19px; + color: $scorpion; + text-align: center; } -.confirm-screen-account-name, .confirm-screen-row-info { font-size: 16px; - line-height: 24px; - color: $scorpion; - text-align: center; + line-height: 21px; } .confirm-screen-account-number { @@ -113,6 +132,7 @@ .confirm-screen-identicons { margin-top: 24px; + flex: 0 0 auto; i.fa-arrow-right { align-self: start; @@ -132,34 +152,34 @@ } .confirm-screen-send-amount { - font-size: 64px; color: $scorpion; margin-top: 12px; - line-height: 60px; text-align: center; - font-family: 'DIN NEXT Light'; + font-size: 40px; + font-weight: 300; + line-height: 53px; + flex: 0 0 auto; } .confirm-screen-send-amount-currency { font-size: 20px; line-height: 20px; text-align: center; + flex: 0 0 auto; } .confirm-memo-wrapper { min-height: 24px; width: 100%; border-bottom: 1px solid $alto; + flex: 0 0 auto; } .confirm-screen-send-memo { - color: $dusty-gray; + color: $scorpion; font-size: 16px; - line-height: 24px; - text-align: center; - margin-top: 21px; - margin-bottom: 18px; - font-family: 'DIN NEXT Light'; + line-height: 19px; + font-weight: 400; } .confirm-screen-label { @@ -180,7 +200,7 @@ section .confirm-screen-account-number, display: flex; flex-flow: column nowrap; width: 100%; - padding: 0 24px 32px; + flex: 0 0 auto; } .confirm-screen-section-column { @@ -191,24 +211,26 @@ section .confirm-screen-account-number, display: flex; flex-flow: row nowrap; border-bottom: 1px solid $alto; - width: calc(100% - 24px); + width: 100%; align-items: center; - padding: 12px 0; - margin: 0 12px; + padding: 12px; + padding-left: 35px; + font-size: 16px; + line-height: 22px; + font-weight: 300; } .confirm-screen-row-detail { font-size: 12px; line-height: 16px; color: $dusty-gray; - font-family: 'DIN NEXT Light'; } .confirm-screen-total-box { background-color: $wild-sand; - border-radius: 8px; - padding: 22px 14px; - margin-top: 13px; + padding: 20px; + padding-left: 35px; + border-bottom: 1px solid $alto; .confirm-screen-label { line-height: 18px; @@ -219,44 +241,62 @@ section .confirm-screen-account-number, } &__subtitle { - font-size: 14px; - line-height: 20px; - font-family: 'DIN NEXT Light'; + font-size: 12px; + line-height: 22px; + } + + .confirm-screen-row-info { + font-size: 16px; + font-weight: 500; + line-height: 21px; } } .confirm-screen-confirm-button { height: 62px; - width: 216.88px; border-radius: 2px; background-color: #02c9b1; font-size: 16px; color: $white; text-align: center; - font-family: 'DIN NEXT'; + font-family: Roboto; padding-top: 15px; padding-bottom: 15px; - margin-top: 23px; border-width: 0; box-shadow: none; + flex: 1 0 auto; + font-weight: 300; } .btn-light.confirm-screen-cancel-button { height: 62px; - width: 216.88px; background: none; border: none; opacity: 1; - width: 8em; - font-family: 'DIN NEXT'; + font-family: Roboto; border-width: 0; padding-top: 15px; padding-bottom: 15px; font-size: 16px; + line-height: 32px; box-shadow: none; cursor: pointer; + flex: 1 0 auto; + font-weight: 300; } #pending-tx-form { flex: 1 0 auto; + position: relative; + display: flex; + flex-flow: row nowrap; + background-color: $white; + padding: 19px 18px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + + + @media screen and (max-width: $break-small) { + border-top: 1px solid $alto; + } } |