You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.9 KiB
78 lines
1.9 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
export type TInputWrapper = {
|
|
paddingX?: number,
|
|
wrapperWidth?: number,
|
|
}
|
|
|
|
export const wrapperStyles = css<TInputWrapper>`
|
|
width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')};
|
|
height: 48px;
|
|
margin: 20px 0;
|
|
padding-left: ${({ paddingX = 24 }) => (paddingX ? `${paddingX}px` : '')};
|
|
padding-right: ${({ paddingX = 24 }) => (paddingX ? `${paddingX}px` : '')};
|
|
padding-top: 13px;
|
|
padding-bottom: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #3F3F3F;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
|
border-radius: 2px;
|
|
`
|
|
|
|
export const InputWrapper = styled.div<TInputWrapper>`
|
|
${wrapperStyles}
|
|
`
|
|
|
|
type TLabel = {
|
|
labelWidth?: number,
|
|
}
|
|
|
|
export const Label = styled.label<TLabel>`
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: -0.01em;
|
|
padding-top: 2px;
|
|
color: ${({ theme: { colors } }) => colors.secondary};
|
|
width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
|
|
`
|
|
|
|
type TInputStyled = {
|
|
inputWidth?: number,
|
|
}
|
|
|
|
export const inputStyles = css<TInputStyled>`
|
|
flex-grow: 1;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
width: ${({ inputWidth }) => (inputWidth ? `${inputWidth}px` : '')};
|
|
background-color: transparent;
|
|
border: transparent;
|
|
margin-left: 24px;
|
|
color: ${({ theme: { colors } }) => colors.text};
|
|
|
|
&[type='password'] {
|
|
letter-spacing: 6px;
|
|
}
|
|
|
|
:focus {
|
|
border-color: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
:-webkit-autofill,
|
|
:-webkit-autofill:hover,
|
|
:-webkit-autofill:focus,
|
|
:-webkit-autofill:active {
|
|
box-shadow: 0 0 0 30px #3F3F3F inset;
|
|
caret-color: ${({ theme: { colors } }) => colors.text};
|
|
-webkit-text-fill-color: ${({ theme: { colors } }) => colors.text};
|
|
}
|
|
`
|
|
|
|
export const InputStyled = styled.input<TInputStyled>`
|
|
${inputStyles}
|
|
`
|
|
|