Skip to content

Commit

Permalink
feat(card): css variables for border and padding
Browse files Browse the repository at this point in the history
  • Loading branch information
guoyunhe committed Jun 3, 2024
1 parent a4a09ad commit 7224ed8
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 5 deletions.
20 changes: 15 additions & 5 deletions src/components/card/card.less
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
@class-prefix-card: ~'adm-card';

.@{class-prefix-card} {
--border-radius: var(--adm-card-border-radius, 8px);
--padding-inline: var(--adm-card-padding-inline, 12px);
--header-border-width: var(--adm-card-header-border-width, 0.5px);
--header-border-color: var(
--adm-card-header-border-color,
var(--adm-color-border)
);
--header-padding-block: var(--adm-card-header-padding-block, 12px);
--body-padding-block: var(--adm-card-body-padding-block, 12px);

background: var(--adm-color-background);
border-radius: 8px;
padding: 0 12px;
border-radius: var(--border-radius);
padding: 0 var(--padding-inline);
&-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 12px 0;
padding: var(--header-padding-block) 0;
&:not(:last-child) {
border-bottom: solid 0.5px var(--adm-color-border);
border-bottom: solid var(--header-border-width) var(--header-border-color);
}
&-title {
font-size: var(--adm-font-size-7);
Expand All @@ -21,6 +31,6 @@
}
}
&-body {
padding: 12px 0;
padding: var(--body-padding-block) 0;
}
}
11 changes: 11 additions & 0 deletions src/components/card/index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,14 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
| onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
| onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
| title | The left area of the header | `ReactNode` | - |

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --border-radius | Border radius of the button. | `8px` | `--adm-card-border-radius` |
| --padding-inline | Horizontal padding of the card. | `12px` | `--adm-card-padding-inline` |
| --header-border-width | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |
| --header-border-color | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |
| --header-padding-block | Vertical of the card header. | `12px` | `--adm-card-header-padding-block` |
| --body-padding-block | Vertical padding of the card body. | `12px` | `--adm-card-body-padding-block` |
11 changes: 11 additions & 0 deletions src/components/card/index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,14 @@
| onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
| onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
| title | header 左边区域 | `ReactNode` | - |

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 |
| --- | --- | --- | --- |
| --border-radius | 圆角大小 | `8px` | `--adm-card-border-radius` |
| --padding-inline | 水平内边距 | `12px` | `--adm-card-padding-inline` |
| --header-border-width | header 分割线宽度 | `0.5px` | `--adm-card-header-border-width` |
| --header-border-color | header 分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |
| --header-padding-block | header 垂直内边距 | `12px` | `--adm-card-header-padding-block` |
| --body-padding-block | body 垂直内边距 | `12px` | `--adm-card-body-padding-block` |

0 comments on commit 7224ed8

Please sign in to comment.