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

export interface FloatingLabelProps {
  float: boolean;
  
  theme : {
    minSize : string,
    maxSize : string,
    color : string,
    floatingColor: string,
    transition: string,
    top: string,
    floatingTop: string,
    height: string,
    floatingHeight: string
  }
}

const getLabelMinSize = (props: FloatingLabelProps) => {
   return (props.theme && props.theme.minSize) || '10px';    
};

const getLabelMaxSize = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.maxSize) || '12px';    
 };

const getLabelColor = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.color) || COLOR_PALETTE.GREY_DARK_1;    
 };

const getLabelFloatingColor = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.color) || COLOR_PALETTE.GREY_LIGHT_1;    
 };

const getLabelTop = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.top) || '22px';    
 };

const getLabelFloatingTop = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.floatingTop) || '3px';    
 };

const getLabelHeight = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.height) || '12px';    
 };

const getLabelFloatingHeight = (props: FloatingLabelProps) => {
    return (props.theme && props.theme.floatingHeight) || '9px';    
 };

export const FloatingLabel = styled.label`
    transition: ${(props: FloatingLabelProps) => (props.theme && props.theme.transition) || '0.25s all'};    
    height: ${(props: FloatingLabelProps) => (props.float && getLabelFloatingHeight(props) || getLabelHeight(props))}; 
    font-size: ${(props: FloatingLabelProps) => (props.float && getLabelMinSize(props) || getLabelMaxSize(props))};
    color: ${(props: FloatingLabelProps) => (props.float && getLabelFloatingColor(props) || getLabelColor(props))};
    font-family: "Varela Round";
    pointer-events: none;
    padding-left: 0px;
    padding-top: 3px;
    position: absolute;
    margin-top: ${(props: FloatingLabelProps) => (props.float && getLabelFloatingTop(props) || getLabelTop(props))};
    
`;


export const LabelContainer = styled.div`
    position: relative;
    width: calc(100% - 10px);   
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0 5px;   
    height: 40px; 
`;


export const FloatingInput = styled.input`
  
  color:  ${COLOR_PALETTE.GREY_DARK_2};  
  border: none;
  border-bottom: 1px solid;
  font-size: 13px;
  font-family:"Varela Round";
  padding-left: 4px;
  height: 16px;
  width: 100%;
  margin:0;
  text-align:left;
  cursor:text; 
  outline: none;  
  margin-top: 13px;  
   &:focus {
      color: ${COLOR_PALETTE.GREY_DARK_1};
  }    
 
`;

export const TextArea = styled.textarea`
    width: 100%;
    border: none;
    border-bottom: 1px solid;       
    outline: none;
    resize: none;
    font-family: "Varela Round";    
    font-size: 13px;
    height: 16px;    
    margin-top: 13px;
    padding-left: 6px;    
    align-items: center;
    color: ${COLOR_PALETTE.GREY_DARK_2};
        &:focus {
            color: ${COLOR_PALETTE.GREY_DARK_1};
        }        
    `;