From 78836b0ead0e1b2307a48868c109a5412effc78b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 13:31:58 -0230 Subject: Signature Request --- .../itcss/components/account-dropdown-mini.scss | 48 +++++ ui/app/css/itcss/components/index.scss | 4 + ui/app/css/itcss/components/request-signature.scss | 220 +++++++++++++++++++++ 3 files changed, 272 insertions(+) create mode 100644 ui/app/css/itcss/components/account-dropdown-mini.scss create mode 100644 ui/app/css/itcss/components/request-signature.scss (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss new file mode 100644 index 000000000..996993db7 --- /dev/null +++ b/ui/app/css/itcss/components/account-dropdown-mini.scss @@ -0,0 +1,48 @@ +.account-dropdown-mini { + height: 22px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + width: 124px; + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__list { + z-index: 1050; + position: absolute; + height: 180px; + width: 96pxpx; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + overflow-y: scroll; + } + + .account-list-item { + margin-top: 6px; + } + + .account-list-item__account-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 80px; + } + + .account-list-item__top-row { + margin: 0; + } + + .account-list-item__icon { + position: initial; + } +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 8ad014f62..03c59cacf 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -43,3 +43,7 @@ @import './tab-bar.scss'; @import './simple-dropdown.scss'; + +@import './request-signature.scss'; + +@import './account-dropdown-mini.scss'; diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss new file mode 100644 index 000000000..27882d83c --- /dev/null +++ b/ui/app/css/itcss/components/request-signature.scss @@ -0,0 +1,220 @@ +.request-signature { + &__container { + height: 619px; + width: 380px; + border-radius: 8px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + + @media screen and (max-width: $break-small) { + width: 100%; + top: 0; + box-shadow: none; + } + } + + &__header { + height: 64px; + width: 100%; + position: relative; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + } + + &__header-background { + position: absolute; + background-color: $athens-grey; + z-index: 2; + width: 100%; + height: 100%; + } + + &__header__text { + height: 29px; + width: 179px; + color: #5B5D67; + font-family: Roboto; + font-size: 22px; + font-weight: 300; + line-height: 29px; + z-index: 3; + } + + &__header__tip-container { + width: 100%; + display: flex; + justify-content: center; + } + + &__header__tip { + height: 25px; + width: 25px; + background: $athens-grey; + transform: rotate(45deg); + position: absolute; + bottom: -8px; + z-index: 1; + } + + &__account-info { + display: flex; + justify-content: space-between; + margin-top: 18px; + height: 69px; + } + + &__account { + color: $dusty-gray; + margin-left: 17px; + } + + &__account-text { + font-size: 14px; + } + + &__balance { + color: $dusty-gray; + margin-right: 17px; + width: 124px; + } + + &__balance-text { + text-align: right; + font-size: 14px; + } + + &__balance-value { + text-align: right; + margin-top: 2.5px; + } + + &__request-icon { + align-self: flex-end; + } + + &__body { + width: 100%; + } + + &__request-info { + display: flex; + justify-content: center; + } + + &__headline { + height: 48px; + width: 240px; + color: $tundora; + font-family: Roboto; + font-size: 18px; + font-weight: 300; + line-height: 24px; + text-align: center; + margin-top: 20px; + } + + &__notice { + height: 19px; + width: 105px; + color: #9B9B9B; + font-family: "Avenir Next"; + font-size: 14px; + line-height: 19px; + text-align: center; + margin-top: 21px; + margin-bottom: 11px; + width: 100%; + } + + &__rows { + height: 262px; + overflow-y: scroll; + overflow-x: hidden; + border-top: 1px solid $geyser; + + @media screen and (max-width: $break-small) { + height: 208px; + } + } + + // &__rows::-webkit-scrollbar { + // display: none; + // } + + &__row { + height: 74px; + display: flex; + flex-flow: column; + border-bottom: 1px solid $geyser; + } + + &__row-title { + height: 22px; + width: 80px; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + margin-top: 12px; + margin-left: 18px; + width: 100%; + } + + &__row-value { + height: 19px; + color: $scorpion; + font-family: Roboto; + font-size: 14px; + line-height: 19px; + margin-top: 6px; + margin-bottom: 15px; + margin-left: 18px; + width: 95%; + } + + &__footer { + height: 108px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; + font-size: 22px; + position: relative; + + &__cancel-button, + &__sign-button { + display: flex; + align-items: center; + justify-content: center; + flex: 1 0 auto; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + height: 55px; + line-height: 32px; + cursor: pointer; + border-radius: 2px; + box-shadow: none; + max-width: 162px; + } + + &__cancel-button { + background: none; + border: 1px solid $dusty-gray; + } + + &__sign-button { + background-color: $caribbean-green; + border-width: 0; + color: $white; + } + } +} \ No newline at end of file -- cgit v1.2.3