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> <template>
<demo-section background="#fff"> <demo-section background="white">
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-card <van-card
num="2" num="2"

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

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

3
packages/circle/index.vue
View File

@ -13,6 +13,7 @@
<script> <script>
import create from '../utils/create'; import create from '../utils/create';
import { raf, cancel } from '../utils/raf'; import { raf, cancel } from '../utils/raf';
import { BLUE } from '../utils/color';
export default create({ export default create({
name: 'circle', name: 'circle',
@ -39,7 +40,7 @@ export default create({
}, },
color: { color: {
type: String, type: String,
default: '#38f' default: BLUE
}, },
strokeWidth: { strokeWidth: {
type: Number, 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;"> <div class="van-circle" style="width:120px;height:120px;">
<svg viewBox="0 0 1060 1060"> <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__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> </svg>
<div class="van-circle__text">0%</div> <div class="van-circle__text">0%</div>
</div> </div>

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

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

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

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

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

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

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

@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-number-keyboard__sidebar"> <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--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> </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` | | inactive | Whether to be gray | `Boolean` | `false` |
| percentage | Percentage | `Number` | `false` | | percentage | Percentage | `Number` | `false` |
| show-pivot | Whether to show text | `Boolean` | `true` | | show-pivot | Whether to show text | `Boolean` | `true` |
| color | Color | `String` | `#38f` | | color | Color | `String` | `#1989fa` |
| pivot-text | Text | `String` | percentage | | pivot-text | Text | `String` | percentage |
| pivot-color | Text background color | `String` | inherit progress color | | pivot-color | Text background color | `String` | inherit progress color |
| text-color | Text color | `String` | `#fff` | | text-color | Text color | `String` | `#fff` |

3
packages/progress/index.vue
View File

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

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

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<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> </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 // 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`] = ` 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> </div>
`; `;

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

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

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

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

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

@ -75,7 +75,7 @@ export default {
| title | Title | `String` | - | | title | Title | `String` | - |
| description | Description | `String` | - | | description | Description | `String` | - |
| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` | | 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 ### Steps Slot

3
packages/steps/index.vue
View File

@ -20,6 +20,7 @@
<script> <script>
import create from '../utils/create'; import create from '../utils/create';
import { GREEN } from '../utils/color';
export default create({ export default create({
name: 'steps', name: 'steps',
@ -36,7 +37,7 @@ export default create({
}, },
activeColor: { activeColor: {
type: String, 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 class="van-step__line"></div>
</div> </div>
<div class="van-hairline van-step van-step--horizontal van-step--process"> <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"> <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> </i>
</div> </div>
@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__line"></div> <div class="van-step__line"></div>
</div> </div>
<div class="van-hairline van-step van-step--horizontal van-step--process"> <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"> <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> </i>
</div> </div>

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

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

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

@ -35,7 +35,7 @@
> >
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox> <van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
<span slot="tip"> <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> </span>
</van-submit-bar> </van-submit-bar>
</demo-block> </demo-block>
@ -83,13 +83,15 @@ export default {
</script> </script>
<style lang="postcss"> <style lang="postcss">
@import '../../vant-css/src/common/var.css';
.demo-submit-bar { .demo-submit-bar {
.van-submit-bar { .van-submit-bar {
position: relative; position: relative;
} }
.van-edit-address { .edit-address {
color: #38f; color: $blue;
} }
.van-checkbox { .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">
<div class="van-submit-bar__tip"> <div class="van-submit-bar__tip">
<span> <span>
你的收货地址不支持同城送, <span class="van-edit-address">修改地址</span></span> 你的收货地址不支持同城送, <span class="edit-address">修改地址</span></span>
</div> </div>
<div class="van-submit-bar__bar"> <div class="van-submit-bar__bar">
<div class="van-checkbox"> <div class="van-checkbox">

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

@ -68,20 +68,22 @@ export default {
</script> </script>
<style lang="postcss"> <style lang="postcss">
@import '../../vant-css/src/common/var.css';
.demo-swipe-cell { .demo-swipe-cell {
user-select: none; user-select: none;
.van-swipe-cell { .van-swipe-cell {
&__left, &__left,
&__right { &__right {
color: #FFFFFF; color: $white;
font-size: 15px; font-size: 15px;
width: 65px; width: 65px;
height: 44px; height: 44px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
line-height: 44px; 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')"> <demo-block :title="$t('basicUsage')">
<van-tag>{{ $t('tag') }}</van-tag> <van-tag>{{ $t('tag') }}</van-tag>
<van-tag type="danger">{{ $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="primary">{{ $t('tag') }}</van-tag>
<van-tag type="success">{{ $t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('plain')"> <demo-block :title="$t('plain')">

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

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

7
packages/tag/index.vue
View File

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

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

@ -2,13 +2,13 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <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" <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> 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:#38f;">标签</span> <span class="van-tag van-tag--round" <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:#06bf04;">标签</span></div> 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:#38f;">标签</span> <span class="van-tag van-tag--mark" <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:#06bf04;">标签</span></div> 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" <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> 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> <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 ```html
<van-tag>标签</van-tag> <van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag> <van-tag type="danger">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</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; color: $text-color;
height: 100px; height: 100px;
font-size: 12px; font-size: 12px;
background: #fafafa;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 15px 5px 115px; padding: 5px 15px 5px 115px;
background-color: $background-color-light;
&:not(:first-child) { &:not(:first-child) {
margin-top: 10px; margin-top: 10px;

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

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

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

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

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

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

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

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

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

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

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

@ -2,14 +2,14 @@
.van-notice-bar { .van-notice-bar {
display: flex; display: flex;
color: #ed6a0c;
height: 40px; height: 40px;
padding: 0 15px; padding: 0 15px;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
position: relative; position: relative;
align-items: center; align-items: center;
background-color: #fffbe8; color: $orange-dark;
background-color: $orange-light;
&--withicon { &--withicon {
position: relative; 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); line-height: calc($van-number-keyboard-key-height * 2);
} }
&--green { &--blue {
font-size: 20px; font-size: 20px;
color: $white; color: $white;
background-color: $green; background-color: $blue;
&.van-key--active { &.van-key--active {
background-color: #308305; background-color: $blue;
} }
&::after { &::after {
border-color: $green; border-color: $blue;
} }
} }
@ -96,7 +96,7 @@ $van-number-keyboard-key-height: 54px;
} }
&--gray { &--gray {
background-color: #f3f3f6; background-color: $background-color;
} }
&--active { &--active {

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

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

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

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

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

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

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

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

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

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