feat: add --noticebar-border-radius && --noticebar-padding for noticebar

hellof2e · Mar 23, 2023 · 7919075 · 7919075
1 parent 99b2795
commit 7919075
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/packages/quark/src/noticebar/doc-react.en-US.md b/packages/quark/src/noticebar/doc-react.en-US.md
@@ -102,5 +102,7 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 
 | Name                      | Description      | Default   |
 | ------------------------- | ---------------- | --------- |
+| `--noticebar-border-radius`  | component border-radius |  0px  |
+| `--noticebar-padding`  | component padding |  10px  |
 | `--noticebar-left-color`  | Left icon color  | `inherit` |
 | `--noticebar-right-color` | Right icon color | `inherit` |
diff --git a/packages/quark/src/noticebar/doc-react.zh-CN.md b/packages/quark/src/noticebar/doc-react.zh-CN.md
@@ -100,5 +100,7 @@ import { Marquee } from "@quarkd/quark-react";
 
 | 名称                      | 说明         | 默认值 |
 | ------------------------- | ------------ | ------ |
+| `--noticebar-border-radius`  | 组件倒圆角 |  0px  |
+| `--noticebar-padding`  | 内边距 |  10px  |
 | `--noticebar-left-color`  | 左侧图标颜色 | `继承` |
 | `--noticebar-right-color` | 右侧图标颜色 | `继承` |
diff --git a/packages/quark/src/noticebar/doc.en-US.md b/packages/quark/src/noticebar/doc.en-US.md
@@ -107,5 +107,7 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 
 | Name                      | Description      | Default   |
 | ------------------------- | ---------------- | --------- |
+| `--noticebar-border-radius`  | component border-radius |  `0px`  |
+| `--noticebar-padding`  | component padding |  `10px`  |
 | `--noticebar-left-color`  | Left icon color  | `inherit` |
 | `--noticebar-right-color` | Right icon color | `inherit` |
diff --git a/packages/quark/src/noticebar/doc.zh-CN.md b/packages/quark/src/noticebar/doc.zh-CN.md
@@ -105,5 +105,7 @@ import "quarkd/lib/marquee";
 
 | 名称                      | 说明         | 默认值 |
 | ------------------------- | ------------ | ------ |
+| `--noticebar-border-radius`  | 组件倒圆角 |  `0px`  |
+| `--noticebar-padding`  | 内边距 |  `10px`  |
 | `--noticebar-left-color`  | 左侧图标颜色 | `继承` |
 | `--noticebar-right-color` | 右侧图标颜色 | `继承` |
diff --git a/packages/quark/src/noticebar/style.css b/packages/quark/src/noticebar/style.css
@@ -7,8 +7,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 11px;
-  border-radius: 8px;
+  padding: var(--noticebar-padding, 10px);
+  border-radius: var(--noticebar-border-radius, 0);
   color: #ee8c02;
   background: #fef4e7;
 }