@reown/appkit-scaffold-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
60 lines (55 loc) • 1.68 kB
JavaScript
import { css } from 'lit';
export default css `
button {
padding: var(--wui-spacing-s);
border-radius: var(--wui-border-radius-xs);
border: none;
outline: none;
background-color: var(--wui-color-gray-glass-002);
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--wui-spacing-s);
transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: background-color;
}
button:hover {
background-color: var(--wui-color-gray-glass-005);
}
.provider-image {
width: var(--wui-spacing-3xl);
min-width: var(--wui-spacing-3xl);
height: var(--wui-spacing-3xl);
border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2));
position: relative;
overflow: hidden;
}
.provider-image::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2));
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
.network-icon {
width: var(--wui-spacing-m);
height: var(--wui-spacing-m);
border-radius: calc(var(--wui-spacing-m) / 2);
overflow: hidden;
box-shadow:
0 0 0 3px var(--wui-color-gray-glass-002),
0 0 0 3px var(--wui-color-modal-bg);
transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: box-shadow;
}
button:hover .network-icon {
box-shadow:
0 0 0 3px var(--wui-color-gray-glass-005),
0 0 0 3px var(--wui-color-modal-bg);
}
`;
//# sourceMappingURL=styles.js.map