mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-01-02 13:26:57 +08:00
Compare commits
10 Commits
next
...
v4.0.0-rc.
| Author | SHA1 | Date | |
|---|---|---|---|
|
bcae14d7cb | ||
|
|
4756168ae7 | ||
|
|
fd9cf38022 | ||
|
|
34360abd3b | ||
|
|
b6f2eb3e2a | ||
|
|
845c0b720b | ||
|
|
c243ebd1ff | ||
|
|
09c2bd8efd | ||
|
|
8df6eaf5a0 | ||
|
|
99833f2185 |
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
// colors
|
||||
--van-doc-black: #000;
|
||||
--van-doc-white: #fff;
|
||||
|
||||
@ -138,8 +138,8 @@ export default {
|
||||
currentTheme: {
|
||||
handler(newVal, oldVal) {
|
||||
window.localStorage.setItem('vantTheme', newVal);
|
||||
document.body.classList.remove(`van-doc-theme-${oldVal}`);
|
||||
document.body.classList.add(`van-doc-theme-${newVal}`);
|
||||
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
|
||||
document.documentElement.classList.add(`van-doc-theme-${newVal}`);
|
||||
syncThemeToChild(newVal);
|
||||
},
|
||||
immediate: true,
|
||||
|
||||
@ -24,12 +24,15 @@ export default {
|
||||
watch(
|
||||
theme,
|
||||
(newVal, oldVal) => {
|
||||
document.body.classList.remove(`van-doc-theme-${oldVal}`);
|
||||
document.body.classList.add(`van-doc-theme-${newVal}`);
|
||||
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
|
||||
document.documentElement.classList.add(`van-doc-theme-${newVal}`);
|
||||
|
||||
const { darkModeClass } = config.site;
|
||||
if (darkModeClass) {
|
||||
document.body.classList.toggle(darkModeClass, newVal === 'dark');
|
||||
document.documentElement.classList.toggle(
|
||||
darkModeClass,
|
||||
newVal === 'dark'
|
||||
);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
@ -43,6 +46,7 @@ export default {
|
||||
|
||||
body {
|
||||
min-width: 100vw;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.van-doc-theme-light {
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
node_modules
|
||||
dist
|
||||
lib
|
||||
*.tsx
|
||||
@ -19,6 +19,22 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
|
||||
## Details
|
||||
|
||||
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
|
||||
|
||||
`2022-09-10`
|
||||
|
||||
**Feature**
|
||||
|
||||
- export props of all components [#11024](https://github.com/vant-ui/vant/issues/11024)
|
||||
- Dialog: message-align can be justify [#11014](https://github.com/vant-ui/vant/issues/11014)
|
||||
- Image: add block prop [#11022](https://github.com/vant-ui/vant/issues/11022)
|
||||
- Toast: add message slot [#11018](https://github.com/vant-ui/vant/issues/11018)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Picker: failed to update value in some cases [#11009](https://github.com/vant-ui/vant/issues/11009)
|
||||
- Locale: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
|
||||
|
||||
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
|
||||
|
||||
`2022-09-04`
|
||||
|
||||
@ -19,6 +19,22 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
## 更新内容
|
||||
|
||||
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
|
||||
|
||||
`2022-09-10`
|
||||
|
||||
**Feature**
|
||||
|
||||
- 导出所有组件的 props，方便进行二次封装 [#11024](https://github.com/vant-ui/vant/issues/11024)
|
||||
- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
|
||||
- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
|
||||
- Toast: 新增 message 插槽 [#11018](https://github.com/vant-ui/vant/issues/11018)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Picker: 修复部分情况下未正确更新选中值的问题 [#11009](https://github.com/vant-ui/vant/issues/11009)
|
||||
- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
|
||||
|
||||
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
|
||||
|
||||
`2022-09-04`
|
||||
|
||||
@ -38,9 +38,9 @@ pnpm dev
|
||||
|
||||
仓库的不同分支对应不同的 Vant 版本，请切换到对应分支进行开发：
|
||||
|
||||
- dev 分支对应 Vant 4 版本，适用于 Vue 3
|
||||
- 3.x 分支对应 Vant 3 版本 ，适用于 Vue 3
|
||||
- 2.x 分支对应 Vant 2 版本，适用于 Vue 2
|
||||
- dev 分支对应 Vant 3 版本 ，适用于 Vue 3
|
||||
- next 分支对应 Vant 4 版本，适用于 Vue 3
|
||||
|
||||
### 镜像仓库
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "4.0.0-rc.0",
|
||||
"version": "4.0.0-rc.2",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/vant.cjs.js",
|
||||
"module": "es/index.mjs",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-action-bar-button-height: 40px;
|
||||
--van-action-bar-button-warning-color: var(--van-gradient-orange);
|
||||
--van-action-bar-button-danger-color: var(--van-gradient-red);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-action-bar-icon-width: 48px;
|
||||
--van-action-bar-icon-height: 100%;
|
||||
--van-action-bar-icon-color: var(--van-text-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-action-bar-background: var(--van-background-2);
|
||||
--van-action-bar-height: 50px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
body {
|
||||
:root {
|
||||
--van-action-sheet-max-height: 80%;
|
||||
--van-action-sheet-header-height: 48px;
|
||||
--van-action-sheet-header-font-size: var(--van-font-size-lg);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-address-edit-padding: var(--van-padding-sm);
|
||||
--van-address-edit-buttons-padding: var(--van-padding-xl)
|
||||
var(--van-padding-base);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
|
||||
--van-address-list-disabled-text-color: var(--van-text-color-2);
|
||||
--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-badge-size: 16px;
|
||||
--van-badge-color: var(--van-white);
|
||||
--van-badge-padding: 0 3px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-button-mini-height: 24px;
|
||||
--van-button-mini-padding: 0 var(--van-padding-base);
|
||||
--van-button-mini-font-size: var(--van-font-size-xs);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-calendar-background: var(--van-background-2);
|
||||
--van-calendar-popup-height: 80%;
|
||||
--van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-card-padding: var(--van-padding-xs) var(--van-padding-md);
|
||||
--van-card-font-size: var(--van-font-size-sm);
|
||||
--van-card-text-color: var(--van-text-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-cascader-header-height: 48px;
|
||||
--van-cascader-header-padding: 0 var(--van-padding-md);
|
||||
--van-cascader-title-font-size: var(--van-font-size-lg);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-cell-group-background: var(--van-background-2);
|
||||
--van-cell-group-title-color: var(--van-text-color-2);
|
||||
--van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
body {
|
||||
:root {
|
||||
--van-cell-font-size: var(--van-font-size-md);
|
||||
--van-cell-line-height: 24px;
|
||||
--van-cell-vertical-padding: 10px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-checkbox-size: 20px;
|
||||
--van-checkbox-border-color: var(--van-gray-5);
|
||||
--van-checkbox-duration: var(--van-duration-fast);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-circle-size: 100px;
|
||||
--van-circle-color: var(--van-primary-color);
|
||||
--van-circle-layer-color: var(--van-white);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
body {
|
||||
:root {
|
||||
--van-collapse-item-duration: var(--van-duration-base);
|
||||
--van-collapse-item-content-padding: var(--van-padding-sm)
|
||||
var(--van-padding-md);
|
||||
|
||||
@ -73,10 +73,10 @@ export default defineComponent({
|
||||
|
||||
if (inBrowser) {
|
||||
const addTheme = () => {
|
||||
document.body.classList.add(`van-theme-${props.theme}`);
|
||||
document.documentElement.classList.add(`van-theme-${props.theme}`);
|
||||
};
|
||||
const removeTheme = (theme = props.theme) => {
|
||||
document.body.classList.remove(`van-theme-${theme}`);
|
||||
document.documentElement.classList.remove(`van-theme-${theme}`);
|
||||
};
|
||||
|
||||
watch(
|
||||
|
||||
@ -69,10 +69,10 @@ Looking at the style of the Button component, you can see that the following var
|
||||
}
|
||||
```
|
||||
|
||||
The default values of these variables are defined on the `body` node:
|
||||
The default values of these variables are defined on the `:root` node:
|
||||
|
||||
```css
|
||||
body {
|
||||
:root {
|
||||
--van-white: #fff;
|
||||
--van-blue: #1989fa;
|
||||
--van-button-primary-color: var(--van-white);
|
||||
@ -88,7 +88,7 @@ You can directly override these CSS variables in the code, and the style of the
|
||||
|
||||
```css
|
||||
/* the Primary Button will turn red */
|
||||
body {
|
||||
:root {
|
||||
--van-button-primary-background: red;
|
||||
}
|
||||
```
|
||||
@ -197,8 +197,8 @@ CSS variables in Vant are divided into **basic variables** and **component varia
|
||||
|
||||
#### Modify Basic Variables
|
||||
|
||||
- The basic variables can only be modified through the `body` selector.
|
||||
- The component variables can be modified through the `body` selector and `ConfigProvider` component.
|
||||
- The basic variables can only be modified through the `:root` selector.
|
||||
- The component variables can be modified through the `:root` selector and `ConfigProvider` component.
|
||||
|
||||
#### Variables List
|
||||
|
||||
|
||||
@ -69,10 +69,10 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
|
||||
}
|
||||
```
|
||||
|
||||
这些变量的默认值被定义在 `body` 节点上，body 下所有子节点都可以访问到这些变量：
|
||||
这些变量的默认值被定义在 `:root` 节点上，HTML 里的所有子节点都可以访问到这些变量：
|
||||
|
||||
```css
|
||||
body {
|
||||
:root {
|
||||
--van-white: #fff;
|
||||
--van-blue: #1989fa;
|
||||
--van-button-primary-color: var(--van-white);
|
||||
@ -88,7 +88,7 @@ body {
|
||||
|
||||
```css
|
||||
/* 添加这段样式后，Primary Button 会变成红色 */
|
||||
body {
|
||||
:root {
|
||||
--van-button-primary-background: red;
|
||||
}
|
||||
```
|
||||
@ -148,7 +148,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 body 节点。
|
||||
> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
|
||||
|
||||
### 结合深色模式与 CSS 变量
|
||||
|
||||
@ -199,8 +199,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
|
||||
|
||||
由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
|
||||
|
||||
- 基础变量只能通过 `body 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
|
||||
- 组件变量可以通过 `body 选择器` 和 `ConfigProvider 组件` 修改。
|
||||
- 基础变量只能通过 `:root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
|
||||
- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
|
||||
|
||||
#### 变量列表
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-contact-card-padding: var(--van-padding-md);
|
||||
--van-contact-card-add-icon-size: 40px;
|
||||
--van-contact-card-add-icon-color: var(--van-primary-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-contact-edit-padding: var(--van-padding-md);
|
||||
--van-contact-edit-fields-radius: var(--van-radius-md);
|
||||
--van-contact-edit-buttons-padding: var(--van-padding-xl) 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-contact-list-edit-icon-size: 16px;
|
||||
--van-contact-list-add-button-z-index: 999;
|
||||
--van-contact-list-radio-color: var(--van-primary-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-count-down-text-color: var(--van-text-color);
|
||||
--van-count-down-font-size: var(--van-font-size-md);
|
||||
--van-count-down-line-height: var(--van-line-height-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-coupon-cell-selected-text-color: var(--van-text-color);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-coupon-list-background: var(--van-background);
|
||||
--van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
|
||||
--van-coupon-list-exchange-button-height: 32px;
|
||||
@ -16,7 +16,7 @@ body {
|
||||
&__field {
|
||||
padding: var(--van-coupon-list-field-padding);
|
||||
|
||||
.van-field__body {
|
||||
.van-field__:root {
|
||||
height: 34px;
|
||||
padding-left: var(--van-padding-sm);
|
||||
line-height: 34px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import '../style/mixins/ellipsis';
|
||||
|
||||
body {
|
||||
:root {
|
||||
--van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
|
||||
--van-coupon-content-height: 84px;
|
||||
--van-coupon-content-padding: 14px 0;
|
||||
@ -76,7 +76,7 @@ body {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
&__body {
|
||||
&__:root {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
border-radius: 0 var(--van-coupon-radius) var(--van-coupon-radius) 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-dialog-width: 320px;
|
||||
--van-dialog-small-screen-width: 90%;
|
||||
--van-dialog-font-size: var(--van-font-size-lg);
|
||||
@ -132,12 +132,12 @@ body {
|
||||
}
|
||||
|
||||
&-bounce-enter-from {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.7);
|
||||
transform: translate3d(0, -50%, 0) scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-bounce-leave-active {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
||||
transform: translate3d(0, -50%, 0) scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-divider-margin: var(--van-padding-md) 0;
|
||||
--van-divider-text-color: var(--van-text-color-2);
|
||||
--van-divider-font-size: var(--van-font-size-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-dropdown-item-z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-dropdown-menu-height: 48px;
|
||||
--van-dropdown-menu-background: var(--van-background-2);
|
||||
--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
|
||||
|
||||
@ -74,7 +74,7 @@ const active = ref('error');
|
||||
|
||||
<style lang="less">
|
||||
.demo-empty {
|
||||
background: var(--van-background-color-light);
|
||||
background: var(--van-background-2);
|
||||
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-empty-padding: var(--van-padding-xl) 0;
|
||||
--van-empty-image-size: 160px;
|
||||
--van-empty-description-margin-top: var(--van-padding-md);
|
||||
@ -39,3 +39,7 @@ body {
|
||||
margin-top: var(--van-empty-bottom-margin-top);
|
||||
}
|
||||
}
|
||||
|
||||
.van-theme-dark .van-empty {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-field-label-width: 6.2em;
|
||||
--van-field-label-color: var(--van-text-color);
|
||||
--van-field-label-margin-right: var(--van-padding-sm);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
|
||||
--van-grid-item-content-background: var(--van-background-2);
|
||||
--van-grid-item-content-active-color: var(--van-active-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-image-preview-index-text-color: var(--van-white);
|
||||
--van-image-preview-index-font-size: var(--van-font-size-md);
|
||||
--van-image-preview-index-line-height: var(--van-line-height-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-image-placeholder-text-color: var(--van-text-color-2);
|
||||
--van-image-placeholder-font-size: var(--van-font-size-md);
|
||||
--van-image-placeholder-background: var(--van-background);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-index-anchor-z-index: 1;
|
||||
--van-index-anchor-padding: 0 var(--van-padding-md);
|
||||
--van-index-anchor-text-color: var(--van-text-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-index-bar-sidebar-z-index: 2;
|
||||
--van-index-bar-index-font-size: var(--van-font-size-xs);
|
||||
--van-index-bar-index-line-height: var(--van-line-height-xs);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-list-text-color: var(--van-text-color-2);
|
||||
--van-list-text-font-size: var(--van-font-size-md);
|
||||
--van-list-text-line-height: 50px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-loading-text-color: var(--van-text-color-2);
|
||||
--van-loading-text-font-size: var(--van-font-size-md);
|
||||
--van-loading-spinner-color: var(--van-gray-5);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-nav-bar-height: 46px;
|
||||
--van-nav-bar-background: var(--van-background-2);
|
||||
--van-nav-bar-arrow-size: 16px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-notice-bar-height: 40px;
|
||||
--van-notice-bar-padding: 0 var(--van-padding-md);
|
||||
--van-notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-notify-text-color: var(--van-white);
|
||||
--van-notify-padding: var(--van-padding-xs) var(--van-padding-md);
|
||||
--van-notify-font-size: var(--van-font-size-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-number-keyboard-background: var(--van-gray-2);
|
||||
--van-number-keyboard-key-height: 48px;
|
||||
--van-number-keyboard-key-font-size: 28px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-overlay-z-index: 1;
|
||||
--van-overlay-background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-pagination-height: 40px;
|
||||
--van-pagination-font-size: var(--van-font-size-md);
|
||||
--van-pagination-item-width: 36px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-password-input-height: 50px;
|
||||
--van-password-input-margin: 0 var(--van-padding-md);
|
||||
--van-password-input-font-size: 20px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-picker-group-background: var(--van-background-2);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-picker-background: var(--van-background-2);
|
||||
--van-picker-toolbar-height: 44px;
|
||||
--van-picker-title-font-size: var(--van-font-size-lg);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-popover-arrow-size: 6px;
|
||||
--van-popover-radius: var(--van-radius-lg);
|
||||
--van-popover-action-width: 128px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-popup-background: var(--van-background-2);
|
||||
--van-popup-transition: transform var(--van-duration-base);
|
||||
--van-popup-round-radius: 16px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-progress-height: 4px;
|
||||
--van-progress-color: var(--van-primary-color);
|
||||
--van-progress-inactive-color: var(--van-gray-5);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-pull-refresh-head-height: 50px;
|
||||
--van-pull-refresh-head-font-size: var(--van-font-size-md);
|
||||
--van-pull-refresh-head-text-color: var(--van-text-color-2);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-radio-size: 20px;
|
||||
--van-radio-border-color: var(--van-gray-5);
|
||||
--van-radio-duration: var(--van-duration-fast);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-rate-icon-size: 20px;
|
||||
--van-rate-icon-gutter: var(--van-padding-base);
|
||||
--van-rate-icon-void-color: var(--van-gray-5);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-search-padding: 10px var(--van-padding-sm);
|
||||
--van-search-background: var(--van-background-2);
|
||||
--van-search-content-background: var(--van-background);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
body {
|
||||
:root {
|
||||
--van-share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md);
|
||||
--van-share-sheet-title-color: var(--van-text-color);
|
||||
--van-share-sheet-title-font-size: var(--van-font-size-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-sidebar-font-size: var(--van-font-size-md);
|
||||
--van-sidebar-line-height: var(--van-line-height-md);
|
||||
--van-sidebar-text-color: var(--van-text-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-sidebar-width: 80px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-skeleton-row-height: 16px;
|
||||
--van-skeleton-row-background: var(--van-active-color);
|
||||
--van-skeleton-row-margin-top: var(--van-padding-sm);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-slider-active-background: var(--van-primary-color);
|
||||
--van-slider-inactive-background: var(--van-gray-3);
|
||||
--van-slider-disabled-opacity: var(--van-disabled-opacity);
|
||||
|
||||
@ -89,7 +89,7 @@ const align = ref('center');
|
||||
|
||||
<style lang="less">
|
||||
.demo-space {
|
||||
background: var(--van-background-color-light);
|
||||
background: var(--van-background-2);
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 var(--van-padding-md);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-step-text-color: var(--van-text-color-2);
|
||||
--van-step-active-color: var(--van-primary-color);
|
||||
--van-step-process-text-color: var(--van-text-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-stepper-background: var(--van-active-color);
|
||||
--van-stepper-button-icon-color: var(--van-text-color);
|
||||
--van-stepper-button-disabled-color: var(--van-background);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-steps-background: var(--van-background-2);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-sticky-z-index: 99;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
// Color Palette
|
||||
--van-black: #000;
|
||||
--van-white: #fff;
|
||||
|
||||
2
packages/vant/src/style/normalize.less
vendored
2
packages/vant/src/style/normalize.less
vendored
@ -2,7 +2,7 @@ html {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
:root {
|
||||
margin: 0;
|
||||
font-family: var(--van-base-font);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-submit-bar-height: 50px;
|
||||
--van-submit-bar-z-index: 100;
|
||||
--van-submit-bar-background: var(--van-background-2);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-swipe-indicator-size: 6px;
|
||||
--van-swipe-indicator-margin: var(--van-padding-sm);
|
||||
--van-swipe-indicator-active-opacity: 1;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-switch-size: 26px;
|
||||
--van-switch-width: calc(1.8em + 4px);
|
||||
--van-switch-height: calc(1em + 4px);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-tabbar-item-font-size: var(--van-font-size-sm);
|
||||
--van-tabbar-item-text-color: var(--van-text-color);
|
||||
--van-tabbar-item-active-color: var(--van-primary-color);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-tabbar-height: 50px;
|
||||
--van-tabbar-z-index: 1;
|
||||
--van-tabbar-background: var(--van-background-2);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-tab-text-color: var(--van-gray-7);
|
||||
--van-tab-active-text-color: var(--van-text-color);
|
||||
--van-tab-disabled-text-color: var(--van-text-color-3);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-tag-padding: 0 var(--van-padding-base);
|
||||
--van-tag-text-color: var(--van-white);
|
||||
--van-tag-font-size: var(--van-font-size-sm);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-toast-max-width: 70%;
|
||||
--van-toast-font-size: var(--van-font-size-md);
|
||||
--van-toast-text-color: var(--van-white);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-tree-select-font-size: var(--van-font-size-md);
|
||||
--van-tree-select-nav-background: var(--van-background);
|
||||
--van-tree-select-content-background: var(--van-background-2);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
:root {
|
||||
--van-uploader-size: 80px;
|
||||
--van-uploader-icon-size: 24px;
|
||||
--van-uploader-icon-color: var(--van-gray-4);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user