@npm.tangocode/tc_ui_components/src/components/TextInput/style.ts

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

import styled , { StyledComponentClass } from 'styled-components';
import { TextInput } from '.';
import { COLOR_PALETTE } from '../../constants/colors';
import { FONTS } from "../../constants/fonts";
import { ICON_CODE } from "../../constants/iconCodes";
import * as React from 'react';

export const InputContainer = styled.div`
    display: flex;
    flex-flow: column;
    width:100%;
`;

export interface LabelTextProps {
    inputStyle?: string;
    displayElement?: boolean;
    isFocused?: boolean;
    readOnly?: boolean;
}
export const Input = styled.input`
    font-size: 14px;
    width: 100%;
    font-family: "${FONTS.HELVETICA}";
	letter-spacing: 1px;
	text-align: left;
    color: ${(props: LabelTextProps) => (props.readOnly ? COLOR_PALETTE.BLUE_LIGHT_3 : COLOR_PALETTE.GREY_DARK_1)};
    border: none;
    outline: none;
    border-bottom: 2px solid ${COLOR_PALETTE.BLUE_LIGHT_1};
    background-color: transparent;
    position: relative;
    ::placeholder{
        color: ${COLOR_PALETTE.BLUE_LIGHT_1};
    }
`;

export const LabelContainer = styled.div`
    display:flex;
    margin-bottom:6px;
`;

export const Button = styled.button`
    display: inline-block;
    opacity: ${(props: LabelTextProps) => (props.displayElement) ? 1 : 0 };

    font-family: "${FONTS.HELVETICA}";
    font-weight: bold;
    cursor: pointer;
    outline: none;
    background-color: ${COLOR_PALETTE.ORANGE_LIGHT_2};
    border: none;
    height: 16px;
    width: 44px;
    margin-top:6px;
    border-radius: 2px;
    color: ${COLOR_PALETTE.WHITE};
    letter-spacing: 1px;
    line-height: 1;
    margin-left: 7px;
    transition: all 0.25s;
    &: hover {
        background-color: ${COLOR_PALETTE.ORANGE_LIGHT_1};
    }
`;

export const TextButtonContainer = styled.div`
    display: flex;
`;

export const InputTextContainer = styled.div`
    width: ${(props: LabelTextProps) => (props.displayElement) ? 'calc(100% - 52px)' : '100%'};
        position: relative;
        z-index: 0;
`;

export const EnterInfoText = styled.div`
    font-family: "${FONTS.HELVETICA}";
    font-size: 9px;
    line-height: 1.44;
    letter-spacing: 0.9px;
    text-align: left;
    color: ${COLOR_PALETTE.GREY_DARK_2};
    display: inline-block;
    padding-top: 3px;
    transition: all 0.25s;
    opacity: ${(props: LabelTextProps) => (props.isFocused) ? 1 : 0};
`;

export interface IconProps {
    isFocused?: boolean;
}
export const ReturnArrow = styled.span`
    color: black;
    font-size: 12px;
    margin: 0px;
    width: 10px;
    text-align: right;
    display: inline-block;
    margin-top: 0px;
    color: ${COLOR_PALETTE.GREY_D6};
    opacity: ${(props: IconProps) => (props.isFocused) ? 1 : 0};
    &:before{
        font-family: 'icomoon' !important;
        speak: none;
        content: "\\${ICON_CODE.RETURN_ARROW}";
    };
`;
    
export const LabelText = styled.span`
    font-size: 12px;
    color: ${COLOR_PALETTE.BLACK};
    letter-spacing: 1.1px;
    height: 16px;
    display: flex;
`;

export const FloatingLabel = styled.div`
    width: 100%;
    bottom: 0;
`;


export const HelperText = styled.span`
    display: flex;
    font-size: 8px;
    height: 11px;
    color: ${COLOR_PALETTE.GREY_HELPER}
    letter-spacing: 0.8px;
`