@npm.tangocode/tc_ui_components/src/components/HierarchyList/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 { COLOR_PALETTE } from '../../constants/colors';
import { ICON_CODE } from '../../constants/iconCodes';
import * as React from 'react';
export const ControllerContainer = styled.div`
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    justify-content: space-between;
`;

export interface CheckItemStyleProps {
    indentation: number;
    bgColor: string;
    clickable: boolean;
}

export const CheckItemContainer = styled.div`
    margin-left: ${(props: CheckItemStyleProps) => props.indentation * 10}px;
    margin-bottom: 3px;
    height: 35px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    justify-content: space-between;
    color: ${COLOR_PALETTE.GREY_DARK_1};
    cursor: ${(props: CheckItemStyleProps) => props.clickable ? 'pointer' : 'default'};
    background-color: ${(props: CheckItemStyleProps) => props.bgColor};
`;

export const CheckListOuterContainer = styled.div`
    position: relative;
    height: 100%;
    width: 100%;
`;

export const CheckListContainer = styled.div`
    position: absolute;
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    ::-webkit-scrollbar {
        width: 10px;
    }   
    padding-right: 5px;
    
`;
export const Value = styled.span`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-left: 5px;
    text-align: left;
`;

export const SearchContainer = styled.div`
    width: 100%;
    position: absolute;
    z-index: 5;
    top: 5px;
    height:40px;
    &::before {
        position: absolute;
        content: "\\${ICON_CODE.CLOSE}";
        font-family: 'icomoon' !important;
        color: ${COLOR_PALETTE.BLUE_LIGHT_1};
        top: 13px;
        left: 9px;
    }
`;

export const ChildrenContainer = styled.div`
    background-color: ${COLOR_PALETTE.GREY_AB};
`;

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

export interface CustomArrowProps {
    activeState: boolean;
}

export const RotatingArrow = styled.span`
    display: inline-block;
    font-size: 15px;
    color: ${COLOR_PALETTE.BLACK};
    transition: all 0.35s;
    transform: ${(props: CustomArrowProps) => props.activeState 
        ? 'rotate(180deg)'
        : 'rotate(90deg)'};
    &:before {
        font-family: 'icomoon' !important;
        speak: none;
        content: "\\${ICON_CODE.ARROW_COLLAPSE}";
        transform: rotate(-180deg);
    };
`;