1
0
Fork 0
blog/src/features/Web3/components/TokenSelect/Token.css

82 lines
1.4 KiB
CSS
Raw Normal View History

2023-10-28 18:08:46 +02:00
.Token {
2023-10-26 21:32:57 +02:00
font-size: var(--font-size-small);
line-height: 1;
color: var(--text-color);
display: flex;
align-items: center;
2023-10-28 13:55:30 +02:00
padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2)
calc(var(--spacer) / 3) 25px;
2023-10-26 21:32:57 +02:00
position: relative;
user-select: none;
}
2023-10-28 18:08:46 +02:00
.Token[data-disabled] {
2023-10-26 21:32:57 +02:00
opacity: 0.5;
pointer-events: none;
}
2023-10-28 18:08:46 +02:00
.Token[data-highlighted] {
2023-10-26 21:32:57 +02:00
outline: none;
2023-10-28 18:08:46 +02:00
background-color: var(--box-background-color);
2023-10-26 21:32:57 +02:00
}
2023-10-28 18:08:46 +02:00
.TokenLogo {
2024-03-14 14:18:21 +01:00
width: 32px;
height: 32px;
2023-10-26 21:32:57 +02:00
border-radius: 50%;
2023-10-28 18:08:46 +02:00
margin-right: calc(var(--spacer) / 4);
2023-10-26 21:32:57 +02:00
border: 1px solid var(--border-color);
2023-10-28 19:01:36 +02:00
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-mini);
2024-03-14 14:18:21 +01:00
position: relative;
2023-10-28 18:08:46 +02:00
}
2024-03-14 14:18:21 +01:00
.TokenLogoImage {
2023-10-28 18:08:46 +02:00
margin: 0;
border-radius: 50%;
2023-10-28 13:55:30 +02:00
}
2024-03-14 14:18:21 +01:00
.TokenChainLogo {
width: 16px;
height: 16px;
position: absolute;
bottom: -5px;
right: -5px;
border-radius: 50%;
border: 2px solid var(--border-color);
}
2023-10-28 13:55:30 +02:00
.TokenName,
.TokenBalance {
margin: 0;
2024-03-12 22:20:40 +01:00
text-align: left;
2023-10-28 13:55:30 +02:00
}
.TokenName {
font-size: var(--font-size-base);
transition: none;
}
.TokenBalance {
font-size: var(--font-size-small);
2023-10-28 18:08:46 +02:00
}
.TokenValue {
font-size: var(--font-size-small);
display: inline-flex;
align-self: flex-start;
margin-left: auto;
padding-left: calc(var(--spacer) * 2);
2023-10-26 21:32:57 +02:00
}
.SelectItemIndicator {
position: absolute;
left: 0;
width: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
}