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

style(AcitonBar): add @action-bar-icon-background-color less var (#8474)

Browse Source
This commit is contained in:
neverland 2021-04-08 10:14:34 +08:00 committed by GitHub
parent 3214b1dd80
commit 2a90cdbd71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/action-bar-icon/index.less
View File

@ -10,7 +10,7 @@
font-size: @action-bar-icon-font-size; font-size: @action-bar-icon-font-size;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
background-color: @white; background-color: @action-bar-icon-background-color;
cursor: pointer; cursor: pointer;
&:active { &:active {
@ -18,8 +18,7 @@
} }
&__icon { &__icon {
width: 1em; margin: 0 auto @padding-base;
margin: 0 auto 5px;
color: @action-bar-icon-color; color: @action-bar-icon-color;
font-size: @action-bar-icon-size; font-size: @action-bar-icon-size;
} }

1
src/action-bar-icon/var.less
View File

@ -7,3 +7,4 @@
@action-bar-icon-font-size: @font-size-xs; @action-bar-icon-font-size: @font-size-xs;
@action-bar-icon-active-color: @active-color; @action-bar-icon-active-color: @active-color;
@action-bar-icon-text-color: @gray-7; @action-bar-icon-text-color: @gray-7;
@action-bar-icon-background-color: @white;

3
src/action-bar/README.md
View File

@ -137,7 +137,7 @@ Use `badge` prop to show badge in icon.
How to use: [Custom Theme](#/en-US/theme). How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description | | Name | Default Value | Description |
| -------------------------------- | ------------------ | ----------- | | --------------------------------- | ------------------ | ----------- |
| @action-bar-background-color | `@white` | - | | @action-bar-background-color | `@white` | - |
| @action-bar-height | `50px` | - | | @action-bar-height | `50px` | - |
| @action-bar-icon-width | `48px` | - | | @action-bar-icon-width | `48px` | - |
@ -147,6 +147,7 @@ How to use: [Custom Theme](#/en-US/theme).
| @action-bar-icon-font-size | `@font-size-xs` | - | | @action-bar-icon-font-size | `@font-size-xs` | - |
| @action-bar-icon-active-color | `@active-color` | - | | @action-bar-icon-active-color | `@active-color` | - |
| @action-bar-icon-text-color | `@gray-7` | - | | @action-bar-icon-text-color | `@gray-7` | - |
| @action-bar-icon-background-color | `@white` | - |
| @action-bar-button-height | `40px` | - | | @action-bar-button-height | `40px` | - |
| @action-bar-button-warning-color | `@gradient-orange` | - | | @action-bar-button-warning-color | `@gradient-orange` | - |
| @action-bar-button-danger-color | `@gradient-red` | - | | @action-bar-button-danger-color | `@gradient-red` | - |

3
src/action-bar/README.zh-CN.md
View File

@ -141,7 +141,7 @@ export default {
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
| 名称 | 默认值 | 描述 | | 名称 | 默认值 | 描述 |
| -------------------------------- | ------------------ | ---- | | --------------------------------- | ------------------ | ---- |
| @action-bar-background-color | `@white` | - | | @action-bar-background-color | `@white` | - |
| @action-bar-height | `50px` | - | | @action-bar-height | `50px` | - |
| @action-bar-icon-width | `48px` | - | | @action-bar-icon-width | `48px` | - |
@ -151,6 +151,7 @@ export default {
| @action-bar-icon-font-size | `@font-size-xs` | - | | @action-bar-icon-font-size | `@font-size-xs` | - |
| @action-bar-icon-active-color | `@active-color` | - | | @action-bar-icon-active-color | `@active-color` | - |
| @action-bar-icon-text-color | `@gray-7` | - | | @action-bar-icon-text-color | `@gray-7` | - |
| @action-bar-icon-background-color | `@white` | - |
| @action-bar-button-height | `40px` | - | | @action-bar-button-height | `40px` | - |
| @action-bar-button-warning-color | `@gradient-orange` | - | | @action-bar-button-warning-color | `@gradient-orange` | - |
| @action-bar-button-danger-color | `@gradient-red` | - | | @action-bar-button-danger-color | `@gradient-red` | - |