QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 15:20:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(warehouse ): warehouse style.

Browse Source
This commit is contained in:
elforjani13
2022-02-09 00:23:50 +02:00
parent 3e8f281d0c
commit 893ebb838e
1 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/containers/Preferences/Warehouses/components.js
View File

@@ -39,36 +39,47 @@ export function WarehouseContextMenu({
export function WarehousesGrid({ warehouse }) { export function WarehousesGrid({ warehouse }) {
return ( return (
<WarehouseGrid> <WarehouseGridWrapper>
<WarehouseHeader> <WarehouseHeader>
<WarehouseTitle>{warehouse.name}</WarehouseTitle> <WarehouseTitle>{warehouse.name}</WarehouseTitle>
<WarehouseCode>{warehouse.code}</WarehouseCode> <WarehouseCode>{warehouse.code}</WarehouseCode>
<WarehouseIcon>
<Icon icon="warehouse-16" iconSize={20} />
</WarehouseIcon>
</WarehouseHeader> </WarehouseHeader>
<WarehouseInfoItem>{warehouse.city}</WarehouseInfoItem> <WarehouseContent>
<WarehouseInfoItem>{warehouse.country}</WarehouseInfoItem> <WarehouseItem>{warehouse.city}</WarehouseItem>
<WarehouseInfoItem>{warehouse.email}</WarehouseInfoItem> <WarehouseItem>{warehouse.country}</WarehouseItem>
<WarehouseInfoItem>{warehouse.phone_number}</WarehouseInfoItem> <WarehouseItem>{warehouse.email}</WarehouseItem>
</WarehouseGrid> <WarehouseItem>{warehouse.phone_number}</WarehouseItem>
</WarehouseContent>
</WarehouseGridWrapper>
); );
} }
const WarehouseGrid = styled.div` const WarehouseGridWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0;
border-radius: 3px; border-radius: 3px;
width: 280px; // 453px
height: 160px; //225px
background: #fff;
margin: 5px;
padding: 16px 12px 10px;
border: 1px solid #c8cad0; //#CFD1D6 border: 1px solid #c8cad0; //#CFD1D6
background: #fff;
margin: 5px 5px 8px;
width: 300px; // 453px
height: 160px; //225px
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
position: relative;
&:hover { &:hover {
border-color: #0153cc; border-color: #0153cc;
} }
`; `;
const WarehouseHeader = styled.div`
position: relative;
padding: 16px 12px 10px;
`;
const WarehouseTitle = styled.div` const WarehouseTitle = styled.div`
font-size: 14px; //22px font-size: 14px; //22px
font-style: inherit; font-style: inherit;
@@ -78,22 +89,31 @@ const WarehouseTitle = styled.div`
line-height: 1; line-height: 1;
`; `;
const WarehouseHeader = styled.div`
margin: 4px 0px 15px;
`;
const WarehouseCode = styled.div` const WarehouseCode = styled.div`
display: inline-block; display: inline-block;
font-size: 11px; font-size: 11px;
color: #6b7176; color: #6b7176;
`; `;
const WarehouseInfoItem = styled.div` const WarehouseIcon = styled.div`
position: absolute;
top: 14px;
color: #abb3bb;
right: 12px;
`;
const WarehouseContent = styled.div`
display: inline-block; display: inline-block;
font-size: 12px; position: absolute;
bottom: 8px;
width: 100%;
padding: 0 12px 0px;
`;
const WarehouseItem = styled.div`
font-size: 11px;
color: #000; color: #000;
line-height: 1.3rem; line-height: 1.3rem;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0; overflow: hidden;
`; `;