From 4fa8879ed25c991659b840b7df73707ab3bb78b2 Mon Sep 17 00:00:00 2001 From: ShuGang Zhou Date: Thu, 22 Jun 2023 21:18:36 +0800 Subject: [PATCH] fix(FloatingBubble): optimized css var (#12009) --- packages/vant/src/floating-bubble/README.md | 15 ++++++++------- packages/vant/src/floating-bubble/README.zh-CN.md | 15 ++++++++------- packages/vant/src/floating-bubble/index.less | 9 +++++---- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/vant/src/floating-bubble/README.md b/packages/vant/src/floating-bubble/README.md index 171ec1096..8a4c46087 100644 --- a/packages/vant/src/floating-bubble/README.md +++ b/packages/vant/src/floating-bubble/README.md @@ -122,10 +122,11 @@ export type { The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). -| Name | Default Value | Description | -| --- | --- | --- | -| --van-floating-bubble-size | _48px_ | - | -| --van-floating-bubble-initial-space | _24px_ | - | -| --van-floating-bubble-background | _var(--van-primary-color)_ | - | -| --van-floating-bubble-color | _var(--van-background-2)_ | - | -| --van-floating-bubble-z-index | _999_ | - | +| Name | Default Value | Description | +| --------------------------------- | -------------------------- | ----------- | +| --van-floating-bubble-size | _48px_ | - | +| --van-floating-bubble-initial-gap | _24px_ | - | +| --van-floating-bubble-icon-size | _28px_ | - | +| --van-floating-bubble-background | _var(--van-primary-color)_ | - | +| --van-floating-bubble-color | _var(--van-background-2)_ | - | +| --van-floating-bubble-z-index | _999_ | - | diff --git a/packages/vant/src/floating-bubble/README.zh-CN.md b/packages/vant/src/floating-bubble/README.zh-CN.md index 3e01a3971..0efda01cd 100644 --- a/packages/vant/src/floating-bubble/README.zh-CN.md +++ b/packages/vant/src/floating-bubble/README.zh-CN.md @@ -122,10 +122,11 @@ export type { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------------- | -------------------------- | ---- | -| --van-floating-bubble-size | _48px_ | - | -| --van-floating-bubble-initial-space | _24px_ | - | -| --van-floating-bubble-background | _var(--van-primary-color)_ | - | -| --van-floating-bubble-color | _var(--van-background-2)_ | - | -| --van-floating-bubble-z-index | _999_ | - | +| 名称 | 默认值 | 描述 | +| --------------------------------- | -------------------------- | ---- | +| --van-floating-bubble-size | _48px_ | - | +| --van-floating-bubble-initial-gap | _24px_ | - | +| --van-floating-bubble-icon-size | _28px_ | - | +| --van-floating-bubble-background | _var(--van-primary-color)_ | - | +| --van-floating-bubble-color | _var(--van-background-2)_ | - | +| --van-floating-bubble-z-index | _999_ | - | diff --git a/packages/vant/src/floating-bubble/index.less b/packages/vant/src/floating-bubble/index.less index eef63437e..7c5f1ae78 100644 --- a/packages/vant/src/floating-bubble/index.less +++ b/packages/vant/src/floating-bubble/index.less @@ -1,6 +1,7 @@ :root { --van-floating-bubble-size: 48px; - --van-floating-bubble-initial-space: 24px; + --van-floating-bubble-initial-gap: 24px; + --van-floating-bubble-icon-size: 28px; --van-floating-bubble-background: var(--van-primary-color); --van-floating-bubble-color: var(--van-background-2); --van-floating-bubble-z-index: 999; @@ -10,8 +11,8 @@ position: fixed; left: 0; top: 0; - right: var(--van-floating-bubble-initial-space); - bottom: var(--van-floating-bubble-initial-space); + right: var(--van-floating-bubble-initial-gap); + bottom: var(--van-floating-bubble-initial-gap); width: var(--van-floating-bubble-size); height: var(--van-floating-bubble-size); box-sizing: border-box; @@ -33,6 +34,6 @@ } &__icon { - font-size: 28px; + font-size: var(--van-floating-bubble-icon-size); } }