@reown/appkit-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
79 lines (69 loc) • 1.9 kB
JavaScript
import { css } from 'lit';
export default css `
:host {
height: 60px;
min-height: 60px;
}
:host > wui-flex {
cursor: pointer;
height: 100%;
display: flex;
column-gap: var(--wui-spacing-s);
padding: var(--wui-spacing-xs);
padding-right: var(--wui-spacing-l);
width: 100%;
background-color: transparent;
border-radius: var(--wui-border-radius-xs);
color: var(--wui-color-fg-250);
transition:
background-color var(--wui-ease-out-power-1) var(--wui-duration-lg),
opacity var(--wui-ease-out-power-1) var(--wui-duration-lg);
will-change: background-color, opacity;
}
@media (hover: hover) and (pointer: fine) {
:host > wui-flex:hover {
background-color: var(--wui-color-gray-glass-002);
}
:host > wui-flex:active {
background-color: var(--wui-color-gray-glass-005);
}
}
:host([disabled]) > wui-flex {
opacity: 0.6;
}
:host([disabled]) > wui-flex:hover {
background-color: transparent;
}
:host > wui-flex > wui-flex {
flex: 1;
}
:host > wui-flex > wui-image,
:host > wui-flex > .token-item-image-placeholder {
width: 40px;
max-width: 40px;
height: 40px;
border-radius: var(--wui-border-radius-3xl);
position: relative;
}
:host > wui-flex > .token-item-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
:host > wui-flex > wui-image::after,
:host > wui-flex > .token-item-image-placeholder::after {
position: absolute;
content: '';
inset: 0;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
border-radius: var(--wui-border-radius-l);
}
button > wui-icon-box[data-variant='square-blue'] {
border-radius: var(--wui-border-radius-3xs);
position: relative;
border: none;
width: 36px;
height: 36px;
}
`;
//# sourceMappingURL=styles.js.map