@npm.tangocode/tc_ui_components/src/components/ListItem/style.ts

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

import styled from 'styled-components';
import { COLOR_PALETTE} from '../../constants/colors';
import { FONTS } from "../../constants/fonts";

export const ItemContainer = styled.div`
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-radius: 2px;
  background-color: ${COLOR_PALETTE.WHITE_LIGHT_1};
  box-shadow: 0 2px 4px 0 rgba(${COLOR_PALETTE.GREY_DARK_3}, 0.03);
  border: solid 1px ${COLOR_PALETTE.GREY_LIGHT_2};
  margin: 10px;
  transition: all .25s;
  cursor: pointer;
  width: 88%;
  &:hover {
    background-color: ${COLOR_PALETTE.GREY_LIGHT_1};
    transform: translateY(-1px);
    box-shadow: 0 2px 4px 2px rgba(${COLOR_PALETTE.GREY_DARK_3}, 0.05);
  };
  &:last-child {
    margin-bottom: 50px;
  }
`;

export const ItemTitleContainer = styled.div`
  display:flex;
  flex-grow:1;
  width:85%;
  height:100%;
  align-items: center;
`

export const TextItem = styled.span`
  font-family: ${FONTS.HELVETICA};
  color: #373F52;
  letter-spacing: 1px;
  width:290px;
  text-align: left;
  margin-left: 20px;
  display: inline-block;
`;