@reown/appkit-scaffold-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
64 lines (56 loc) • 1.64 kB
JavaScript
import { css } from 'lit';
export default css `
button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
width: 104px;
row-gap: var(--wui-spacing-xs);
padding: var(--wui-spacing-s) var(--wui-spacing-0);
background-color: var(--wui-color-gray-glass-002);
border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
transition:
color var(--wui-duration-lg) var(--wui-ease-out-power-1),
background-color var(--wui-duration-lg) var(--wui-ease-out-power-1),
border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1);
will-change: background-color, color, border-radius;
outline: none;
border: none;
}
button > wui-flex > wui-text {
color: var(--wui-color-fg-100);
max-width: 86px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
justify-content: center;
}
button > wui-flex > wui-text.certified {
max-width: 66px;
}
button:hover:enabled {
background-color: var(--wui-color-gray-glass-005);
}
button:disabled > wui-flex > wui-text {
color: var(--wui-color-gray-glass-015);
}
[data-selected='true'] {
background-color: var(--wui-color-accent-glass-020);
}
@media (hover: hover) and (pointer: fine) {
[data-selected='true']:hover:enabled {
background-color: var(--wui-color-accent-glass-015);
}
}
[data-selected='true']:active:enabled {
background-color: var(--wui-color-accent-glass-010);
}
@media (max-width: 350px) {
button {
width: 100%;
}
}
`;
//# sourceMappingURL=styles.js.map