fk-react-ui-components/components/Grid/style.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import styled from "styled-components";
import {colors} from "../colorCodes"

export const Table = styled.table`
    float: left;
    width: 50%;
    border-collapse: collapse;
    border-spacing: 0;
    thead {
        background-color: ${colors.modalBorderColor};
        box-shadow: 0 1px 0 0 ${colors.whiteSmoke};
    }
    td.checkbox-td {
        width: 30px;
        text-align: center;
    }
    th.checkbox-td{
        text-align:center;
    }
    .clickable {
        cursor: pointer;
    }
    .active {
        background-color: ${colors.blueBackground};
    }
`;

export const TheadCell = styled.th`
    padding: 12px;
    color: ${colors.nobelHeader};
    font-size: 13px;
    font-weight: 600;
    font-weight: normal;
    border:1px solid ${colors.whiteSmoke};
    text-align: left;
`

export const TbodyCell = styled.td`
font-size: 12px;
line-height: 14px;
padding: 12px;
border:1px solid ${colors.whiteSmoke};
`

export const GridDetail = styled.div`
    height: 100%;
    float: left;
    position:relative;
    left:0px;
    transition: 0.5s;
    background-color: ${colors.whiteText};
`;

export const GridContainer = styled.div`
position relative;
overflow:hidden;

.grid-detail{
    border:1px solid ${colors.lineBorder};
    width:  ${props => props.left || '0px'};
    left:  ${props => '-'+props.left || '0px'} ;
    .detail-close{
      display:block;
    }
}
.detail-close{
    display:none;
    position:absolute;
    cursor: pointer;
    left: -15px;
    top:-3px;
}
`

export const DetailHeader = styled.div`
    background-color:${colors.modalBorderColor};
    border-bottom: 1px solid ${colors.lineBorder};
    padding: 4.5px 9px;
    padding-left: 23px;
`;

export const DetailContent = styled.div`
    content: ' ';
    background-color: ${colors.whiteText};
    min-height: '300px';
`;

export const Loader = styled.div`
    height: 10px;
    background-color: #e9e9e9;
    width: ${props => props.width || '100px'};
`;

export const NoDataTr = styled.tr`
    td{
        padding: 20px;
        font-size: 14px;
        color: #898989;
    }
`;