ui/app/components/transaction-list-item/index.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

.transaction-list-item {
  box-sizing: border-box;
  min-height: 74px;
  border-bottom: 1px solid $geyser;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: $white;

  &__grid {
    cursor: pointer;
    width: 100%;
    padding: 16px 20px;
    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) {
      padding: 8px 20px 12px;
      grid-template-columns: 45px 5fr 3fr;
      grid-template-areas:
        "nonce nonce nonce"
        "identicon action primary-amount"
        "identicon status secondary-amount";
    }

    &:hover {
      background: rgba($alto, .2);
    }
  }

  &__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;
    min-width: 0;
    max-width: 100%;

    &--primary {
      text-align: end;
      grid-area: primary-amount;
      align-self: end;
      justify-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;
      justify-self: end;
    }
  }

  &__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;
    }
  }

  &__expander {
    max-height: 0px;
    width: 100%;

    &--show {
      max-height: 1000px;
      transition: max-height 700ms ease-out;
    }
  }
}