From 78836b0ead0e1b2307a48868c109a5412effc78b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 13:31:58 -0230 Subject: Signature Request --- ui/app/css/itcss/components/request-signature.scss | 220 +++++++++++++++++++++ 1 file changed, 220 insertions(+) create mode 100644 ui/app/css/itcss/components/request-signature.scss (limited to 'ui/app/css/itcss/components/request-signature.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 From ddf11011c9467209e6b9810dff2df84ea9e4a040 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 21:58:56 -0230 Subject: Signature request fixes. --- ui/app/css/itcss/components/request-signature.scss | 30 +++++++++------------- 1 file changed, 12 insertions(+), 18 deletions(-) (limited to 'ui/app/css/itcss/components/request-signature.scss') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 27882d83c..e9ba7dbfd 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -1,6 +1,5 @@ .request-signature { &__container { - height: 619px; width: 380px; border-radius: 8px; background-color: $white; @@ -11,6 +10,7 @@ align-items: center; font-family: Roboto; position: relative; + height: 100%; @media screen and (max-width: $break-small) { width: 100%; @@ -68,7 +68,7 @@ display: flex; justify-content: space-between; margin-top: 18px; - height: 69px; + margin-bottom: 20px; } &__account { @@ -97,11 +97,14 @@ } &__request-icon { - align-self: flex-end; + margin-top: 25px; } &__body { width: 100%; + height: 100%; + display: flex; + flex-flow: column; } &__request-info { @@ -122,42 +125,33 @@ } &__notice { - height: 19px; - width: 105px; color: #9B9B9B; font-family: "Avenir Next"; font-size: 14px; line-height: 19px; text-align: center; - margin-top: 21px; + margin-top: 41px; margin-bottom: 11px; width: 100%; } &__rows { - height: 262px; + height: 100%; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid $geyser; - - @media screen and (max-width: $break-small) { - height: 208px; - } + display: flex; + flex-flow: column; + padding-right: 4px; } - // &__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; @@ -169,7 +163,6 @@ } &__row-value { - height: 19px; color: $scorpion; font-family: Roboto; font-size: 14px; @@ -178,6 +171,7 @@ margin-bottom: 15px; margin-left: 18px; width: 95%; + overflow-wrap: break-word; } &__footer { -- cgit From fa95303e1efef03db6c44878b89ccca680639598 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 18:05:52 -0700 Subject: Sign Typed Request styling fixes --- ui/app/css/itcss/components/request-signature.scss | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components/request-signature.scss') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index e9ba7dbfd..ee54235d0 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -17,6 +17,10 @@ top: 0; box-shadow: none; } + + @media screen and (min-width: $break-large) { + max-height: 620px; + } } &__header { @@ -27,6 +31,7 @@ flex-flow: column; justify-content: center; align-items: center; + flex: 0 0 auto; } &__header-background { @@ -105,6 +110,8 @@ height: 100%; display: flex; flex-flow: column; + flex: 1 1 auto; + height: 0; } &__request-info { @@ -142,13 +149,11 @@ border-top: 1px solid $geyser; display: flex; flex-flow: column; - padding-right: 4px; } &__row { display: flex; flex-flow: column; - border-bottom: 1px solid $geyser; } &__row-title { @@ -167,21 +172,21 @@ font-family: Roboto; font-size: 14px; line-height: 19px; - margin-top: 6px; - margin-bottom: 15px; - margin-left: 18px; - width: 95%; + width: 100%; overflow-wrap: break-word; + border-bottom: 1px solid #d2d8dd; + padding: 6px 18px 15px; } &__footer { - height: 108px; width: 100%; display: flex; align-items: center; justify-content: space-evenly; font-size: 22px; position: relative; + flex: 0 0 auto; + border-top: 1px solid $geyser; &__cancel-button, &__sign-button { @@ -198,17 +203,20 @@ border-radius: 2px; box-shadow: none; max-width: 162px; + margin: 12px; } &__cancel-button { background: none; border: 1px solid $dusty-gray; + margin-right: 6px; } &__sign-button { background-color: $caribbean-green; border-width: 0; color: $white; + margin-left: 6px; } } } \ No newline at end of file -- cgit