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.
84 lines
1.7 KiB
84 lines
1.7 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { devices } from 'config/devices'
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { client } from 'features/AuthServiceApp/config/clients'
|
|
|
|
export const Wrapper = styled.div`
|
|
background-color: ${({ theme }) => theme.colors.inputs};
|
|
width: 100%;
|
|
height: 45px;
|
|
:not(:last-of-type) {
|
|
border-bottom: 0.5px solid ${({ theme }) => theme.colors.black40};
|
|
}
|
|
${client.styles.input}
|
|
`
|
|
|
|
export const Label = styled.label`
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-weight: normal;
|
|
font-size: 0.8rem;
|
|
line-height: 0.9rem;
|
|
letter-spacing: -0.01em;
|
|
${isMobileDevice
|
|
? css`
|
|
font-size: 12px;
|
|
`
|
|
: ''};
|
|
|
|
@media ${devices.tablet} {
|
|
font-size: 1.6rem;
|
|
}
|
|
`
|
|
|
|
const resetStyles = css`
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
:-webkit-autofill,
|
|
:-webkit-autofill:hover,
|
|
:-webkit-autofill:focus,
|
|
:-webkit-autofill:active {
|
|
background-clip: text;
|
|
/* stylelint-disable-next-line */
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: #fff;
|
|
caret-color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
`
|
|
|
|
export const InputStyled = styled.input`
|
|
${resetStyles}
|
|
|
|
padding: 0 16px;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
color: ${({ theme }) => theme.colors.white};
|
|
font-size: 16px;
|
|
letter-spacing: 0.1px;
|
|
|
|
::placeholder {
|
|
font-weight: normal;
|
|
width: 100%;
|
|
color: ${({ theme }) => theme.colors.white50};
|
|
font-style: normal;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
|
|
${({ type }) => (type === 'password'
|
|
? css`
|
|
padding-right: 0;
|
|
font-weight: 700;
|
|
letter-spacing: 6px;
|
|
`
|
|
: css`
|
|
font-weight: normal;
|
|
`
|
|
)};
|
|
`
|
|
|