diff options
Diffstat (limited to 'ui/app/components/transaction-list-item/index.scss')
-rw-r--r-- | ui/app/components/transaction-list-item/index.scss | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss new file mode 100644 index 000000000..9c53c8960 --- /dev/null +++ b/ui/app/components/transaction-list-item/index.scss @@ -0,0 +1,117 @@ +.transaction-list-item { + box-sizing: border-box; + min-height: 74px; + padding: 8px 20px; + border-bottom: 1px solid $geyser; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + @media screen and (max-width: $break-small) { + padding: 8px 20px 12px; + } + + &:hover { + background: rgba($alto, .2); + } + + &__grid { + width: 100%; + display: grid; + grid-template-columns: 45px 1fr 1fr 1fr; + grid-template-areas: + "identicon action status primary-amount" + "identicon nonce status secondary-amount"; + + @media screen and (max-width: $break-small) { + grid-template-columns: 45px 5fr 3fr; + grid-template-areas: + "nonce nonce nonce" + "identicon action primary-amount" + "identicon status secondary-amount"; + } + } + + &__identicon { + grid-area: identicon; + grid-row: 1 / span 2; + align-self: center; + + @media screen and (max-width: $break-small) { + grid-row: 2 / span 2; + } + } + + &__action { + text-transform: capitalize; + padding: 0 8px 2px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + grid-area: action; + align-self: end; + } + + &__status { + grid-area: status; + grid-row: 1 / span 2; + align-self: center; + + @media screen and (max-width: $break-small) { + grid-row: 3; + } + } + + &__nonce { + font-size: .75rem; + color: #5e6064; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + grid-area: nonce; + align-self: start; + + @media screen and (max-width: $break-small) { + padding-bottom: 4px; + } + } + + &__amount { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &--primary { + text-align: end; + grid-area: primary-amount; + align-self: end; + + @media screen and (max-width: $break-small) { + padding-bottom: 2px; + } + } + + &--secondary { + text-align: end; + font-size: .75rem; + color: #5e6064; + grid-area: secondary-amount; + align-self: start; + } + } + + &__retry { + background: #d1edff; + border-radius: 12px; + font-size: .75rem; + padding: 4px 12px; + cursor: pointer; + margin-top: 8px; + + @media screen and (max-width: $break-small) { + font-size: .5rem; + } + } +} |