Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
/**
*
* TableRowEmpty
*
*/
import styled from 'styled-components';
const TableRowEmpty = styled.tr`
width: 100%;
height: 108px;
background: #ffffff;
td {
height: 106px;
line-height: 106px;
font-size: 1.3rem;
font-weight: 400;
color: #333740;
text-align: center;
border-collapse: collapse;
border-top: 1px solid #f1f1f2 !important;
}
`;
export default TableRowEmpty;
table-layout: fixed;
`
export const StyledTh = styled.th`
text-align: left;
height: 30px;
vertical-align: top;
padding: 5px;
width: ${props => props.width || 'auto'};
`
export const StyledTd = styled.td`
padding: 5px;
width: ${props => props.width || 'auto'};
text-overflow: ellipsis;
overflow: hidden;
`
export const StyledHeaderRow = styled.tr`
border-top: ${props => props.theme.inFrameBorder};
border-bottom: ${props => props.theme.inFrameBorder};
`
const HeaderRow = styled.tr`
&:hover {
background: none !important;
}
`;
const BodyCell = styled.td`
padding: 5px 2px !important;
border-bottom: none !important;
font-size: 13px;
color: #000;
line-height: 20px;
`;
const BodyRow = styled.tr`
&:hover {
background: none !important;
}
&:first-child {
& > td {
padding-top: 10px !important;
}
}
&:last-child {
& > td {
padding-bottom: 10px !important;
}
}
`;
const components = {
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
const ScrollContainer = styled.div`
overflow-x: auto;
&:not(:last-child) {
margin-bottom: ${th('space.3')};
}
`
const Table = styled.table`
border-collapse: collapse;
border-spacing: 0;
`
export const Tr = styled.tr`
text-align: center;
&:hover {
background-color: aliceblue;
}
`
export const Th = styled.th`
background-color: ${th('colorSecondary')};
font-size: 12px;
padding: ${th('space.1')};
border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
`
export const Td = styled.td`
font-size: 12px;
padding: ${th('space.1')};
import React from 'react';
import styled, { css } from 'styled-components';
const Container = styled.tr`
margin: 1rem 0;
font-size: 1.125rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
${props => props.disabled && css`opacity: 0.5;`};
`;
const Feature = styled.td`
text-align: right;
padding: 1rem 0;
padding-right: 2rem;
`;
const Value = styled.td`
text-align: center;
padding: 10px;
overflow: hidden;
font-size: 1.1em;
line-height: 50px;
text-align: center;
vertical-align: middle;
`
const Table = styled.table`
table-layout: fixed;
width: 100%;
`
const BaseTable = Table.extend`
line-height: 30px;
`
const Tr = styled.tr`
border-bottom: 1px solid #eee;
`
const Td = styled.td`
cursor: pointer;
`
const Time = Td.extend`
width: 24%;
`
const UserName = Td.extend`
width: 12%;
`
const Title = Td.extend`
width: 64%;
`
{row.label}
);
break;
}
return (
{row.time}
{tdList}
);
};
const Wrapper = styled.tr`
td {
background-color: ${colors.yuki};
border-bottom: 10px solid ${colors.primary};
vertical-align: top;
&:first-child {
padding: 10px;
box-sizing: border-box;
background-color: ${colors.secondary};
color: ${colors.yuki};
}
}
`;
const ContentSlotWrapper = styled.div`
width: 100%;
color: #6a6d70;
> tr {
cursor: auto;
}
`;
export const TableBody = styled.tbody``;
export const TableHeadCell = styled.th`
text-align: left;
padding: 16px 20px;
border: none;
font-weight: 400;
`;
export const TableRow = styled.tr`
transition: background-color 125ms ease-in;
`;
export const TableCell = styled.td`
text-align: left;
padding: 16px 20px;
`;
export const LeftAlignedHeader = styled.th`
text-align: left;
`;
export const StyledCode = styled.code``;
export const TableWrapper = styled.section``;
import styled from 'styled-components'
const StyledTableLine = styled.tr`
height: ${({ theme }) => theme.components.table.spaces.lineHeight};
border-bottom: ${({ theme }) => theme.components.table.borders.borderWidth} solid
${({ theme }) => theme.components.table.colors.border};
td:first-child {
padding-left: ${({ theme }) => theme.components.table.spaces.firstChildLeftSpacing};
}
${({ isHoverable, theme }) =>
isHoverable
? `&:hover {
background: ${theme.components.table.colors.backgroundHover};
}`
: ``}