@reown/appkit-scaffold-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
91 lines (79 loc) • 1.95 kB
JavaScript
import { css } from 'lit';
export default css `
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(3px);
}
50% {
transform: translateX(-3px);
}
75% {
transform: translateX(3px);
}
100% {
transform: translateX(0);
}
}
wui-flex:first-child:not(:only-child) {
position: relative;
}
wui-loading-thumbnail {
position: absolute;
}
wui-visual {
width: var(--wui-wallet-image-size-lg);
height: var(--wui-wallet-image-size-lg);
border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
position: relative;
overflow: hidden;
}
wui-visual::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
wui-icon-box {
position: absolute;
right: calc(var(--wui-spacing-3xs) * -1);
bottom: calc(var(--wui-spacing-3xs) * -1);
opacity: 0;
transform: scale(0.5);
transition:
opacity var(--wui-ease-out-power-2) var(--wui-duration-lg),
transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
will-change: opacity, transform;
}
wui-text[align='center'] {
width: 100%;
padding: 0px var(--wui-spacing-l);
}
[data-error='true'] wui-icon-box {
opacity: 1;
transform: scale(1);
}
[data-error='true'] > wui-flex:first-child {
animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
[data-retry='false'] wui-link {
display: none;
}
[data-retry='true'] wui-link {
display: block;
opacity: 1;
}
wui-link {
padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs);
}
.capitalize {
text-transform: capitalize;
}
`;
//# sourceMappingURL=styles.js.map