@reown/appkit-scaffold-ui
Version:
The full stack toolkit to build onchain app UX.
94 lines (82 loc) • 2.1 kB
JavaScript
import { css } from '@reown/appkit-ui';
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 {
border-radius: calc(
${({ borderRadius }) => borderRadius['1']} * 9 - ${({ borderRadius }) => borderRadius['3']}
);
position: relative;
overflow: hidden;
}
wui-visual::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
border-radius: calc(
${({ borderRadius }) => borderRadius['1']} * 9 - ${({ borderRadius }) => borderRadius['3']}
);
box-shadow: inset 0 0 0 1px ${({ tokens }) => tokens.core.glass010};
}
wui-icon-box {
position: absolute;
right: calc(${({ spacing }) => spacing['1']} * -1);
bottom: calc(${({ spacing }) => spacing['1']} * -1);
opacity: 0;
transform: scale(0.5);
transition:
opacity ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-2']},
transform ${({ durations }) => durations['lg']}
${({ easings }) => easings['ease-out-power-2']};
will-change: opacity, transform;
}
wui-text[align='center'] {
width: 100%;
padding: 0px ${({ spacing }) => spacing['4']};
}
[data-error='true'] wui-icon-box {
opacity: 1;
transform: scale(1);
}
[data-error='true'] > wui-flex:first-child {
animation: shake 250ms ${({ easings }) => easings['ease-out-power-2']} both;
}
[data-retry='false'] wui-link {
display: none;
}
[data-retry='true'] wui-link {
display: block;
opacity: 1;
}
wui-link {
padding: ${({ spacing }) => spacing['01']} ${({ spacing }) => spacing['2']};
}
.capitalize {
text-transform: capitalize;
}
`;
//# sourceMappingURL=styles.js.map