diff options
Diffstat (limited to 'ui/app/css/itcss/components/transaction-list.scss')
-rw-r--r-- | ui/app/css/itcss/components/transaction-list.scss | 270 |
1 files changed, 270 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss new file mode 100644 index 000000000..a5d508f11 --- /dev/null +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -0,0 +1,270 @@ +.tx-list-container { + height: 87.5%; + + @media screen and (min-width: $break-large) { + overflow-y: scroll; + } +} + +.tx-list-header { + text-transform: capitalize; +} + +@media screen and (max-width: $break-small) { + .tx-list-header-wrapper { + margin-top: .2em; + margin-bottom: .6em; + // TODO: Resolve Layout Conflicst in Wallet View + // - This fixes txlist "transactions" title dispay + // margin-top: 0.2em; + // margin-bottom: 0.6em; + justify-content: center; + flex: 0 0 auto; + } + + .tx-list-header { + align-self: center; + font-size: 12px; + color: $dusty-gray; + font-family: Roboto; + text-transform: uppercase; + } +} + +@media screen and (min-width: $break-large) { + .tx-list-header-wrapper { + flex: 0 0 55px; + } + + .tx-list-header { + font-size: 16px; + margin: 1.5em 2.37em; + } + + .tx-list-container::-webkit-scrollbar { + display: none; + } +} + +.tx-list-content-divider { + height: 1px; + background: rgb(231, 231, 231); + flex: 0 0 1px; + + @media screen and (max-width: $break-small) { + margin: .1em 0; + } + + @media screen and (min-width: $break-large) { + margin: .1em 2.37em; + } +} + +.tx-list-item-wrapper { + flex: 1 1 auto; + width: 0; + align-items: stretch; + justify-content: flex-start; + display: flex; + flex-flow: column nowrap; + + @media screen and (max-width: $break-small) { + padding: 0 1.3em .8em; + } + + @media screen and (min-width: $break-large) { + padding-bottom: 12px; + } +} + +.tx-list-clickable { + cursor: pointer; + + &:hover { + background: rgba($alto, .2); + } +} + +.tx-list-pending-item-container { + cursor: pointer; + opacity: .5; +} + +.tx-list-date-wrapper { + flex: 1 1 auto; + + @media screen and (max-width: $break-small) { + margin-top: 6px; + } + + @media screen and (min-width: $break-large) { + margin-top: 12px; + } +} + +.tx-list-content-wrapper { + align-items: stretch; + margin-bottom: 4px; + margin-top: 2px; + flex: 1 0 auto; + width: 100%; + display: flex; + flex-flow: row nowrap; + + @media screen and (max-width: $break-small) { + font-size: 12px; + + .tx-list-status { + font-size: 14px !important; + } + + .tx-list-account { + font-size: 14px !important; + } + + .tx-list-value { + font-size: 14px; + line-height: 18px; + } + + .tx-list-fiat-value { + font-size: 12px; + line-height: 16px; + } + } +} + +.tx-list-date { + color: $dusty-gray; + font-size: 12px; + font-family: Roboto; +} + +.tx-list-identicon-wrapper { + align-self: center; + flex: 0 0 auto; + margin-right: 16px; +} + +.tx-list-account-and-status-wrapper { + display: flex; + flex: 1 1 auto; + flex-flow: row wrap; + width: 0; + + @media screen and (max-width: $break-small) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: center; + + .tx-list-account-wrapper { + height: 18px; + + .tx-list-account { + line-height: 14px; + } + } + } + + @media screen and (min-width: $break-large) { + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .tx-list-account-wrapper { + flex: 1.3 2 auto; + min-width: 153px; + } + + .tx-list-status-wrapper { + flex: 6 6 auto; + } + } + + .tx-list-account { + font-size: 16px; + color: $scorpion; + } + + .tx-list-status { + color: $dusty-gray; + font-size: 16px; + text-transform: capitalize; + } + + .tx-list-status--rejected, + .tx-list-status--failed { + color: $monzo; + } +} + +.tx-list-item { + border-top: 1px solid rgb(231, 231, 231); + flex: 0 0 auto; + display: flex; + flex-flow: row nowrap; + + @media screen and (max-width: $break-small) { + // margin: 0 1.3em .95em; !important + } + + @media screen and (min-width: $break-large) { + margin: 0 2.37em; + } + + &:last-of-type { + border-bottom: 1px solid rgb(231, 231, 231); + margin-bottom: 32px; + } + + &__wrapper { + align-self: center; + flex: 2 2 auto; + color: $dusty-gray; + + .tx-list-value { + font-size: 16px; + text-align: right; + } + + .tx-list-value--confirmed { + color: $caribbean-green; + } + + .tx-list-fiat-value { + font-size: 12px; + text-align: right; + } + } + + &--empty { + text-align: center; + border-bottom: none !important; + padding: 16px; + } +} + +.tx-list-details-wrapper { + overflow: hidden; + flex: 0 0 35%; +} + +.tx-list-value { + font-size: 16px; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tx-list-fiat-value { + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tx-list-value--confirmed { + color: $caribbean-green; +} |