blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Cascader): add less vars

Browse Source
This commit is contained in:
chenjiahan 2020-12-20 20:46:57 +08:00 committed by neverland
parent ce5bb85756
commit 5fc1a8a06e
4 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/cascader/README.md
View File

@ -100,3 +100,22 @@ export default {
| Name | Description |
| ----- | ------------ |
| title | Custom title |
### Less Variables
How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description |
| ------------------------------------ | --------------- | ----------- |
| @cascader-header-height | `48px` | - |
| @cascader-title-font-size | `@font-size-lg` | - |
| @cascader-title-line-height | `20px` | - |
| @cascader-close-icon-size | `22px` | - |
| @cascader-close-icon-color | `@gray-5` | - |
| @cascader-close-icon-active-color | `@gray-6` | - |
| @cascader-selected-icon-size | `18px` | - |
| @cascader-tabs-height | `48px` | - |
| @cascader-active-color | `@red` | - |
| @cascader-options-height | `384px` | - |
| @cascader-tab-title-color | `@text-color` | - |
| @cascader-unselected-tab-title-color | `@gray-6` | - |

19
src/cascader/README.zh-CN.md
View File

@ -110,3 +110,22 @@ export default {
| 名称 | 说明 |
| ----- | -------------- |
| title | 自定义顶部标题 |
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
| 名称 | 默认值 | 描述 |
| ------------------------------------ | --------------- | ---- |
| @cascader-header-height | `48px` | - |
| @cascader-title-font-size | `@font-size-lg` | - |
| @cascader-title-line-height | `20px` | - |
| @cascader-close-icon-size | `22px` | - |
| @cascader-close-icon-color | `@gray-5` | - |
| @cascader-close-icon-active-color | `@gray-6` | - |
| @cascader-selected-icon-size | `18px` | - |
| @cascader-tabs-height | `48px` | - |
| @cascader-active-color | `@red` | - |
| @cascader-options-height | `384px` | - |
| @cascader-tab-title-color | `@text-color` | - |
| @cascader-unselected-tab-title-color | `@gray-6` | - |

18
src/cascader/index.less
View File

@ -16,11 +16,11 @@
}
&__close-icon {
color: @gray-5;
font-size: 22px;
color: @cascader-close-icon-color;
font-size: @cascader-close-icon-color;
&:active {
color: @gray-6;
color: @cascader-close-icon-active-color;
}
}
@ -31,17 +31,17 @@
}
&.van-tabs--line .van-tabs__wrap {
height: 48px;
height: @cascader-tabs-height;
padding: 0 6px;
}
}
&__tab-title {
color: @gray-8;
color: @cascader-tab-title-color;
font-weight: @font-weight-bold;
&--unselected {
color: @gray-6;
color: @cascader-unselected-tab-title-color;
}
}
@ -58,17 +58,17 @@
}
&--selected {
color: @red;
color: @cascader-active-color;
}
}
&__selected-icon {
font-size: 18px;
font-size: @cascader-selected-icon-size;
}
&__options {
box-sizing: border-box;
height: 384px;
height: @cascader-options-height;
padding-top: 6px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;

9
src/style/var.less
View File

@ -205,6 +205,15 @@
@cascader-header-height: 48px;
@cascader-title-font-size: @font-size-lg;
@cascader-title-line-height: 20px;
@cascader-close-icon-size: 22px;
@cascader-close-icon-color: @gray-5;
@cascader-close-icon-active-color: @gray-6;
@cascader-selected-icon-size: 18px;
@cascader-tabs-height: 48px;
@cascader-active-color: @red;
@cascader-options-height: 384px;
@cascader-tab-title-color: @text-color;
@cascader-unselected-tab-title-color: @gray-6;
// Cell
@cell-font-size: @font-size-md;