git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Transactions/TransactionHistory.scss
333 lines 6.4 kB history raw
1@import 'style/shared/variables.scss';
3@mixin tx-row {
4 display: grid;
5 grid-template-areas: "icon info";
6 grid-template-columns: 24px auto;
7 grid-template-rows: auto;
8 column-gap: 16px;
9 margin-top: 8px;
10 margin-bottom: 8px;
11 padding-top: 8px;
12 padding-bottom: 8px;
15.transaction-history {
16 .loading {
17 &> svg {
18 width: 24px;
19 height: 24px;
20 }
21 }
23 .loading, .no-results {
24 width: 100%;
25 min-height: 500px;
26 display: flex;
27 flex-flow: column nowrap;
28 justify-content: center;
29 align-items: center;
30 color: rgba(0,0,0,0.6);
31 }
33 .transaction-header {
34 display: flex;
35 flex-flow: row nowrap;
36 justify-content: space-between;
37 width: 100%;
38 }
40 .transaction-dropdown {
41 font-size: 14px;
42 position: relative;
44 .selector {
45 font-family: "Source Code Pro", "Roboto mono", "Courier New", monospace;
46 }
48 .content-border {
49 .dropdown-content {
50 .entry, .current-address {
51 display: flex;
52 flex-direction: row;
53 justify-content: space-between;
54 align-items: center;
55 cursor: pointer;
57 padding: 8px 12px 8px 16px;
59 &:hover {
60 opacity: 0.8;
61 }
63 .sigil {
64 background-color: black;
65 height: 14px;
66 width: 14px;
67 padding: 4px;
68 border-radius: $small-border-radius;
69 }
70 }
72 .divider {
73 width: 100%;
74 height: 1px;
75 background-color: $light-gray;
76 }
77 }
78 }
79 }
81 .transaction-container {
82 width: 100%;
83 height: 550px;
84 overflow-y: scroll;
85 margin: -16px 0 -16px;
87 // hide the vertical scrollbar
88 -ms-overflow-style: none; /* IE and Edge */
89 scrollbar-width: none; /* Firefox */
90 &::-webkit-scrollbar {
91 display: none; /* Chrome */
92 }
93 }
96.address-row {
97 @include tx-row();
99 .icon {
100 grid-area: icon;
101 background-color: black;
102 border-radius: 2px;
103 width: 24px;
104 height: 24px;
105 }
107 .info {
108 grid-area: info;
109 display: flex;
110 flex-flow: column nowrap;
111 justify-content: center;
113 .address {
114 font-family: Source Code Pro;
115 font-size: 14px;
116 font-style: normal;
117 font-weight: 500;
118 line-height: 16px;
119 letter-spacing: 0em;
120 }
121 }
124.patp-row {
125 @include tx-row();
127 .icon {
128 grid-area: icon;
130 .sigil {
131 background-color: black;
132 border-radius: 2px;
133 padding: 6px;
134 }
135 }
137 .info {
138 grid-area: info;
139 display: flex;
140 flex-flow: column nowrap;
141 justify-content: center;
143 .patp {
144 font-family: Source Code Pro;
145 font-size: 14px;
146 font-style: normal;
147 font-weight: 500;
148 line-height: 16px;
149 letter-spacing: 0em;
150 }
151 }
154.transaction-row {
155 @include tx-row();
157 &.point-view {
158 padding: 8px;
159 border: 1px solid $light-gray;
160 border-radius: $large-border-radius;
161 margin-bottom: 16px;
162 }
164 .icon {
165 grid-area: icon;
166 padding-top: 6px;
168 svg {
169 height: 16px;
170 width: 16px;
171 }
172 }
174 .info {
175 grid-area: info;
176 }
178 .title-row {
179 display: flex;
180 flex-direction: row;
181 justify-content: space-between;
182 align-items: center;
183 margin-bottom: 8px;
185 .title {
186 font-family: Inter;
187 font-size: 14px;
188 font-style: normal;
189 font-weight: 400;
190 line-height: 24px;
191 letter-spacing: -0.011em;
192 }
194 .status {
195 .badge {
196 align-items: center;
197 background-color: black;
198 border-radius: 2px;
199 color: white;
200 display: flex;
201 flex-flow: row nowrap;
202 font-family: Inter;
203 font-size: 14px;
204 font-style: normal;
205 font-weight: 500;
206 justify-content: space-between;
207 letter-spacing: 0em;
208 line-height: 18px;
209 padding: 4px 8px;
210 text-align: center;
211 width: 78px;
213 svg {
214 height: 14px;
215 width: 14px;
216 padding-top: 4px;
217 path {
218 fill: white;
219 }
220 }
222 &.confirmed {
223 width: 92px;
224 background: #009F65;
225 }
227 &.sending {
228 width: 74px;
229 background: #00000033;
230 color: black;
232 svg {
233 path {
234 fill: black;
235 }
236 }
237 }
239 &.failed {
240 background-color: rgb(246,200,196);
241 color: rgb(236,81,66);
242 width: 62px;
244 span.icon-wrapper {
245 height: 16px;
246 width: 16px;
247 border-radius: 50%;
248 background-color: #FF4136;
249 }
251 svg {
252 padding-top: 1px;
254 path {
255 fill: white;
256 }
257 }
258 }
260 &.pending {
261 background-color: $rollup-yellow;
262 color: #000;
263 width: 100px;
264 width: 105px;
266 svg {
267 path {
268 fill: #000;
269 }
270 }
271 }
273 &.unknown {
274 width: 82px;
275 }
276 }
277 }
278 }
280 .info-row {
281 display: flex;
282 flex-direction: row;
283 justify-content: space-between;
284 align-items: center;
286 .hash-container {
287 display: flex;
288 flex-flow: row nowrap;
289 justify-content: space-between;
290 align-items: center;
291 width: 31%;
293 .etherscan {
294 font-size: 14px;
295 color: $dark-gray;
297 svg {
298 height: 18px;
299 width: 18px;
300 margin-bottom: -4px;
301 -ms-transform:rotate(315deg); /* IE9 */
302 -moz-transform: rotate(315deg); /* FF3.5/3.6 */
303 -o-transform: rotate(315deg); /* Opera 10.5 */
304 -webkit-transform: rotate(315deg); /* Saf3.1+ */
305 transform: rotate(315deg); /* Newer browsers */
307 path {
308 fill: $dark-gray;
309 }
310 }
311 }
312 }
314 .hash {
315 font-family: Source Code Pro;
316 font-size: 14px;
317 font-style: normal;
318 font-weight: 400;
319 line-height: 16px;
320 letter-spacing: -0.011em;
321 color: rgba(0,0,0,0.6);
322 }
324 .date {
325 font-family: Inter;
326 font-size: 14px;
327 font-style: normal;
328 font-weight: 400;
329 line-height: 16px;
330 letter-spacing: -0.011em;
331 }
332 }
333}