acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: adjust styles of Collapse component

This commit is contained in:
jinhojang6 2023-04-07 21:31:34 +09:00
parent 3369e8aaf2
commit e359b6a765
4 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/lsd-react/src/components/Collapse/Collapse.classes.ts
View File

@ -1,7 +1,7 @@
export const collapseClasses = {
root: `lsd-collapse`,
content: `lsd-collapse-content`,
content: `lsd-collapse__content`,
open: 'lsd-collapse--open-item',
disabled: 'lsd-collapse--disabled',

32
packages/lsd-react/src/components/Collapse/Collapse.stories.tsx
View File

@ -18,9 +18,35 @@ export default {
export const Root: Story<CollapseProps> = (args) => (
<div style={{ width: 'fit-content' }}>
<Collapse {...args}>
<div style={{ padding: '10px 18px' }}>
<Typography color="primary" component="label">
Slot component
<div
style={{
display: 'flex',
height: '102px',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography
color="primary"
variant={args.size === 'small' ? 'label2' : 'label1'}
component="div"
>
Slot component.
</Typography>
<Typography
color="primary"
variant={args.size === 'small' ? 'label2' : 'label1'}
component="div"
>
Replace me.
</Typography>
<Typography
color="primary"
variant={args.size === 'small' ? 'label2' : 'label1'}
component="div"
>
↵
</Typography>
</div>
</Collapse>

8
packages/lsd-react/src/components/CollapseHeader/CollapseHeader.classes.ts
View File

@ -1,10 +1,10 @@
export const collapseHeaderClasses = {
root: `lsd-collapse-header`,
trigger: `lsd-collapse-header-trigger`,
triggerLabel: `lsd-collapse-header-trigger__label`,
triggerIcons: `lsd-collapse-header-trigger-icons`,
triggerIcon: `lsd-collapse-header-trigger-icons__icon`,
trigger: `lsd-collapse-header__trigger`,
triggerLabel: `lsd-collapse-header__trigger__label`,
triggerIcons: `lsd-collapse-header__trigger__icons`,
triggerIcon: `lsd-collapse-header__trigger__icons__icon`,
triggerMenuIcon: `lsd-collapse-header-trigger-icons__menu-icon`,
open: 'lsd-collapse-header--open',

7
packages/lsd-react/src/components/CollapseHeader/CollapseHeader.styles.ts
View File

@ -22,7 +22,6 @@ export const CollapseHeaderStyles = css`
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px 14px 10px 18px;
cursor: pointer;
background: none;
@ -66,7 +65,7 @@ export const CollapseHeaderStyles = css`
.${collapseHeaderClasses.trigger} {
width: 299px;
height: 40px;
padding: 10px 18px;
padding: 9px 17px;
}
}
@ -74,7 +73,7 @@ export const CollapseHeaderStyles = css`
.${collapseHeaderClasses.trigger} {
width: 270px;
height: 32px;
padding: 6px 14px;
padding: 5px 13px;
}
}
@ -82,7 +81,7 @@ export const CollapseHeaderStyles = css`
.${collapseHeaderClasses.trigger} {
width: 235px;
height: 28px;
padding: 6px 12px;
padding: 5px 11px;
}
}
`