@npm.tangocode/tc_ui_components/src/components/GroupedGrid/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';

export const Root = styled.div`
  width: 100%;
  height: 100%;
  overflow-y: scroll;
`;

export const HeaderRoot = styled.div`
  position: sticky;
  top: 0px;  
  margin-top: 5px;
  background-color: ${COLOR_PALETTE.GREY_LIGHT_3};
  height: 40px;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
`;

export const Group = styled.div`
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 ${COLOR_PALETTE.GREY_DARK_4};
  background-color: ${COLOR_PALETTE.BLUE_LIGHT_5};
  border: solid 1px ${COLOR_PALETTE.WHITE_LIGHT_2};
  margin-bottom: 20px;
`;

export const GroupRows = styled.div`
  padding: 16px;
  padding-top: 0px;
`;
export const RowRoot = styled.div`
height: 30px;
border-radius: 3px;
box-shadow: 0 2px 4px 0 ${COLOR_PALETTE.BLUE_LIGHT_6};
background-color:  ${COLOR_PALETTE.WHITE};
border: solid 1px ${COLOR_PALETTE.BLUE_LIGHT_7};
display: flex;
align-items: center;
padding-left: 30px;
margin-top: 5px;
`;