diff options
Diffstat (limited to 'ui/app/css/itcss/components/confirm.scss')
-rw-r--r-- | ui/app/css/itcss/components/confirm.scss | 324 |
1 files changed, 324 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss new file mode 100644 index 000000000..878495290 --- /dev/null +++ b/ui/app/css/itcss/components/confirm.scss @@ -0,0 +1,324 @@ +.confirm-screen-container { + position: relative; + align-items: center; + font-family: Roboto; + flex: 1 0 auto; + flex-flow: column nowrap; + box-shadow: 0 2px 4px 0 rgba($black, .08); + border-radius: 8px; + display: flex; + + @media screen and (max-width: 575px) { + width: 100%; + box-shadow: initial; + } + + @media screen and (min-width: 576px) { + // top: -26px; + } +} + +.notification { + .confirm-screen-wrapper { + + @media screen and (max-width: $break-small) { + height: calc(100vh - 85px); + } + } +} + +.confirm-screen-wrapper { + height: 100%; + width: 380px; + background-color: $white; + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + overflow-y: auto; + overflow-x: hidden; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + + @media screen and (max-width: $break-small) { + width: 100%; + overflow-x: hidden; + overflow-y: auto; + top: 0; + box-shadow: none; + height: calc(100vh - 58px - 85px); + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +.confirm-screen-wrapper > .confirm-screen-total-box { + margin-left: 10px; + margin-right: 10px; +} + +.confirm-screen-wrapper > .confirm-memo-wrapper { + margin: 0; +} + +.confirm-screen-header { + height: 88px; + background-color: $athens-grey; + position: relative; + display: flex; + justify-content: center; + align-items: center; + font-size: 22px; + line-height: 29px; + width: 100%; + padding: 25px 0; + flex: 0 0 auto; + + @media screen and (max-width: $break-small) { + font-size: 20px; + } +} + +.confirm-screen-header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + top: 71px; + left: 0; + right: 0; + margin: 0 auto; +} + +.confirm-screen-title { + line-height: 27px; + + @media screen and (max-width: $break-small) { + margin-left: 22px; + margin-right: 8px; + } +} + +.confirm-screen-back-button { + color: $curious-blue; + font-family: Roboto; + font-size: 1rem; + position: absolute; + top: 38px; + right: 38px; + background: none; +} + +.confirm-screen-account-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} + +.confirm-screen-account-name { + margin-top: 12px; + font-size: 14px; + line-height: 19px; + color: $scorpion; + text-align: center; +} + +.confirm-screen-row-info { + font-size: 16px; + line-height: 21px; +} + +.confirm-screen-account-number { + font-size: 10px; + line-height: 16px; + color: $dusty-gray; + text-align: center; + height: 16px; +} + +.confirm-send-ether, +.confirm-send-token { + i.fa-arrow-right { + align-self: start; + margin: 24px 14px 0 !important; + } +} + +.confirm-screen-identicons { + margin-top: 24px; + flex: 0 0 auto; + + i.fa-arrow-right { + align-self: start; + margin: 42px 14px 0; + } + + i.fa-file-text-o { + font-size: 60px; + margin: 16px 8px 0 8px; + text-align: center; + } +} + +.confirm-screen-sending-to-message { + text-align: center; + font-size: 16px; + margin-top: 30px; + font-family: 'DIN NEXT Light'; +} + +.confirm-screen-send-amount { + color: $scorpion; + margin-top: 12px; + text-align: center; + 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: $scorpion; + font-size: 16px; + line-height: 19px; + font-weight: 400; +} + +.confirm-screen-label { + font-size: 18px; + line-height: 40px; + color: $scorpion; + text-align: left; +} + +section .confirm-screen-account-name, +section .confirm-screen-account-number, +.confirm-screen-row-info, +.confirm-screen-row-detail { + text-align: left; +} + +.confirm-screen-rows { + display: flex; + flex-flow: column nowrap; + width: 100%; + flex: 0 0 auto; +} + +.confirm-screen-section-column { + flex: .5; +} + +.confirm-screen-row { + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid $alto; + width: 100%; + align-items: center; + 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; +} + +.confirm-screen-total-box { + background-color: $wild-sand; + padding: 20px; + padding-left: 35px; + border-bottom: 1px solid $alto; + + .confirm-screen-label { + line-height: 18px; + } + + .confirm-screen-row-detail { + color: $scorpion; + } + + &__subtitle { + font-size: 12px; + line-height: 22px; + } + + .confirm-screen-row-info { + font-size: 16px; + font-weight: 500; + line-height: 21px; + } +} + +.confirm-screen-confirm-button { + height: 50px; + border-radius: 4px; + background-color: #02c9b1; + font-size: 16px; + color: $white; + text-align: center; + font-family: Roboto; + padding-top: 15px; + padding-bottom: 15px; + border-width: 0; + box-shadow: none; + flex: 1 0 auto; + font-weight: 300; + margin: 0 5px; +} + +.btn-light.confirm-screen-cancel-button { + height: 50px; + background: none; + border: none; + opacity: 1; + font-family: Roboto; + border-width: 0; + padding-top: 15px; + padding-bottom: 15px; + font-size: 16px; + box-shadow: none; + cursor: pointer; + flex: 1 0 auto; + font-weight: 300; + margin: 0 5px; +} + +#pending-tx-form { + flex: 1 0 auto; + position: relative; + display: flex; + flex-flow: row nowrap; + background-color: $white; + padding: 12px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + width: 100%; + + @media screen and (max-width: $break-small) { + border-top: 1px solid $alto; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} |