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

interface ButtonStyler {
    icon: string;
}

export const BasePill = styled.div`
    height: 27px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: ${COLOR_PALETTE.GREY};
`;

export const Pill = BasePill.extend`
    min-width: 60px;
    margin: 5px 15px 0 0;
    border-radius: 75px;    
    padding: 0 10px 0px 10px;
`;

export const PillWrapper = BasePill.extend`
    min-width: 70px;
    border-radius: 100px;
    margin-right: 10px;
    cursor: default;
    padding: 1px 3px 2px 3px;
    -webkit-transition: width 2s;
    transition: all 0.5s;
    margin-top: 5px;
    &:hover {
        > div:nth-child(1) {
            margin-right: 0px;
        }
        > div:nth-child(2) {
            cursor: pointer;
            opacity: 1.0;
            display: inline-block;
        }
        padding: 1px 5px 2px 3px;
    }
`;

export const PillText = styled.div`
    font-family: ${FONTS.HELVETICA};
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    color: #ffffff;

    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    
    margin-left: 15px;
    margin-right: 10px;
    position: relative;
    top: 1px;
`;

export const DeleteContainer = styled.div`
    font-family: ${FONTS.HELVETICA};
    font-size: 13px;
    display: none;
    line-height: normal;
    float: left;
    color: ${COLOR_PALETTE.WHITE};
    opacity: 0.0;
    transition: opacity 0.5s;
    margin-top: 3px;
    margin-left: 5px;
`;

export const DeleteIcon = styled.span`
    justify-content: center;
    align-items: center;
    font-family: 'icomoon' !important;
    border-radius: 50%;
    background-color: ${COLOR_PALETTE.WHITE};
    color: ${COLOR_PALETTE.GREY};
    padding: 5px 5px 5px 5px;
    &:before{
        font-family: 'icomoon' !important;
        speak: none;
        content: "\\${ICON_CODE.CLOSE}";
        margin-left: 0.5px;
    };
`;