@npm.tangocode/tc_ui_components/src/components/LoadingButton/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 ButtonProps {
    disableMouseOverStyles?: boolean;
}

export const Container = styled.div`
    display: flex;
    width: 43px;
    height: 18px;
`;  

export const LoadingImg = styled.img`
height: 21px;
width: 21px;
vertical-align: middle;
`;

export const Button =  styled.button`
    font-family: Roboto;
    color: ${COLOR_PALETTE.WHITE};
    background-color: ${COLOR_PALETTE.GREEN_LIGHT_1};
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 1.5px;
    text-align: center;
    cursor: pointer;     
    margin: 8px;
    width: 139px;
    height: 34px;
    line-height: 34px;
    padding-left: 17px;
    padding-right: 17px;
    text-align: center;
    box-sizing: content-box;
    border-width: 0px;
    border-style: none;
    border-radius:3px;
    &:hover {background-color:${COLOR_PALETTE.GREEN_SUCCESS} }
`;

export const Loading = styled.div`
  cursor: default;
  border-radius: 3px;
  background-color: ${COLOR_PALETTE.GREY_LOADING};
  margin: 8px;
  width: 139px;
  height: 34px;
  line-height: 34px;
  padding-left: 17px;
  padding-right: 17px;
  text-align: center; 
  border-radius:3px;
`;

export const Failed = styled.button`
    font-family: Roboto;
    color: ${COLOR_PALETTE.WHITE};
    background-color: ${COLOR_PALETTE.RED_FAILED};
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 1.5px;
    text-align: center;
    cursor: pointer;
    margin: 8px;
    width: 139px;
    height: 34px;
    line-height: 34px;
    padding-left: 17px;
    padding-right: 17px;
    text-align: center;
    box-sizing: content-box;
    border-width: 0px;
    border-style: none;
    border-radius:3px;
    
`;

export const Success = styled.button`    
    cursor: pointer;
    border-radius: 3px;
    color: ${COLOR_PALETTE.WHITE};
    background-color: ${COLOR_PALETTE.GREEN_SUCCESS};
    margin: 8px;
    width: 139px;
    height: 34px;
    line-height: 34px;
    padding-left: 17px;
    padding-right: 17px;
    text-align: center;
    box-sizing: content-box;
    border-width: 0px;
    border-style: none;
    border-radius:3px;
`;

export const Disabled = styled.button`
    background-color: ${COLOR_PALETTE.GREY_LIGHT_4};    
    color: ${COLOR_PALETTE.GREY_DARK_5}
    margin: 8px;
    width: 139px;
    height: 34px;
    line-height: 34px;
    padding-left: 17px;
    padding-right: 17px;
    text-align: center;
    box-sizing: content-box;
    border-width: 0px;
    border-style: none;
    border-radius:3px;
`;