Skip to content

Commit

Permalink
Merge pull request #7 from toeverything/chore/kanban-card-styles
Browse files Browse the repository at this point in the history
Chore/kanban card styles
  • Loading branch information
lawvs authored Aug 1, 2022
2 parents 358f903 + 01c8b89 commit 873ded9
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
import { styled } from '@toeverything/components/ui';
import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
import type { KanbanCard } from '@toeverything/components/editor-core';

const CardContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#fff',
border: '1px solid #E2E7ED',
borderRadius: '5px',
});
import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';

const CardContent = styled('div')({
margin: '20px',
Expand All @@ -20,12 +12,16 @@ const CardActions = styled('div')({
alignItems: 'center',
width: '100%',
height: '29px',
background: 'rgba(152, 172, 189, 0.1)',
borderRadius: '0px 0px 5px 5px',
padding: '6px 0 6px 19px',
fontSize: '12px',
fontWeight: '300',
color: '#98ACBD',
transition: 'all ease-in 0.2s',

':hover': {
background: '#F5F7F8',
},
});

const PlusIcon = styled('div')({
Expand All @@ -37,6 +33,23 @@ const PlusIcon = styled('div')({
},
});

const CardContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#fff',
border: '1px solid #E2E7ED',
borderRadius: '5px',

[CardActions.toString()]: {
opacity: '0',
},
':hover': {
[CardActions.toString()]: {
opacity: '1',
},
},
});

export const CardItem = ({
id,
block,
Expand All @@ -56,7 +69,7 @@ export const CardItem = ({
</CardContent>
<CardActions onClick={onAddItem}>
<PlusIcon />
Add item
<span>Add item</span>
</CardActions>
</CardContainer>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const KanbanContainer = styled('div')({
// overscrollBehavior: 'contain',

'& > * + *': {
marginLeft: '10px',
marginLeft: '20px',
},
});

Expand Down

0 comments on commit 873ded9

Please sign in to comment.