Skip to content

Commit 0677075

Browse files
mengqiuleomengqiuleo
committed
fix(skeleton): skeleton css style
1 parent 0274751 commit 0677075

File tree

6 files changed

+33
-27
lines changed

6 files changed

+33
-27
lines changed

‎examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ export default {
168168
{
169169
'name': 'variant',
170170
'type': 'IVariant',
171+
'typeAnchorName': 'IVariant',
171172
'defaultValue': 'square',
172173
'desc': {
173174
'zh-CN': '骨架屏形态',
@@ -179,6 +180,7 @@ export default {
179180
{
180181
'name': 'size',
181182
'type': 'ISize',
183+
'typeAnchorName': 'ISize',
182184
'defaultValue': 'medium',
183185
'desc': {
184186
'zh-CN': '针对 image 和 circle 形态，内置三种大小',

‎packages/theme/src/skeleton-item/index.less

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616
}
1717

18-
background-color: var(--ti-skeleton-item-background);
18+
background-color: var(--ti-skeleton-item-bg-color);
1919
border-radius: var(--ti-skeleton-item-border-radius);
2020

2121
&--square {
@@ -24,7 +24,7 @@
2424
}
2525

2626
&--circle {
27-
border-radius: 50%;
27+
border-radius: var(--ti-skeleton-item-circle-border-radius);
2828
&.@{skeleton-item-prefix-cls} {
2929
&--small {
3030
width: var(--ti-skeleton-item-circle-small-size);
@@ -51,23 +51,23 @@
5151
svg {
5252
width: 40%;
5353
height: 40%;
54-
fill: var(--ti-skeleton-item-image);
54+
fill: var(--ti-skeleton-item-image-icon-color);
5555
}
5656

5757
&.@{skeleton-item-prefix-cls} {
5858
&--small {
59-
width: var(--ti-skeleton-item-image-small-size);
60-
height: var(--ti-skeleton-item-image-small-size);
59+
width: var(--ti-skeleton-item-image-small-size-width);
60+
height: var(--ti-skeleton-item-image-small-size-height);
6161
}
6262

6363
&--medium {
64-
width: var(--ti-skeleton-item-image-medium-size);
65-
height: var(--ti-skeleton-item-image-medium-size);
64+
width: var(--ti-skeleton-item-image-medium-size-width);
65+
height: var(--ti-skeleton-item-image-medium-size-height);
6666
}
6767

6868
&--large {
69-
width: var(--ti-skeleton-item-image-large-size);
70-
height: var(--ti-skeleton-item-image-large-size);
69+
width: var(--ti-skeleton-item-image-large-size-width);
70+
height: var(--ti-skeleton-item-image-large-size-height);
7171
}
7272
}
7373
}

‎packages/theme/src/skeleton-item/vars.less

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
.component-css-vars-skeleton-item() {
2-
--ti-skeleton-item-background: var(--ti-base-color-bg-5, #f5f5f6);
2+
--ti-skeleton-item-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
33
--ti-skeleton-item-border-radius: var(--ti-common-border-radius-1, 4px);
4-
--ti-skeleton-item-image: var(--ti-base-color-common-2, #adb0b8);
5-
--ti-skeleton-item-square-height: 16px;
6-
--ti-skeleton-item-circle-large-size: 60px;
7-
--ti-skeleton-item-circle-medium-size: 40px;
8-
--ti-skeleton-item-circle-small-size: 20px;
9-
--ti-skeleton-item-image-small-size: 50px;
10-
--ti-skeleton-item-image-medium-size: 100px;
11-
--ti-skeleton-item-image-large-size: 200px;
4+
--ti-skeleton-item-image-icon-color: var(--ti-base-color-common-2, #adb0b8);
5+
--ti-skeleton-item-square-height: var(--ti-common-size-4x, 16px);
6+
--ti-skeleton-item-circle-border-radius: var(--ti-common-border-radius-3, 50%);
7+
--ti-skeleton-item-circle-large-size: var(--ti-common-size-15x, 60px);
8+
--ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x, 40px);
9+
--ti-skeleton-item-circle-small-size: var(--ti-common-size-5x, 20px);
10+
--ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x, 60px);
11+
--ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x, 60px);
12+
--ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x, 100px);
13+
--ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px);
14+
--ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px);
15+
--ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px);
1216
}

‎packages/theme/src/skeleton/index.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
margin-bottom: var(--ti-skeleton-row-margin-bottom);
3636

3737
&:last-child {
38-
width: var(--ti-skeleton-last-row-margin-bottom);
38+
width: var(--ti-skeleton-last-row-width);
3939
margin-bottom: 0;
4040
}
4141
}

‎packages/theme/src/skeleton/vars.less

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
.component-css-vars-skeleton() {
2-
--ti-skeleton-avatar-size: 40px;
3-
--ti-skeleton-avatar-background-color: var(--ti-base-color-bg-5, #f5f5f6);
4-
--ti-skeleton-avatar-border-radius: 50%;
5-
--ti-skeleton-avatar-margin-right: 15px;
6-
--ti-skeleton-title-margin-bottom: 16px;
2+
--ti-skeleton-avatar-size: var(--ti-common-size-10x, 40px);
3+
--ti-skeleton-avatar-background-color: var(--ti-common-color-bg-disabled, #f5f5f6);
4+
--ti-skeleton-avatar-margin-right: var(--ti-common-space-4x, 16px);
5+
--ti-skeleton-title-margin-bottom: var(--ti-common-space-4x, 16px);
76
--ti-skeleton-title-width: 40%;
8-
--ti-skeleton-row-margin-bottom: 12px;
9-
--ti-skeleton-last-row-margin-bottom: 60%;
7+
--ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px);
8+
--ti-skeleton-last-row-width: 60%;
109
}

‎packages/vue/src/skeleton/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"dependencies": {
1010
"@opentiny/vue-common": "workspace:~",
1111
"@opentiny/vue-renderless": "workspace:~",
12-
"@opentiny/vue-theme": "workspace:~"
12+
"@opentiny/vue-theme": "workspace:~",
13+
"@opentiny/vue-skeleton-item": "workspace:~"
1314
},
1415
"license": "MIT",
1516
"devDependencies": {

0 commit comments

Comments
 (0)