fix(skeleton): skeleton css style

opentiny · Jan 28, 2024 · 0677075 · 0677075
1 parent 0274751
commit 0677075
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 27 deletions.
diff --git a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
@@ -168,6 +168,7 @@ export default {
         {
           'name': 'variant',
           'type': 'IVariant',
+          'typeAnchorName': 'IVariant',
           'defaultValue': 'square',
           'desc': {
             'zh-CN': '骨架屏形态',
@@ -179,6 +180,7 @@ export default {
         {
           'name': 'size',
           'type': 'ISize',
+          'typeAnchorName': 'ISize',
           'defaultValue': 'medium',
           'desc': {
             'zh-CN': '针对 image 和 circle 形态，内置三种大小',

diff --git a/packages/theme/src/skeleton-item/index.less b/packages/theme/src/skeleton-item/index.less
@@ -15,7 +15,7 @@
     }
   }
 
-  background-color: var(--ti-skeleton-item-background);
+  background-color: var(--ti-skeleton-item-bg-color);
   border-radius: var(--ti-skeleton-item-border-radius);
 
   &--square {
@@ -24,7 +24,7 @@
   }
 
   &--circle {
-    border-radius: 50%;
+    border-radius: var(--ti-skeleton-item-circle-border-radius);
     &.@{skeleton-item-prefix-cls} {
       &--small {
         width: var(--ti-skeleton-item-circle-small-size);
@@ -51,23 +51,23 @@
     svg {
       width: 40%;
       height: 40%;
-      fill: var(--ti-skeleton-item-image);
+      fill: var(--ti-skeleton-item-image-icon-color);
     }
 
     &.@{skeleton-item-prefix-cls} {
       &--small {
-        width: var(--ti-skeleton-item-image-small-size);
-        height: var(--ti-skeleton-item-image-small-size);
+        width: var(--ti-skeleton-item-image-small-size-width);
+        height: var(--ti-skeleton-item-image-small-size-height);
       }
 
       &--medium {
-        width: var(--ti-skeleton-item-image-medium-size);
-        height: var(--ti-skeleton-item-image-medium-size);
+        width: var(--ti-skeleton-item-image-medium-size-width);
+        height: var(--ti-skeleton-item-image-medium-size-height);
       }
 
       &--large {
-        width: var(--ti-skeleton-item-image-large-size);
-        height: var(--ti-skeleton-item-image-large-size);
+        width: var(--ti-skeleton-item-image-large-size-width);
+        height: var(--ti-skeleton-item-image-large-size-height);
       }
     }
   }

diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less
@@ -1,12 +1,16 @@
 .component-css-vars-skeleton-item() {
-  --ti-skeleton-item-background: var(--ti-base-color-bg-5, #f5f5f6);
+  --ti-skeleton-item-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
   --ti-skeleton-item-border-radius: var(--ti-common-border-radius-1, 4px);
-  --ti-skeleton-item-image: var(--ti-base-color-common-2, #adb0b8);
-  --ti-skeleton-item-square-height: 16px;
-  --ti-skeleton-item-circle-large-size: 60px;
-  --ti-skeleton-item-circle-medium-size: 40px;
-  --ti-skeleton-item-circle-small-size: 20px;
-  --ti-skeleton-item-image-small-size: 50px;
-  --ti-skeleton-item-image-medium-size: 100px;
-  --ti-skeleton-item-image-large-size: 200px;
+  --ti-skeleton-item-image-icon-color: var(--ti-base-color-common-2, #adb0b8);
+  --ti-skeleton-item-square-height: var(--ti-common-size-4x, 16px);
+  --ti-skeleton-item-circle-border-radius: var(--ti-common-border-radius-3, 50%);
+  --ti-skeleton-item-circle-large-size: var(--ti-common-size-15x, 60px);
+  --ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x, 40px);
+  --ti-skeleton-item-circle-small-size: var(--ti-common-size-5x, 20px);
+  --ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x, 60px);
+  --ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x, 60px);
+  --ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x, 100px);
+  --ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px);
+  --ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px);
+  --ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px);
 }
diff --git a/packages/theme/src/skeleton/index.less b/packages/theme/src/skeleton/index.less
@@ -35,7 +35,7 @@
     margin-bottom: var(--ti-skeleton-row-margin-bottom);
 
     &:last-child {
-      width: var(--ti-skeleton-last-row-margin-bottom);
+      width: var(--ti-skeleton-last-row-width);
       margin-bottom: 0;
     }
   }

diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less
@@ -1,10 +1,9 @@
 .component-css-vars-skeleton() {
-  --ti-skeleton-avatar-size: 40px;
-  --ti-skeleton-avatar-background-color: var(--ti-base-color-bg-5, #f5f5f6);
-  --ti-skeleton-avatar-border-radius: 50%;
-  --ti-skeleton-avatar-margin-right: 15px;
-  --ti-skeleton-title-margin-bottom: 16px;
+  --ti-skeleton-avatar-size: var(--ti-common-size-10x, 40px);
+  --ti-skeleton-avatar-background-color: var(--ti-common-color-bg-disabled, #f5f5f6);
+  --ti-skeleton-avatar-margin-right: var(--ti-common-space-4x, 16px);
+  --ti-skeleton-title-margin-bottom: var(--ti-common-space-4x, 16px);
   --ti-skeleton-title-width: 40%;
-  --ti-skeleton-row-margin-bottom: 12px;
-  --ti-skeleton-last-row-margin-bottom: 60%;
+  --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px);
+  --ti-skeleton-last-row-width: 60%;
 }
diff --git a/packages/vue/src/skeleton/package.json b/packages/vue/src/skeleton/package.json
@@ -9,7 +9,8 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-skeleton-item": "workspace:~"
   },
   "license": "MIT",
   "devDependencies": {