@reown/appkit-ui
Version:
The full stack toolkit to build onchain app UX.
56 lines (51 loc) • 1.77 kB
JavaScript
import { css } from '../../utils/ThemeHelperUtil.js';
export default css `
:host {
position: relative;
display: inline-block;
}
input {
width: 48px;
height: 48px;
background: ${({ tokens }) => tokens.theme.foregroundPrimary};
border-radius: ${({ borderRadius }) => borderRadius[4]};
border: 1px solid ${({ tokens }) => tokens.theme.borderPrimary};
font-family: ${({ fontFamily }) => fontFamily.regular};
font-size: ${({ textSize }) => textSize.large};
line-height: 18px;
letter-spacing: -0.16px;
text-align: center;
color: ${({ tokens }) => tokens.theme.textPrimary};
caret-color: ${({ tokens }) => tokens.core.textAccentPrimary};
transition:
background-color ${({ durations }) => durations['lg']}
${({ easings }) => easings['ease-out-power-2']},
border-color ${({ durations }) => durations['lg']}
${({ easings }) => easings['ease-out-power-2']},
box-shadow ${({ durations }) => durations['lg']}
${({ easings }) => easings['ease-out-power-2']};
will-change: background-color, border-color, box-shadow;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: textfield;
padding: ${({ spacing }) => spacing[4]};
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:disabled {
cursor: not-allowed;
opacity: 0.5;
}
input:focus-visible:enabled {
background-color: transparent;
border: 1px solid ${({ tokens }) => tokens.theme.borderSecondary};
box-shadow: 0px 0px 0px 4px ${({ tokens }) => tokens.core.foregroundAccent040};
}
`;
//# sourceMappingURL=styles.js.map