@npm.tangocode/tc_ui_components/src/components/ListPicker/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 { ICON_CODE } from '../../constants/iconCodes';
import { COLOR_PALETTE } from '../../constants/colors';
import * as React from 'react';

const FillSpace = styled.div`
    width: 100%;
    height: 100%;
`;

export const Container = FillSpace.extend`
    display: flex;
    flex-direction: column;
`;

export const Median = styled.span`
    width: 25px;
`;

export const ListWrapper = FillSpace.extend`
    display: flex;
    flex-direction: row;
`;

export const SearchContainer = styled.div`
    width: 50%;
    position: relative;
    height: 40px;
    margin-bottom: 10px;
    &::before {
        position: absolute;
        content: "\\${ICON_CODE.SEARCH}";
        top: 13px;
        left: 9px;
    }
`;

export const SearchInput = styled.input`
    width: 100%;
    font-family: "Varela Round";
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    color: ${COLOR_PALETTE.GREY_DARK_1};
    border: none;
    outline: none;
    height: 100%;
    text-indent: 30px;
    background-color: ${COLOR_PALETTE.WHITE};
    ::placeholder {
        color: ${COLOR_PALETTE.GREY_AB};
    }
`;

export const ResetIcon = styled.span`
    margin-left: calc(50% - 20px);
    &:before {
        cursor: pointer;
            margin-top: 15px;
        font-family: 'icomoon' !important;
        position: absolute;
        speak: none;
        content: "\\${ICON_CODE.RESET}";
        background-color: transparent;
        border-radius: 50%;
        z-index: 5;
        height: 6px;
        font-size: 12px;
    }
`;