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

[improvement] update color variables (#2010)

Browse Source
This commit is contained in:
neverland 2018-11-01 16:16:26 +08:00 committed by GitHub
parent 63816a4902
commit af168d6abc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 84 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/card/demo/index.vue
View File

@ -1,5 +1,5 @@
<template>
<demo-section background="#fff">
<demo-section background="white">
<demo-block :title="$t('basicUsage')">
<van-card
num="2"

2
packages/circle/en-US.md
View File

@ -60,7 +60,7 @@ export default {
| v-model | Current rate | `Number` | - |
| rate | Target rate | `Number` | `100` |
| size | Circle size | `String` | `100px` |
| color | Progress bar color | `String` | `#38f` |
| color | Progress bar color | `String` | `#1989fa` |
| layer-color | Layer color | `String` | `#fff` |
| fill | Fill color | `String` | `none` |
| speed | Animate speed（rate/s）| `Number` | - |

3
packages/circle/index.vue
View File

@ -13,6 +13,7 @@
<script>
import create from '../utils/create';
import { raf, cancel } from '../utils/raf';
import { BLUE } from '../utils/color';
export default create({
name: 'circle',
@ -39,7 +40,7 @@ export default create({
},
color: {
type: String,
default: '#38f'
default: BLUE
},
strokeWidth: {
type: Number,

2
packages/circle/test/__snapshots__/demo.spec.js.snap
View File

@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-circle" style="width:120px;height:120px;">
<svg viewBox="0 0 1060 1060">
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:none;stroke:#fff;stroke-width:40px;"></path>
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#38f;stroke-dashoffset:3140px;stroke-width:41px;"></path>
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#1989fa;stroke-dashoffset:3140px;stroke-width:41px;"></path>
</svg>
<div class="van-circle__text">0%</div>
</div>

2
packages/circle/zh-CN.md
View File

@ -61,7 +61,7 @@ export default {
| v-model | 当前进度 | `Number` | - | - |
| rate | 目标进度 | `Number` | `100` | - |
| size | 圆环直径 | `String` | `100px` | - |
| color | 进度条颜色 | `String` | `#38f` | - |
| color | 进度条颜色 | `String` | `#1989fa` | - |
| layer-color | 轨道颜色 | `String` | `#fff` | - |
| fill | 填充颜色 | `String` | `none` | - |
| speed | 动画速度（单位为 rate/s）| `Number` | - | - |

6
packages/field/demo/index.vue
View File

@ -137,11 +137,13 @@ export default {
</script>
<style lang="postcss">
@import '../../vant-css/src/common/var.css';
.demo-field {
padding-bottom: 30px;
.van-field__icon {
color: #38f;
.van-field__icon .van-icon {
color: $blue;
}
}
</style>

2
packages/number-keyboard/index.vue
View File

@ -28,7 +28,7 @@
</div>
<div v-if="theme === 'custom'" :class="b('sidebar')">
<key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
<key :text="closeButtonText" :type="['green', 'big']" @press="onPressKey" />
<key :text="closeButtonText" :type="['blue', 'big']" @press="onPressKey" />
</div>
</div>
</transition>

2
packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
View File

@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-number-keyboard__sidebar">
<i class="van-hairline van-key van-key van-key--delete van-key van-key--big">delete</i>
<i class="van-hairline van-key van-key van-key--green van-key van-key--big">完成</i>
<i class="van-hairline van-key van-key van-key--blue van-key van-key--big">完成</i>
</div>
</div>
</div>

2
packages/progress/en-US.md
View File

@ -55,7 +55,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
| inactive | Whether to be gray | `Boolean` | `false` |
| percentage | Percentage | `Number` | `false` |
| show-pivot | Whether to show text | `Boolean` | `true` |
| color | Color | `String` | `#38f` |
| color | Color | `String` | `#1989fa` |
| pivot-text | Text | `String` | percentage |
| pivot-color | Text background color | `String` | inherit progress color |
| text-color | Text color | `String` | `#fff` |

3
packages/progress/index.vue
View File

@ -8,6 +8,7 @@
<script>
import create from '../utils/create';
import { BLUE } from '../utils/color';
export default create({
name: 'progress',
@ -27,7 +28,7 @@ export default create({
},
color: {
type: String,
default: '#38f'
default: BLUE
},
textColor: {
type: String,

2
packages/progress/test/__snapshots__/demo.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span>
</div>
</div>
<div>

4
packages/progress/test/__snapshots__/index.spec.js.snap
View File

@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(51, 136, 255);"><!----></span></div>`;
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(25, 137, 250);"><!----></span></div>`;
exports[`calc width 2`] = `
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(51, 136, 255);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(51, 136, 255);">test</span></span>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span>
</div>
`;

2
packages/progress/zh-CN.md
View File

@ -57,7 +57,7 @@ Vue.use(Progress);
| inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | - |
| show-pivot | 是否显示进度文字 | `Boolean` | `true` | - |
| color | 进度条颜色 | `String` | `#38f` | - |
| color | 进度条颜色 | `String` | `#1989fa` | - |
| text-color | 进度条文字颜色 | `String` | `#fff` | - |
| pivot-text | 文字显示 | `String` | 百分比文字 | - |
| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 | - |

4
packages/steps/demo/index.vue
View File

@ -89,10 +89,12 @@ export default {
</script>
<style lang="postcss">
@import '../../vant-css/src/common/var.css';
.demo-steps {
.steps-success,
.van-icon-location {
color: #06bf04;
color: $green;
}
.van-button {

2
packages/steps/en-US.md
View File

@ -75,7 +75,7 @@ export default {
| title | Title | `String` | - |
| description | Description | `String` | - |
| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` |
| active-color | Active step color | `String` | `#06bf04` |
| active-color | Active step color | `String` | `#4b0` |
### Steps Slot

3
packages/steps/index.vue
View File

@ -20,6 +20,7 @@
<script>
import create from '../utils/create';
import { GREEN } from '../utils/color';
export default create({
name: 'steps',
@ -36,7 +37,7 @@ export default create({
},
activeColor: {
type: String,
default: '#06bf04'
default: GREEN
}
},

8
packages/steps/test/__snapshots__/demo.spec.js.snap
View File

@ -14,9 +14,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title" style="color:#06bf04;">商家接单</div>
<div class="van-step__title" style="color:#4b0;">商家接单</div>
<div class="van-step__circle-container">
<i class="van-icon van-icon-checked" style="color:#06bf04;font-size:undefined;">
<i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
</i>
</div>
@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title" style="color:#06bf04;">商家接单</div>
<div class="van-step__title" style="color:#4b0;">商家接单</div>
<div class="van-step__circle-container">
<i class="van-icon van-icon-checked" style="color:#06bf04;font-size:undefined;">
<i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
</i>
</div>

2
packages/steps/zh-CN.md
View File

@ -78,7 +78,7 @@ export default {
| icon | 描述栏图标 | `String` | - | - |
| icon-class | 图标额外类名 | `String` | - | - |
| direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
| active-color | 激活状态颜色 | `String` | `#06bf04` | - |
| active-color | 激活状态颜色 | `String` | `#4b0` | - |
### Steps Slot

8
packages/submit-bar/demo/index.vue
View File

@ -35,7 +35,7 @@
>
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
<span slot="tip">
{{ $t('tip2') }}<span class="van-edit-address" @click="onClickLink">{{ $t('tip3') }}</span>
{{ $t('tip2') }}<span class="edit-address" @click="onClickLink">{{ $t('tip3') }}</span>
</span>
</van-submit-bar>
</demo-block>
@ -83,13 +83,15 @@ export default {
</script>
<style lang="postcss">
@import '../../vant-css/src/common/var.css';
.demo-submit-bar {
.van-submit-bar {
position: relative;
}
.van-edit-address {
color: #38f;
.edit-address {
color: $blue;
}
.van-checkbox {

2
packages/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar">
<div class="van-submit-bar__tip">
<span>
你的收货地址不支持同城送, <span class="van-edit-address">修改地址</span></span>
你的收货地址不支持同城送, <span class="edit-address">修改地址</span></span>
</div>
<div class="van-submit-bar__bar">
<div class="van-checkbox">

6
packages/swipe-cell/demo/index.vue
View File

@ -68,20 +68,22 @@ export default {
</script>
<style lang="postcss">
@import '../../vant-css/src/common/var.css';
.demo-swipe-cell {
user-select: none;
.van-swipe-cell {
&__left,
&__right {
color: #FFFFFF;
color: $white;
font-size: 15px;
width: 65px;
height: 44px;
display: inline-block;
text-align: center;
line-height: 44px;
background-color: #F44;
background-color: $red;
}
}
}

2
packages/tag/demo/index.vue
View File

@ -3,8 +3,8 @@
<demo-block :title="$t('basicUsage')">
<van-tag>{{ $t('tag') }}</van-tag>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
<van-tag type="success">{{ $t('tag') }}</van-tag>
<van-tag type="primary">{{ $t('tag') }}</van-tag>
<van-tag type="success">{{ $t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('plain')">

2
packages/tag/en-US.md
View File

@ -14,8 +14,8 @@ Vue.use(Tag);
```html
<van-tag>Tag</van-tag>
<van-tag type="danger">Tag</van-tag>
<van-tag type="success">Tag</van-tag>
<van-tag type="primary">Tag</van-tag>
<van-tag type="success">Tag</van-tag>
```
#### Plain style

7
packages/tag/index.vue
View File

@ -16,12 +16,13 @@
<script>
import create from '../utils/create';
import { RED, BLUE, GREEN } from '../utils/color';
const DEFAULT_COLOR = '#999';
const COLOR_MAP = {
danger: '#f44',
primary: '#38f',
success: '#06bf04'
danger: RED,
primary: BLUE,
success: GREEN
};
export default create({

12
packages/tag/test/__snapshots__/demo.spec.js.snap
View File

@ -2,13 +2,13 @@
exports[`renders demo correctly 1`] = `
<div>
<div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#06bf04;">标签</span> <span class="van-tag" style="background-color:#38f;">标签</span></div>
<div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#4b0;">标签</span></div>
<div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#999;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround"
style="color:#38f;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#06bf04;">标签</span></div>
<div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--round" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--round"
style="background-color:#06bf04;">标签</span></div>
<div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--mark"
style="background-color:#06bf04;">标签</span></div>
style="color:#1989fa;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#4b0;">标签</span></div>
<div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--round" style="background-color:#1989fa;">标签</span> <span class="van-tag van-tag--round"
style="background-color:#4b0;">标签</span></div>
<div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#1989fa;">标签</span> <span class="van-tag van-tag--mark"
style="background-color:#4b0;">标签</span></div>
<div><span class="van-tag" style="background-color:#f2826a;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f2826a;">标签</span> <span class="van-tag" style="background-color:#7232dd;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround"
style="color:#7232dd;">标签</span></div>
<div><span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--medium" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--large" style="background-color:#f44;">标签</span></div>

2
packages/tag/zh-CN.md
View File

@ -15,8 +15,8 @@ Vue.use(Tag);
```html
<van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
```
#### 空心样式

3
packages/utils/color.js Normal file
View File

@ -0,0 +1,3 @@
export const RED = '#f44';
export const BLUE = '#1989fa';
export const GREEN = '#4b0';

2
packages/vant-css/src/card.css
View File

@ -5,10 +5,10 @@
color: $text-color;
height: 100px;
font-size: 12px;
background: #fafafa;
position: relative;
box-sizing: border-box;
padding: 5px 15px 5px 115px;
background-color: $background-color-light;
&:not(:first-child) {
margin-top: 10px;

4
packages/vant-css/src/checkbox.css
View File

@ -19,7 +19,7 @@ $van-checkbox-size: 20px;
color: transparent;
text-align: center;
line-height: inherit;
border: 1px solid #aaa;
border: 1px solid $gray-light;
width: $van-checkbox-size;
height: $van-checkbox-size;
box-sizing: border-box;
@ -33,7 +33,7 @@ $van-checkbox-size: 20px;
&--checked {
.van-icon {
color: #fff;
color: $white;
border-color: $green;
background-color: $green;
}

11
packages/vant-css/src/common/var.css
View File

@ -2,9 +2,11 @@
$black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$blue: #1989fa;
$orange: #ff976a;
$green: #06bf04;
$orange-dark: #ed6a0c;
$orange-light: #fffbe8;
$green: #4b0;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
$gray-darker: #666;
@ -15,14 +17,15 @@ $text-color: #333;
$border-color: #eee;
$active-color: #e8e8e8;
$background-color: #f8f8f8;
$background-color-light: #fafafa;
/* button */
$button-default-color: $text-color;
$button-default-background-color: $white;
$button-default-border-color: $border-color;
$button-primary-color: $white;
$button-primary-background-color: #4b0;
$button-primary-border-color: #4b0;
$button-primary-background-color: $green;
$button-primary-border-color: $green;
$button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: $red;

4
packages/vant-css/src/contact-card.css
View File

@ -34,8 +34,8 @@
#ff6c6c 20%,
transparent 0,
transparent 25%,
#3283fa 0,
#3283fa 45%,
$blue 0,
$blue 45%,
transparent 0,
transparent 50%
);

2
packages/vant-css/src/coupon-list.css
View File

@ -121,8 +121,8 @@
&__reason {
padding: 7px 15px;
background-color: #fbfbfb;
border-top: 1px dashed $border-color;
background-color: $background-color-light;
}
&--disabled {

2
packages/vant-css/src/info.css
View File

@ -1,9 +1,9 @@
@import './common/var.css';
.van-info {
color: #fff;
left: 100%;
top: -.5em;
color: $white;
font-size: .6em;
font-weight: 500;
padding: 0 .25em;

4
packages/vant-css/src/notice-bar.css
View File

@ -2,14 +2,14 @@
.van-notice-bar {
display: flex;
color: #ed6a0c;
height: 40px;
padding: 0 15px;
font-size: 14px;
line-height: 24px;
position: relative;
align-items: center;
background-color: #fffbe8;
color: $orange-dark;
background-color: $orange-light;
&--withicon {
position: relative;

10
packages/vant-css/src/number-keyboard.css
View File

@ -75,17 +75,17 @@ $van-number-keyboard-key-height: 54px;
line-height: calc($van-number-keyboard-key-height * 2);
}
&--green {
&--blue {
font-size: 20px;
color: $white;
background-color: $green;
background-color: $blue;
&.van-key--active {
background-color: #308305;
background-color: $blue;
}
&::after {
border-color: $green;
border-color: $blue;
}
}
@ -96,7 +96,7 @@ $van-number-keyboard-key-height: 54px;
}
&--gray {
background-color: #f3f3f6;
background-color: $background-color;
}
&--active {

5
packages/vant-css/src/pagination.css
View File

@ -8,17 +8,16 @@
&__item {
flex: 1;
color: $blue;
height: 40px;
min-width: 36px;
color: $blue;
background-color: $white;
box-sizing: border-box;
user-select: none;
&:active {
background-color: $blue;
color: $white;
opacity: 0.8;
background-color: $blue;
}
&::after {

2
packages/vant-css/src/stepper.css
View File

@ -33,7 +33,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: #6c6c6c;
background-color: $gray-darker;
}
&:active {

2
packages/vant-css/src/steps.css
View File

@ -140,8 +140,8 @@
display: block;
width: 5px;
height: 5px;
background-color: #888;
border-radius: 50%;
background-color: $gray-dark;
}
&--vertical {

2
packages/vant-css/src/switch.css
View File

@ -31,7 +31,7 @@
}
&--on {
background-color: #44db5e;
background-color: $blue;
.van-switch__node {
transform: translateX(.6em);

4
packages/vant-css/src/tabbar.css
View File

@ -4,7 +4,7 @@
width: 100%;
height: 50px;
display: flex;
background-color: #fff;
background-color: $white;
&--fixed {
left: 0;
@ -14,10 +14,10 @@
&-item {
flex: 1;
color: #666;
display: flex;
line-height: 1;
font-size: 12px;
color: $gray-darker;
align-items: center;
flex-direction: column;
justify-content: center;