@npm.tangocode/tc_ui_components/src/components/UnderlineAnimation/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 * as React from 'react';

export const Underline = styled.span`
    position: relative; 
    display: block; 
    width: inherit;
    &: before {
        content: '';
        height: 2px;
        width: 0px;
        bottom: 0px;
        position: absolute;
        background: ${COLOR_PALETTE.BLUE}; 
        transition: 0.2s ease all;
        left: 50%;
    }
    &: after {
        content: '';
        height: 2px; 
        width: 0px;
        bottom:0px;        
        position: absolute;
        background: ${COLOR_PALETTE.BLUE}; 
        transition: 0.2s ease all;
        right: 50%;
    };
`;

export const UnderlineWrapper = styled.div`
    width: inherit;
    height: 100%;
    & > input {
        font-size: 18px;
        display: block;
        width: inherit;
        box-sizing: border-box;
        height: 100%;
        padding: 0;
        border-left: 0px;
        border-top: 0px;
        border-right: 0px;
        border-bottom: 2px solid ${COLOR_PALETTE.GREY_E5};
        outline: none;
        background: inherit;
        &: focus {
            & ~ ${Underline} {
                &: before {
                    width:50%;
                };
                &: after {
                    width:50%;
                };
            }
        }
    }
`;