fix(ui/skeleton): add avatar-border-radius css vars

affects: @varlet/ui
varletjs · Sep 29, 2021 · ddf259f · ddf259f
1 parent 83d214a
commit ddf259f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/skeleton/docs/en-US.md b/packages/varlet-ui/src/skeleton/docs/en-US.md
@@ -122,6 +122,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--skeleton-card-background-color` | `rgba(0, 0, 0, 0.12)` |
 | `--skeleton-animation-background` | `linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0))` |
 | `--skeleton-avatar-size` | `34px` |
+| `--skeleton-avatar-border-radius` | `50%` |
 | `--skeleton-avatar-margin-right` | `16px` |
 | `--skeleton-avatar-background-color` | `rgba(0, 0, 0, 0.12)` |
 | `--skeleton-title-width` | `50%` |

diff --git a/packages/varlet-ui/src/skeleton/docs/zh-CN.md b/packages/varlet-ui/src/skeleton/docs/zh-CN.md
@@ -121,6 +121,7 @@ export default {
 | `--skeleton-card-background-color` | `rgba(0, 0, 0, 0.12)` |
 | `--skeleton-animation-background` | `linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0))` |
 | `--skeleton-avatar-size` | `34px` |
+| `--skeleton-avatar-border-radius` | `50%` |
 | `--skeleton-avatar-margin-right` | `16px` |
 | `--skeleton-avatar-background-color` | `rgba(0, 0, 0, 0.12)` |
 | `--skeleton-title-width` | `50%` |

diff --git a/packages/varlet-ui/src/skeleton/skeleton.less b/packages/varlet-ui/src/skeleton/skeleton.less
@@ -10,6 +10,7 @@
   hsla(0, 0%, 100%, 0)
 );
 @skeleton-avatar-size: 34px;
+@skeleton-avatar-border-radius: 50%;
 @skeleton-avatar-margin-right: 16px;
 @skeleton-avatar-background-color: rgba(0, 0, 0, 0.12);
 @skeleton-title-width: 50%;
@@ -27,6 +28,7 @@
   --skeleton-card-background-color: @skeleton-card-background-color;
   --skeleton-animation-background: @skeleton-animation-background;
   --skeleton-avatar-size: @skeleton-avatar-size;
+  --skeleton-avatar-border-radius: @skeleton-avatar-border-radius;
   --skeleton-avatar-margin-right: @skeleton-avatar-margin-right;
   --skeleton-avatar-background-color: @skeleton-avatar-background-color;
   --skeleton-title-width: @skeleton-title-width;
@@ -75,7 +77,7 @@
     flex-shrink: 0;
     width: var(--skeleton-avatar-size);
     height: var(--skeleton-avatar-size);
-    border-radius: 50%;
+    border-radius: var(--skeleton-avatar-border-radius);
     background-color: var(--skeleton-avatar-background-color);
     margin-right: var(--skeleton-avatar-margin-right);
   }