From c804f151efab8617774f6b081836410e0aa9634b Mon Sep 17 00:00:00 2001 From: Kasim <249813821@qq.com> Date: Tue, 25 Aug 2026 20:44:52 +0800 Subject: [PATCH] =?UTF-8?q?refactor(Skeleton):=20=E9=80=82=E9=85=8Dv16?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/configprovider/types.ts | 1 + .../skeleton/__test__/skeleton.spec.tsx | 5 ++ src/packages/skeleton/doc.en-US.md | 11 ++-- src/packages/skeleton/doc.md | 11 ++-- src/packages/skeleton/doc.taro.md | 11 ++-- src/packages/skeleton/doc.zh-TW.md | 11 ++-- src/packages/skeleton/skeleton.scss | 62 +++++++++++++------ src/packages/skeleton/skeleton.taro.tsx | 2 +- src/packages/skeleton/skeleton.tsx | 2 +- .../doc/docs/react/migrate-from-v3.en-US.md | 12 ++++ .../doc/docs/react/migrate-from-v3.md | 12 ++++ .../doc/docs/taro/migrate-from-v3.en-US.md | 12 ++++ .../doc/docs/taro/migrate-from-v3.md | 12 ++++ src/styles/variables-daojia.scss | 8 ++- src/styles/variables-jmapp.scss | 8 ++- src/styles/variables-jrkf.scss | 8 ++- src/styles/variables.scss | 10 ++- 17 files changed, 148 insertions(+), 50 deletions(-) diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index 51a6cdbaac..fdf4d79d6c 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -856,6 +856,7 @@ export type NutCSSVariables = | 'nutuiSkeletonLineNormalHeight' | 'nutuiSkeletonLineLargeHeight' | 'nutuiSkeletonLineBorderRadius' + | 'nutuiSkeletonAnimationColor' | 'nutuiCardBorderRadius' | 'nutuiGridBorderWidth' | 'nutuiGridBorderColor' diff --git a/src/packages/skeleton/__test__/skeleton.spec.tsx b/src/packages/skeleton/__test__/skeleton.spec.tsx index 6118e3d2e7..91e0dbb573 100644 --- a/src/packages/skeleton/__test__/skeleton.spec.tsx +++ b/src/packages/skeleton/__test__/skeleton.spec.tsx @@ -9,6 +9,11 @@ test('should allow to disable animation', () => { expect(container.querySelector('.nut-skeleton-animation')).toBeFalsy() }) +test('should render animated element by default', () => { + const { container } = render() + expect(container.querySelector('.nut-skeleton-animated')).toBeTruthy() +}) + test('should set duration', () => { const { container } = render() const animation = container.querySelector('.nut-skeleton-animated') diff --git a/src/packages/skeleton/doc.en-US.md b/src/packages/skeleton/doc.en-US.md index ca44a019bc..e4fd301dff 100644 --- a/src/packages/skeleton/doc.en-US.md +++ b/src/packages/skeleton/doc.en-US.md @@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | | visible | Whether to show skeleton screen (true: hide skeleton, false: show skeleton) | `boolean` | `true` | -| animated | Whether to enable skeleton animation | `boolean` | `false` | +| animated | Whether to enable skeleton animation | `boolean` | `true` | | size | Specify the built-in height | `'small' \| 'normal' \| 'large'` | `normal` | | shape | Set shape | `'square' \| 'round' \| 'circle'` | `round` | -| duration | Animation duration | `number` | `0.6` | +| duration | Animation duration | `number` | `0.4` | | rows | Set number of rows | `number` | `1` | | width | Set width, higher priority than `size` property | `string\|number` | `-` | | height | Set height, higher priority than `size` property | `string\|number` | `-` | @@ -73,11 +73,12 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-skeleton-background | Background | `rgb(239, 239, 239)` | +| \--nutui-skeleton-background | Background | `#f2f3f5` | | \--nutui-skeleton-line-width | Line width | `100%` | | \--nutui-skeleton-line-small-height | Line height | `16px` | -| \--nutui-skeleton-line-normal-height | Line height | `24px` | -| \--nutui-skeleton-line-large-height | Line height | `32px` | +| \--nutui-skeleton-line-normal-height | Line height | `20px` | +| \--nutui-skeleton-line-large-height | Line height | `28px` | | \--nutui-skeleton-line-border-radius | Line border radius | `4px` | +| \--nutui-skeleton-animation-color | Loading shimmer color (opacity auto-reduced in dark mode) | `rgba(255, 255, 255, 0.5)` | diff --git a/src/packages/skeleton/doc.md b/src/packages/skeleton/doc.md index b8dd5588fa..e4b742f162 100644 --- a/src/packages/skeleton/doc.md +++ b/src/packages/skeleton/doc.md @@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` | -| animated | 是否开启骨架屏动画 | `boolean` | `false` | +| animated | 是否开启骨架屏动画 | `boolean` | `true` | | size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` | | shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` | -| duration | 动画时长 | `number` | `0.6` | +| duration | 动画时长 | `number` | `0.4` | | rows | 设置行数 | `number` | `1` | | width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` | | height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` | @@ -73,11 +73,12 @@ import { Skeleton } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` | +| \--nutui-skeleton-background | 背景 | `#f2f3f5` | | \--nutui-skeleton-line-width | 线条宽度 | `100%` | | \--nutui-skeleton-line-small-height | 线条高度 | `16px` | -| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` | -| \--nutui-skeleton-line-large-height | 线条高度 | `32px` | +| \--nutui-skeleton-line-normal-height | 线条高度 | `20px` | +| \--nutui-skeleton-line-large-height | 线条高度 | `28px` | | \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` | +| \--nutui-skeleton-animation-color | 加载光影颜色（暗黑模式下自动降低透明度） | `rgba(255, 255, 255, 0.5)` | diff --git a/src/packages/skeleton/doc.taro.md b/src/packages/skeleton/doc.taro.md index a7a25b8491..d7abfc383e 100644 --- a/src/packages/skeleton/doc.taro.md +++ b/src/packages/skeleton/doc.taro.md @@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` | -| animated | 是否开启骨架屏动画 | `boolean` | `false` | +| animated | 是否开启骨架屏动画 | `boolean` | `true` | | size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` | | shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` | -| duration | 动画时长 | `number` | `0.6` | +| duration | 动画时长 | `number` | `0.4` | | rows | 设置行数 | `number` | `1` | | width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` | | height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` | @@ -73,11 +73,12 @@ import { Skeleton } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` | +| \--nutui-skeleton-background | 背景 | `#f2f3f5` | | \--nutui-skeleton-line-width | 线条宽度 | `100%` | | \--nutui-skeleton-line-small-height | 线条高度 | `16px` | -| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` | -| \--nutui-skeleton-line-large-height | 线条高度 | `32px` | +| \--nutui-skeleton-line-normal-height | 线条高度 | `20px` | +| \--nutui-skeleton-line-large-height | 线条高度 | `28px` | | \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` | +| \--nutui-skeleton-animation-color | 加载光影颜色（暗黑模式下自动降低透明度） | `rgba(255, 255, 255, 0.5)` | diff --git a/src/packages/skeleton/doc.zh-TW.md b/src/packages/skeleton/doc.zh-TW.md index 8c1b49755b..389854ee55 100644 --- a/src/packages/skeleton/doc.zh-TW.md +++ b/src/packages/skeleton/doc.zh-TW.md @@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | visible | 是否顯示骨架屏(true不顯示骨架屏，false顯示骨架屏) | `boolean` | `true` | -| animated | 是否開啟骨架屏動畫 | `boolean` | `false` | +| animated | 是否開啟骨架屏動畫 | `boolean` | `true` | | size | 指定使用的內置高度 | `'small' \| 'normal' \| 'large'` | `normal` | | shape | 設置形狀 | `'square' \| 'round' \| 'circle'` | `round` | -| duration | 動畫時長 | `number` | `0.6` | +| duration | 動畫時長 | `number` | `0.4` | | rows | 設置行數 | `number` | `1` | | width | 設置寬度，優先級高於 `size` 屬性 | `string\|number` | `-` | | height | 設置高度，優先級高於 `size` 屬性 | `string\|number` | `-` | @@ -73,11 +73,12 @@ import { Skeleton } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` | +| \--nutui-skeleton-background | 背景 | `#f2f3f5` | | \--nutui-skeleton-line-width | 線條寬度 | `100%` | | \--nutui-skeleton-line-small-height | 線條高度 | `16px` | -| \--nutui-skeleton-line-normal-height | 線條高度 | `24px` | -| \--nutui-skeleton-line-large-height | 線條高度 | `32px` | +| \--nutui-skeleton-line-normal-height | 線條高度 | `20px` | +| \--nutui-skeleton-line-large-height | 線條高度 | `28px` | | \--nutui-skeleton-line-border-radius | 線條邊框圓角 | `4px` | +| \--nutui-skeleton-animation-color | 加載光影顏色（暗黑模式下自動降低透明度） | `rgba(255, 255, 255, 0.5)` | diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index d0d5c6956d..0269eab050 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -35,19 +35,20 @@ &-animation { position: absolute; top: 0; - left: 0; - width: 100%; + left: -80px; + width: 80px; height: 100%; z-index: 1; background: linear-gradient( 90deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.02) 50%, - rgba(0, 0, 0, 0) 100% + rgba(255, 255, 255, 0) 0%, + $skeleton-animation-color 50%, + rgba(255, 255, 255, 0) 100% ); + transform: skewX(-30deg); animation-name: nut-skeleton; animation-delay: 0s; - animation-duration: 0.6s; + animation-duration: 0.4s; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; @@ -56,12 +57,22 @@ } @keyframes nut-skeleton { - from { - transform: translateX(-100%); + 0% { + left: -80px; + opacity: 0; } - to { - transform: translateX(100%); + 5% { + opacity: 1; + } + + 95% { + opacity: 1; + } + + 100% { + left: 100%; + opacity: 0; } } } @@ -70,19 +81,34 @@ .nut-rtl .nut-skeleton { &-animation { left: auto; - right: 0; - animation: nut-skeleton-rtl 2s linear 0s infinite; + right: -80px; + transform: skewX(30deg); + animation-name: nut-skeleton-rtl; } @keyframes nut-skeleton-rtl { - from { - //background-position: -200% 0; - transform: translateX(100%); + 0% { + right: -80px; + opacity: 0; + } + + 5% { + opacity: 1; + } + + 95% { + opacity: 1; } - to { - //background-position: 200% 0; - transform: translateX(-100%); + 100% { + right: 100%; + opacity: 0; } } } + +.nut-theme-dark { + // 组件级覆盖 + // skeleton 加载光影：暗黑下背景近黑，白色光影对比过强，降低透明度 + --nutui-skeleton-animation-color: var(--nutui-black-3); +} diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx index 08f25a7f9a..e79f690c93 100644 --- a/src/packages/skeleton/skeleton.taro.tsx +++ b/src/packages/skeleton/skeleton.taro.tsx @@ -16,7 +16,7 @@ const defaultProps = { visible: false, size: 'normal', shape: 'round', - duration: 0.6, + duration: 0.4, } as TaroSkeletonProps export const Skeleton: FunctionComponent> = ( props diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx index 9d598d20cf..fe21a85d5d 100644 --- a/src/packages/skeleton/skeleton.tsx +++ b/src/packages/skeleton/skeleton.tsx @@ -15,7 +15,7 @@ const defaultProps = { visible: false, size: 'normal', shape: 'round', - duration: 0.6, + duration: 0.4, } as WebSkeletonProps export const Skeleton: FunctionComponent> = ( props diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md index 2cbf1ed8f7..91b6bd6a64 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md @@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro - Added `--nutui-popover-padding-horizontal`, `--nutui-popover-padding-vertical`, `--nutui-popover-height`, `--nutui-popover-icon-size`, `--nutui-popover-icon-color`, `--nutui-popover-status-max-width`, `--nutui-popover-description-max-width`, `--nutui-popover-action-hotspot-size`. - `--nutui-popover-content-background-color` default changed from `#ffffff` to `$color-mask`; `--nutui-popover-text-color` from `$color-mask` to `$color-primary-text`. - `--nutui-popover-item-width` default changed from `160px` to `240px` (same as status max width). + +### Skeleton + +- **`size` visual spec updates (compatible)**: + - `large` (title) height changed from `32px` to `28px`; `normal` (price) height from `24px` to `20px`; `small` (paragraph) stays `16px`; border radius stays `4px`. + - Size semantics: `small` for paragraph, `normal` for price, `large` for title. +- **`duration` default changed (breaking default behavior)**: + - The shimmer sweep duration default changed from `0.6` (600ms) to `0.4` (400ms). To keep the original pace, pass `duration={0.6}` explicitly. +- **Background token update**: + - `--nutui-skeleton-background` default fallback changed from `$color-background-sunken` to `$color-background`, following the `color-background` token in dark mode automatically. +- **Shimmer visual redesign**: + - The loading shimmer changed from a dark horizontal-translate overlay to a white 30° diagonal light band (80px wide, gradient opacity 0% → 50% → 0%), sweeping left to right over 400ms and looping after a ~1s pause. diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v3.md b/src/sites/sites-react/doc/docs/react/migrate-from-v3.md index 3c8d132482..9ec2bfe106 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v3.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v3.md @@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro - 新增 `--nutui-popover-padding-horizontal`、`--nutui-popover-padding-vertical`、`--nutui-popover-height`、`--nutui-popover-icon-size`、`--nutui-popover-icon-color`、`--nutui-popover-status-max-width`、`--nutui-popover-description-max-width`、`--nutui-popover-action-hotspot-size`。 - `--nutui-popover-content-background-color` 默认值由 `#ffffff` 改为 `$color-mask`；`--nutui-popover-text-color` 由 `$color-mask` 改为 `$color-primary-text`。 - `--nutui-popover-item-width` 默认值由 `160px` 改为 `240px`（等同状态型最大宽度）。 + +### Skeleton (反馈类) + +- **`size` 视觉规格对齐设计稿（兼容升级）**： + - `large`（标题）高度由 `32px` 调整为 `28px`；`normal`（价格）高度由 `24px` 调整为 `20px`；`small`（正文）保持 `16px`；圆角保持 `4px`。 + - 尺寸语义映射：`small` 对应正文、`normal` 对应价格、`large` 对应标题。 +- **`duration` 默认值变更（不兼容默认值行为）**： + - 光晕移动时长默认值由 `0.6`（600ms）调整为 `0.4`（400ms）。如需维持原有节奏，请显式传入 `duration={0.6}`。 +- **背景色令牌调整**： + - `--nutui-skeleton-background` 默认回退值由 `$color-background-sunken` 改为 `$color-background`，暗黑模式下自动跟随 `color-background` 令牌。 +- **光晕视觉重做**： + - 加载光晕由横向平移的深色叠加改为白色 30° 斜向光带（宽 80px，渐变透明度 0% → 50% → 0%），由左至右移动 400ms、停顿约 1s 后循环。 diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md index 2cbf1ed8f7..91b6bd6a64 100644 --- a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md @@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro - Added `--nutui-popover-padding-horizontal`, `--nutui-popover-padding-vertical`, `--nutui-popover-height`, `--nutui-popover-icon-size`, `--nutui-popover-icon-color`, `--nutui-popover-status-max-width`, `--nutui-popover-description-max-width`, `--nutui-popover-action-hotspot-size`. - `--nutui-popover-content-background-color` default changed from `#ffffff` to `$color-mask`; `--nutui-popover-text-color` from `$color-mask` to `$color-primary-text`. - `--nutui-popover-item-width` default changed from `160px` to `240px` (same as status max width). + +### Skeleton + +- **`size` visual spec updates (compatible)**: + - `large` (title) height changed from `32px` to `28px`; `normal` (price) height from `24px` to `20px`; `small` (paragraph) stays `16px`; border radius stays `4px`. + - Size semantics: `small` for paragraph, `normal` for price, `large` for title. +- **`duration` default changed (breaking default behavior)**: + - The shimmer sweep duration default changed from `0.6` (600ms) to `0.4` (400ms). To keep the original pace, pass `duration={0.6}` explicitly. +- **Background token update**: + - `--nutui-skeleton-background` default fallback changed from `$color-background-sunken` to `$color-background`, following the `color-background` token in dark mode automatically. +- **Shimmer visual redesign**: + - The loading shimmer changed from a dark horizontal-translate overlay to a white 30° diagonal light band (80px wide, gradient opacity 0% → 50% → 0%), sweeping left to right over 400ms and looping after a ~1s pause. diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md index 3c8d132482..9ec2bfe106 100644 --- a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md +++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md @@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro - 新增 `--nutui-popover-padding-horizontal`、`--nutui-popover-padding-vertical`、`--nutui-popover-height`、`--nutui-popover-icon-size`、`--nutui-popover-icon-color`、`--nutui-popover-status-max-width`、`--nutui-popover-description-max-width`、`--nutui-popover-action-hotspot-size`。 - `--nutui-popover-content-background-color` 默认值由 `#ffffff` 改为 `$color-mask`；`--nutui-popover-text-color` 由 `$color-mask` 改为 `$color-primary-text`。 - `--nutui-popover-item-width` 默认值由 `160px` 改为 `240px`（等同状态型最大宽度）。 + +### Skeleton (反馈类) + +- **`size` 视觉规格对齐设计稿（兼容升级）**： + - `large`（标题）高度由 `32px` 调整为 `28px`；`normal`（价格）高度由 `24px` 调整为 `20px`；`small`（正文）保持 `16px`；圆角保持 `4px`。 + - 尺寸语义映射：`small` 对应正文、`normal` 对应价格、`large` 对应标题。 +- **`duration` 默认值变更（不兼容默认值行为）**： + - 光晕移动时长默认值由 `0.6`（600ms）调整为 `0.4`（400ms）。如需维持原有节奏，请显式传入 `duration={0.6}`。 +- **背景色令牌调整**： + - `--nutui-skeleton-background` 默认回退值由 `$color-background-sunken` 改为 `$color-background`，暗黑模式下自动跟随 `color-background` 令牌。 +- **光晕视觉重做**： + - 加载光晕由横向平移的深色叠加改为白色 30° 斜向光带（宽 80px，渐变透明度 0% → 50% → 0%），由左至右移动 400ms、停顿约 1s 后循环。 diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss index 6dfa6eaec2..af9cf222e4 100644 --- a/src/styles/variables-daojia.scss +++ b/src/styles/variables-daojia.scss @@ -1534,16 +1534,18 @@ $form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default; // skeleton（✅） $skeleton-background: var(--nutui-skeleton-background, - $color-background-sunken) !default; + $color-background) !default; $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default; $skeleton-line-small-height: var(--nutui-skeleton-line-small-height, 16px) !default; $skeleton-line-normal-height: var(--nutui-skeleton-line-normal-height, - 24px) !default; + 20px) !default; $skeleton-line-large-height: var(--nutui-skeleton-line-large-height, - 32px) !default; + 28px) !default; $skeleton-line-border-radius: var(--nutui-skeleton-line-border-radius, $radius-xs) !default; +$skeleton-animation-color: var(--nutui-skeleton-animation-color, + rgba(255, 255, 255, 0.5)) !default; // card（✅） $card-border-radius: var(--nutui-card-border-radius, 4px) !default; diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index 1e0e812de4..8c12b52fd9 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -2556,16 +2556,20 @@ $skeleton-line-small-height: var( ) !default; $skeleton-line-normal-height: var( --nutui-skeleton-line-normal-height, - 24px + 20px ) !default; $skeleton-line-large-height: var( --nutui-skeleton-line-large-height, - 32px + 28px ) !default; $skeleton-line-border-radius: var( --nutui-skeleton-line-border-radius, 0 ) !default; +$skeleton-animation-color: var( + --nutui-skeleton-animation-color, + rgba(255, 255, 255, 0.5) +) !default; // card（✅） $card-border-radius: var(--nutui-card-border-radius, 4px) !default; diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index b41d681366..1fcd262a45 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -2616,16 +2616,20 @@ $skeleton-line-small-height: var( ) !default; $skeleton-line-normal-height: var( --nutui-skeleton-line-normal-height, - 24px + 20px ) !default; $skeleton-line-large-height: var( --nutui-skeleton-line-large-height, - 32px + 28px ) !default; $skeleton-line-border-radius: var( --nutui-skeleton-line-border-radius, 0 ) !default; +$skeleton-animation-color: var( + --nutui-skeleton-animation-color, + rgba(255, 255, 255, 0.5) +) !default; // card（✅） $card-border-radius: var(--nutui-card-border-radius, 4px) !default; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 0b14d2fa72..e9ef0620b7 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2504,7 +2504,7 @@ $form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default; // skeleton（✅） $skeleton-background: var( --nutui-skeleton-background, - $color-background-sunken + $color-background ) !default; $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default; $skeleton-line-small-height: var( @@ -2513,16 +2513,20 @@ $skeleton-line-small-height: var( ) !default; $skeleton-line-normal-height: var( --nutui-skeleton-line-normal-height, - scale-px(24px) + scale-px(20px) ) !default; $skeleton-line-large-height: var( --nutui-skeleton-line-large-height, - scale-px(32px) + scale-px(28px) ) !default; $skeleton-line-border-radius: var( --nutui-skeleton-line-border-radius, $radius-xs ) !default; +$skeleton-animation-color: var( + --nutui-skeleton-animation-color, + rgba(255, 255, 255, 0.5) +) !default; // card（✅） $card-border-radius: var(--nutui-card-border-radius, scale-px(4px)) !default;