s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

separate MobileTableStyles to another file

Browse Source
This commit is contained in:
Mateusz Tylka 2023-07-28 12:25:00 +02:00
parent cfeac6b920
commit afd2361689
2 changed files with 67 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/generic/Table/components/MobileTable/MobileTable.js
View File

@ -1,71 +1,8 @@
import React from 'react'; import React from 'react';
import { Container } from '../../../../../utils/containers';
import styled from 'styled-components';
import DeletePopUp from '../DeletePopUp/DeletePopUp'; import DeletePopUp from '../DeletePopUp/DeletePopUp';
import TableRowItems from '../TableRowItems/TableRowItems'; import TableRowItems from '../TableRowItems/TableRowItems';
import TableRowFooter from '../TableRowFooter/TableRowFooter'; import TableRowFooter from '../TableRowFooter/TableRowFooter';
import MobileTableStyle from './MobileTableStyle';
const MobileTableStyle = styled(Container)`
width: 100%;
border-collapse: collapse;
margin: 32px 0;
tr:nth-of-type(odd) {
background: ${({ theme }) => theme.colors.dark03};
}
th {
background: ${({ theme }) => theme.colors.dark05};
color: ${({ theme }) => theme.colors.white};
}
td,
th {
padding: 6px;
border: 1px solid ${({ theme }) => theme.colors.white};
text-align: left;
}
thead,
tbody,
th,
tr,
td {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
position: relative;
padding-left: 50%;
}
.mobile-table-header {
font-weight: 500;
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.TableStyle__row-footer {
padding: 0 8px;
min-height: 36px;
justify-content: space-between;
}
.TableStyle__tag {
color: ${({ theme }) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green08};
padding: 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
}
.TableStyle__tags-container {
gap: 4px;
}
`;
const MobileTable = (props) => { const MobileTable = (props) => {
return ( return (

66
src/components/generic/Table/components/MobileTable/MobileTableStyle.js Normal file
View File

@ -0,0 +1,66 @@
import styled from 'styled-components';
import { Container } from '../../../../../utils/containers';
const MobileTableStyle = styled(Container)`
width: 100%;
border-collapse: collapse;
margin: 32px 0;
tr:nth-of-type(odd) {
background: ${({ theme }) => theme.colors.dark03};
}
th {
background: ${({ theme }) => theme.colors.dark05};
color: ${({ theme }) => theme.colors.white};
}
td,
th {
padding: 6px;
border: 1px solid ${({ theme }) => theme.colors.white};
text-align: left;
}
thead,
tbody,
th,
tr,
td {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
position: relative;
padding-left: 50%;
}
.mobile-table-header {
font-weight: 500;
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.TableStyle__row-footer {
padding: 0 8px;
min-height: 36px;
justify-content: space-between;
}
.TableStyle__tag {
color: ${({ theme }) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green08};
padding: 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
}
.TableStyle__tags-container {
gap: 4px;
}
`;
export default MobileTableStyle;