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

vant-css: use hairline classes instead of mixins

Browse Source
This commit is contained in:
陈嘉涵 2017-09-05 10:50:17 +08:00
parent 99f712104e
commit 9dd8a93067
63 changed files with 414 additions and 466 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/bin/build-lib.js
View File

@ -42,7 +42,7 @@ components.forEach((componentName) => {
const dir = path.join(__dirname, '../../lib/', componentName, '/style'); const dir = path.join(__dirname, '../../lib/', componentName, '/style');
const file = path.join(dir, 'index.js'); const file = path.join(dir, 'index.js');
const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`); const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`);
const content = []; const content = [`require('../../vant-css/base.css');`];
if (fs.existsSync(cssPath)) { if (fs.existsSync(cssPath)) {
content.push(`require('../../vant-css/${componentName}.css');`); content.push(`require('../../vant-css/${componentName}.css');`);
} }

6
packages/actionsheet/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<transition name="van-actionsheet-float"> <transition name="van-actionsheet-float">
<div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value"> <div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
<div class="van-actionsheet__header" v-if="title"> <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
<h3 v-text="title" /> <h3 v-text="title" />
<van-icon name="close" @click.stop="$emit('input', false)" /> <van-icon name="close" @click.stop="$emit('input', false)" />
</div> </div>
@ -9,7 +9,7 @@
<li <li
v-for="(item, index) in actions" v-for="(item, index) in actions"
:key="index" :key="index"
:class="['van-actionsheet__item', item.className, { 'van-actionsheet__item--loading': item.loading }]" :class="['van-actionsheet__item', 'van-hairline--top', item.className, { 'van-actionsheet__item--loading': item.loading }]"
@click.stop="onClickItem(item)"> @click.stop="onClickItem(item)">
<template v-if="!item.loading"> <template v-if="!item.loading">
<span class="van-actionsheet__name">{{ item.name }}</span> <span class="van-actionsheet__name">{{ item.name }}</span>
@ -18,7 +18,7 @@
<van-loading v-else class="van-actionsheet__loading" type="circle" color="black" /> <van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
</li> </li>
</ul> </ul>
<div class="van-actionsheet__item van-actionsheet__cancel" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div> <div class="van-actionsheet__item van-actionsheet__cancel van-hairline--top" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
<div class="van-actionsheet__content" v-else> <div class="van-actionsheet__content" v-else>
<slot></slot> <slot></slot>
</div> </div>

2
packages/badge-group/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-badge-group"> <div class="van-badge-group van-hairline--top-bottom">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

3
packages/badge/index.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick"> <a :class="['van-badge van-hairline', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
<div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{ info }}</div> <div v-if="info" class="van-badge__info">{{ info }}</div>
{{ title }} {{ title }}
</a> </a>

2
packages/cell-group/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-cell-group"> <div class="van-cell-group van-hairline--top-bottom">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

2
packages/cell/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')"> <a :class="['van-cell', 'van-hairline', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
<div <div
class="van-cell__title" class="van-cell__title"
v-if="$slots.title || title" v-if="$slots.title || title"

8
packages/deep-select/index.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<div class="van-deep-select" v-bind:style="{ height: mainHeight + 'px' }"> <div class="van-deep-select" :style="{ height: mainHeight + 'px' }">
<div class="van-deep-select__nav"> <div class="van-deep-select__nav">
<div <div
v-for="(item, index) in items" v-for="(item, index) in items"
class="van-deep-select__nitem" class="van-deep-select__nitem"
v-bind:class="{ 'van-deep-select__nitem--active': mainActiveIndex === index }" :class="{ 'van-deep-select__nitem--active': mainActiveIndex === index }"
@click="onNavClick(index)"> @click="onNavClick(index)">
{{ item.text }} {{ item.text }}
</div> </div>
</div> </div>
<div class="van-deep-select__content" v-bind:style="{ height: itemHeight + 'px' }"> <div class="van-deep-select__content" :style="{ height: itemHeight + 'px' }">
<div <div
v-for="item in subItems" v-for="item in subItems"
:key="item.id" :key="item.id"
class="van-deep-select__item" class="van-deep-select__item"
v-bind:class="{ 'van-deep-select__item--active': activeId === item.id }" :class="{ 'van-deep-select__item--active': activeId === item.id }"
@click="onItemSelect(item)"> @click="onItemSelect(item)">
{{ item.text }} {{ item.text }}
<van-icon <van-icon

20
packages/dialog/dialog.vue
View File

@ -2,14 +2,28 @@
<transition name="van-dialog-bounce"> <transition name="van-dialog-bounce">
<div class="van-dialog" v-show="value"> <div class="van-dialog" v-show="value">
<div class="van-dialog__header" v-if="title" v-text="title" /> <div class="van-dialog__header" v-if="title" v-text="title" />
<div class="van-dialog__content"> <div class="van-dialog__content van-hairline">
<slot> <slot>
<div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" /> <div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
</slot> </slot>
</div> </div>
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }"> <div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
<van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button> <van-button
<van-button size="large" class="van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</van-button> size="large"
class="van-dialog__cancel"
v-show="showCancelButton"
@click="handleAction('cancel')"
>
{{ cancelButtonText }}
</van-button>
<van-button
size="large"
:class="['van-dialog__confirm', { 'van-hairline--left': showCancelButton && showConfirmButton }]"
v-show="showConfirmButton"
@click="handleAction('confirm')"
>
{{ confirmButtonText }}
</van-button>
</div> </div>
</div> </div>
</transition> </transition>

1
packages/field/index.vue
View File

@ -9,6 +9,7 @@
'van-field--disabled': disabled, 'van-field--disabled': disabled,
'van-field--error': error, 'van-field--error': error,
'van-field--border': border, 'van-field--border': border,
'van-hairline--surround': border,
'van-field--autosize': autosize, 'van-field--autosize': autosize,
'van-field--has-icon': showIcon 'van-field--has-icon': showIcon
}"> }">

2
packages/goods-action-mini-btn/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a :href="url" class="van-goods-action__mini-btn" @click="$emit('click', $event);"> <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);">
<van-icon :class="['van-goods-action__mini-btn-icon', iconClass]" :name="icon" /> <van-icon :class="['van-goods-action__mini-btn-icon', iconClass]" :name="icon" />
<slot></slot> <slot></slot>
</a> </a>

2
packages/order-coupon-list/index.vue
View File

@ -21,7 +21,7 @@
:data="item" :data="item"
/> />
</div> </div>
<div class="van-order-coupon-list__close" @click="onClickNotUse">{{ closeButtonText }}</div> <div class="van-order-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
</van-popup> </van-popup>
</template> </template>

6
packages/order-goods/Card.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-order-goods-card"> <div class="van-order-goods-card van-hairline">
<van-card> <van-card>
<div slot="thumb"> <div slot="thumb">
<img :src="data.img_url" /> <img :src="data.img_url" />
@ -29,11 +29,11 @@
</div> </div>
</template> </template>
</van-card> </van-card>
<van-cell class="van-order-goods-card__delivery" v-if="data.show_delivery_time" title="发货时间" :value="data.delivery_time" /> <van-cell class="van-order-goods-card__delivery van-hairline--top" v-if="data.show_delivery_time" title="发货时间" :value="data.delivery_time" />
<van-popup v-if="hasMessage" class="van-order-goods-card__message" v-model="showMessage" position="right"> <van-popup v-if="hasMessage" class="van-order-goods-card__message" v-model="showMessage" position="right">
<h2>备注信息</h2> <h2>备注信息</h2>
<ul> <ul>
<li v-for="(value, key) in data.message"> <li v-for="(value, key) in data.message" class="van-hairline">
<label>{{ key }}</label> <label>{{ key }}</label>
<a v-if="isURL(value)" :href="value"> <a v-if="isURL(value)" :href="value">
<img :src="value" /> <img :src="value" />

2
packages/order-goods/Empty.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-order-goods-empty"> <div class="van-order-goods-empty van-hairline--top">
<img :src="icon" /> <img :src="icon" />
<p>{{ message }}</p> <p>{{ message }}</p>
<van-button @click="$emit('clickEmptyButton')">{{ buttonText }}</van-button> <van-button @click="$emit('clickEmptyButton')">{{ buttonText }}</van-button>

8
packages/panel/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="van-panel"> <div class="van-panel van-hairline--top-bottom">
<div class="van-panel__header"> <div class="van-panel__header van-hairline--bottom">
<slot name="header"> <slot name="header">
<h4 class="van-panel__title" v-text="title"></h4> <h4 class="van-panel__title" v-text="title"></h4>
<span class="van-panel__desc" v-if="desc" v-text="desc"></span> <span class="van-panel__desc" v-if="desc" v-text="desc"></span>
@ -10,7 +10,7 @@
<div class="van-panel__content"> <div class="van-panel__content">
<slot></slot> <slot></slot>
</div> </div>
<div class="van-panel__footer" v-if="$slots.footer"> <div class="van-panel__footer van-hairline--top" v-if="$slots.footer">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>
@ -20,8 +20,8 @@
export default { export default {
name: 'van-panel', name: 'van-panel',
props: { props: {
title: String,
desc: String, desc: String,
title: String,
status: String status: String
} }
}; };

2
packages/picker/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="van-picker"> <div class="van-picker">
<div class="van-picker__toolbar" v-show="showToolbar"> <div class="van-picker__toolbar van-hairline--top-bottom" v-show="showToolbar">
<slot> <slot>
<a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a> <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
<a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a> <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>

2
packages/step/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-step" :class="stepClass"> <div class="van-step van-hairline" :class="stepClass">
<div class="van-step__circle-container"> <div class="van-step__circle-container">
<i class="van-step__circle" v-if="status !== 'process'"></i> <i class="van-step__circle" v-if="status !== 'process'"></i>
<i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i> <i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i>

14
packages/steps/index.vue
View File

@ -16,8 +16,8 @@
</slot> </slot>
</div> </div>
<div class="van-steps__items" :class="{ <div class="van-steps__items" :class="{
'van-steps__items--alone': !title && !description 'van-steps__items--alone': !title && !description
}"> }">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -60,11 +60,11 @@ export default {
computed: { computed: {
stepsClass() { stepsClass() {
const direction = this.direction; return [
const lengthClass = `van-steps--${this.steps.length}`; `van-steps--${this.direction}`, {
const directionClass = `van-steps--${direction}`; [`van-steps--${this.steps.length}`]: this.direction === 'horizontal'
}
return direction === 'horizontal' ? [lengthClass, directionClass] : [directionClass]; ];
} }
} }
}; };

17
packages/switch/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="van-switch" :class="switchStates" @click="toggleState"> <div class="van-switch" :class="[`van-switch--${checked ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
<div class="van-switch__node"> <div class="van-switch__node van-hairline-surround">
<van-loading v-if="loading" class="van-switch__loading"></van-loading> <van-loading v-if="loading" class="van-switch__loading" />
</div> </div>
<div class="van-switch__bg"></div> <div class="van-switch__bg"></div>
</div> </div>
@ -35,17 +35,6 @@ export default {
this.checked = val; this.checked = val;
} }
}, },
computed: {
switchStates: function() {
const switchStates = ['van-switch--' + (this.checked ? 'on' : 'off')];
if (this.disabled) {
switchStates.push('van-switch--disabled');
}
return switchStates;
}
},
methods: { methods: {
/* /*
* 开关状态交互。 * 开关状态交互。

4
packages/tabs/index.vue
View File

@ -7,7 +7,7 @@
<div <div
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="index" :key="index"
class="van-tab" class="van-tab van-hairline"
:class="{'van-tab--active': index === curActive}" :class="{'van-tab--active': index === curActive}"
ref="tabkey" ref="tabkey"
@click="handleTabClick(index, tab)" @click="handleTabClick(index, tab)"
@ -26,7 +26,7 @@
<div <div
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="index" :key="index"
class="van-tab" class="van-tab van-hairline"
:class="{'van-tab--active': index === curActive}" :class="{'van-tab--active': index === curActive}"
ref="tabkey" ref="tabkey"
@click="handleTabClick(index, tab)" @click="handleTabClick(index, tab)"

2
packages/tag/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span :class="['van-tag', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]"> <span :class="['van-tag', 'van-hairline--surround', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
<slot></slot> <slot></slot>
</span> </span>
</template> </template>

25
packages/vant-css/src/actionsheet.css
View File

@ -1,19 +1,16 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
@import './popup.css';
.van-actionsheet { .van-actionsheet {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
color: $c-black; color: $text-color;
transition: .2s ease-out; transition: .2s ease-out;
background-color: #e0e0e0; background-color: $background-color;
backface-visibility: hidden;
&--withtitle { &--withtitle {
background-color: $c-white; background-color: $white;
} }
&__item { &__item {
@ -21,17 +18,16 @@
line-height: 50px; line-height: 50px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
position: relative; background-color: $white;
background-color: $c-white;
&::after { &:active {
@mixin border-retina (top); background-color: $active-color;
} }
} }
&__subname { &__subname {
font-size: 12px; font-size: 12px;
color: $c-gray-darker; color: $gray-darker;
} }
&__loading { &__loading {
@ -39,17 +35,12 @@
} }
&__cancel { &__cancel {
margin-top: 5px; margin-top: 10px;
} }
&__header { &__header {
line-height: 44px; line-height: 44px;
text-align: center; text-align: center;
position: relative;
&::after {
@mixin border-retina (top, bottom);
}
.van-icon-close { .van-icon-close {
top: 11px; top: 11px;

64
packages/vant-css/src/badge.css
View File

@ -1,49 +1,34 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
.van-badge { .van-badge {
display: block; display: block;
overflow: hidden; overflow: hidden;
position: relative;
padding: 20px 12px;
box-sizing: border-box;
line-height: 1.4;
background-color: $c-background;
color: $c-gray-darker;
font-size: 14px; font-size: 14px;
text-decoration: none; line-height: 1.4;
box-sizing: border-box;
padding: 20px 12px 20px 9px;
color: $gray-darker;
background-color: $background-color;
word-break: break-all; word-break: break-all;
border-left: 3px solid transparent;
&:not(:last-child)::after {
border-bottom-width: 1px;
}
&-group { &-group {
position: relative;
width: 85px; width: 85px;
&::after {
@mixin border-retina (top);
}
} }
&--select { &--select {
font-weight: bold; font-weight: bold;
color: $c-black; color: $text-color;
background-color: $c-white; border-color: $red;
.van-badge__active { background-color: $white;
display: block;
}
&::after {
@mixin border-retina (top, right, left);
}
}
&__active { &::after {
display: none; border-right-width: 1px;
position: absolute; }
left: 0;
top: 0;
width: 3px;
height: 100%;
background-color: #FF4444;
} }
&__info { &__info {
@ -51,25 +36,14 @@
top: 2px; top: 2px;
right: 2px; right: 2px;
font-size: 10px; font-size: 10px;
transform:scale(0.8); color: $white;
transform: scale(0.8);
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
padding: 0 6px; padding: 0 6px;
min-width: 18px; min-width: 18px;
height: 18px;
line-height: 18px; line-height: 18px;
border-radius: 9px; border-radius: 9px;
background-color: #FF4444; background-color: $red;
color: $c-white;
}
&::after {
@mixin border-retina (bottom);
}
&:last-child {
&::after {
border-bottom: 0;
}
} }
} }

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

@ -2,4 +2,7 @@
* 基本样式入口 * 基本样式入口
*/ */
@import './reset.css'; @import "./common/var.css";
@import "./common/normalize.css";
@import "./common/hairline.css";

17
packages/vant-css/src/button.css
View File

@ -10,10 +10,9 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
&::after { &::before {
content: " "; content: " ";
position: absolute; position: absolute;
top: 0; top: 0;
@ -21,11 +20,11 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
opacity: 0; opacity: 0;
background-color: #000; background-color: $black;
border-radius: inherit; /* inherit parent's border radius */ border-radius: inherit; /* inherit parent's border radius */
} }
&:not(.is-disabled):active::after { &:not(.is-disabled):active::before {
opacity: .3; opacity: .3;
} }
@ -39,7 +38,7 @@
border: 1px solid $button-default-border-color; border: 1px solid $button-default-border-color;
&:active { &:active {
color: $c-gray-dark; color: $gray-dark;
} }
} }
@ -73,6 +72,12 @@
font-size: 12px; font-size: 12px;
} }
&--loading {
.van-button__text {
display: none;
}
}
/* mini图标默认宽度50px，文字不能超过4个 */ /* mini图标默认宽度50px，文字不能超过4个 */
&--mini { &--mini {
display: inline-block; display: inline-block;
@ -108,7 +113,7 @@
background-color: $bottom-action-button-default-background-color; background-color: $bottom-action-button-default-background-color;
&:active { &:active {
color: #fff; color: $white;
} }
&.van-button--primary { &.van-button--primary {

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

@ -1,7 +1,8 @@
@import './common/var.css';
@import './mixins/ellipsis.css'; @import './mixins/ellipsis.css';
.van-card { .van-card {
color: #333; color: $text-color;
height: 90px; height: 90px;
background: #fafafa; background: #fafafa;
position: relative; position: relative;
@ -58,7 +59,7 @@
} }
&__desc { &__desc {
color: #666; color: $gray-darker;
font-size: 12px; font-size: 12px;
max-height: 20px; max-height: 20px;
@mixin multi-ellipsis 1; @mixin multi-ellipsis 1;
@ -77,7 +78,7 @@
} }
&__num { &__num {
color: #666; color: $gray-darker;
font-size: 12px; font-size: 12px;
} }

2
packages/vant-css/src/cell-swipe.css
View File

@ -1,3 +1,5 @@
@import './common/var.css';
.van-cell-swipe { .van-cell-swipe {
overflow: hidden; overflow: hidden;
position: relative; position: relative;

36
packages/vant-css/src/cell.css
View File

@ -1,38 +1,23 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
@import './icon.css';
.van-cell { .van-cell {
width: 100%; width: 100%;
display: table; display: table;
position: relative;
padding: 10px 15px 10px 0; padding: 10px 15px 10px 0;
box-sizing: border-box; box-sizing: border-box;
line-height: 24px; line-height: 24px;
background-color: $c-white; background-color: $white;
color: $c-black; color: $text-color;
font-size: 14px; font-size: 14px;
text-decoration: none;
overflow: hidden; overflow: hidden;
&::after { &:not(:last-child)::after {
@mixin border-retina (bottom); border-bottom-width: 1px;
}
&:last-child {
&::after {
border-bottom: 0;
}
} }
&-group { &-group {
padding-left: 15px; padding-left: 15px;
position: relative; background-color: $white;
background-color: #fff;
&::after {
@mixin border-retina (top, bottom);
}
} }
&__title { &__title {
@ -47,7 +32,7 @@
display: block; display: block;
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
color: $c-gray-darker; color: $gray-darker;
} }
&__value { &__value {
@ -73,12 +58,7 @@
position: absolute; position: absolute;
left: -7px; left: -7px;
font-size: 14px; font-size: 14px;
color: #f44; color: $red;
}
.van-cell__title {
float: none;
display: inline-block;
} }
} }
@ -87,7 +67,7 @@
top: 50%; top: 50%;
right: 15px; right: 15px;
transform: translateY(-50%); transform: translateY(-50%);
color: $c-gray-dark; color: $gray-dark;
font-size: 12px; font-size: 12px;
} }
} }

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

@ -9,11 +9,11 @@
} }
.van-icon-checked { .van-icon-checked {
color: $c-green; color: $green;
} }
.van-icon-check { .van-icon-check {
color: $c-gray-dark; color: $gray-dark;
} }
&--disabled { &--disabled {
@ -27,7 +27,6 @@
height: 22px; height: 22px;
margin-right: 15px; margin-right: 15px;
float: left; float: left;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
&__control { &__control {
@ -43,7 +42,6 @@
&__label { &__label {
line-height: 22px; line-height: 22px;
margin-left: 37px; margin-left: 37px;
display: block; display: block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
} }

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

@ -1,3 +1,5 @@
@import './common/var.css';
.van-col { .van-col {
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;

41
packages/vant-css/src/common/hairline.css Normal file
View File

@ -0,0 +1,41 @@
@import "../mixins/border_retina.css";
.van-hairline {
&,
&--top,
&--left,
&--right,
&--bottom,
&--top-bottom,
&--surround {
position: relative;
&::after {
@mixin hairline;
}
}
&--top::after {
border-top-width: 1px;
}
&--left::after {
border-left-width: 1px;
}
&--right::after {
border-right-width: 1px;
}
&--bottom::after {
border-bottom-width: 1px;
}
&--top-bottom::after {
border-width: 1px 0;
}
&--surround::after {
border-width: 1px;
}
}

27
packages/vant-css/src/common/normalize.css vendored Normal file
View File

@ -0,0 +1,27 @@
/**
* 基本样式入口
*/
html {
-webkit-tap-highlight-color: transparent;
}
a {
text-decoration: none;
}
a,
input,
button,
textarea {
&:focus {
outline: none;
}
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}

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

@ -1,41 +1,37 @@
/* UI标准色 */ /* color variables */
$c-white: #fff; $black: #000;
$c-black: #333; $white: #fff;
$c-green: #06bf04; $red: #f44;
$c-green-wx: #4b0; $green: #06bf04;
$c-red: #ed5050; $green-wx: #4b0;
$c-gray: #c9c9c9; $gray: #c9c9c9;
$c-gray-light: #e5e5e5; $gray-light: #e5e5e5;
$c-gray-darker: #666; $gray-darker: #666;
$c-gray-dark: #999; $gray-dark: #999;
$c-yellow: #f09000; $yellow: #f09000;
$c-yellow-light: #fcff00; $orange: #f60;
$c-orange: #f60; $blue: #38f;
$c-orange-dark: #f15a0c;
$c-blue: #38f;
$c-active: #e8e8e8;
$c-background: #f8f8f8; /* default colors */
$text-color: #333;
$border-color: #ccc;
$active-color: #e8e8e8;
$background-color: #f8f8f8;
/* 按钮颜色 */ /* button */
$button-primary-color: $c-white; $button-primary-color: $white;
$button-primary-background-color: $c-green-wx; $button-primary-background-color: $green-wx;
$button-primary-border-color: #0a0; $button-primary-border-color: #0a0;
$button-default-color: $text-color;
$button-default-color: $c-black; $button-default-background-color: $white;
$button-default-background-color: $c-white; $button-default-border-color: $border-color;
$button-default-border-color: #ccc; $button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-color: $c-white;
$button-danger-background-color: #f44;
$button-danger-border-color: #e33; $button-danger-border-color: #e33;
$button-disabled-color: $gray-dark;
$button-disabled-color: $c-gray-dark; $button-disabled-background-color: $gray-light;
$button-disabled-background-color: $c-gray-light;
$button-disabled-border-color: #cacaca; $button-disabled-border-color: #cacaca;
$bottom-action-button-default-color: $white;
$bottom-action-button-default-color: $c-white;
$bottom-action-button-default-background-color: #f85; $bottom-action-button-default-background-color: #f85;
$bottom-action-button-primary-color: $white;
$bottom-action-button-primary-color: $c-white; $bottom-action-button-primary-background-color: $red;
$bottom-action-button-primary-background-color: #f44;

9
packages/vant-css/src/deep-select.css
View File

@ -9,24 +9,23 @@
&__nav { &__nav {
width: 143px; width: 143px;
/*float: left;*/
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow: scroll; overflow: scroll;
background-color: $c-white; background-color: $white;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
&__nitem { &__nitem {
line-height: 44px; line-height: 44px;
padding: 0 15px; padding: 0 15px;
background-color: $c-white; background-color: $white;
@mixin multi-ellipsis 1; @mixin multi-ellipsis 1;
&--active { &--active {
background-color: $c-background; background-color: $background-color;
} }
} }
@ -52,7 +51,7 @@
&__selected { &__selected {
float: right; float: right;
position: absolute; position: absolute;
right: 0px; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }

21
packages/vant-css/src/dialog.css
View File

@ -1,5 +1,4 @@
@import './mixins/border_retina.css'; @import './common/var.css';
@import './popup.css';
.van-dialog { .van-dialog {
position: fixed; position: fixed;
@ -10,11 +9,9 @@
overflow: hidden; overflow: hidden;
transition: .2s; transition: .2s;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: $white;
backface-visibility: hidden;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
&__header { &__header {
padding: 15px 0 0; padding: 15px 0 0;
text-align: center; text-align: center;
@ -22,10 +19,9 @@
&__content { &__content {
padding: 15px 20px; padding: 15px 20px;
position: relative;
&::after { &::after {
@mixin border-retina (bottom); border-bottom-width: 1px;
} }
} }
@ -33,7 +29,7 @@
line-height: 1.5; line-height: 1.5;
&--withtitle { &--withtitle {
color: #999; color: $gray-dark;
font-size: 14px; font-size: 14px;
} }
} }
@ -47,15 +43,6 @@
.van-button { .van-button {
flex: 1; flex: 1;
} }
.van-dialog__cancel {
position: relative;
&::before {
@mixin border-retina (right);
left: -2px;
}
}
} }
} }

8
packages/vant-css/src/express-way.css
View File

@ -1,9 +1,11 @@
@import './common/var.css';
.van-express-way { .van-express-way {
padding: 0; padding: 0;
&__fee, &__fee,
&__type { &__type {
color: #666; color: $gray-darker;
line-height: 1.5; line-height: 1.5;
} }
@ -35,7 +37,7 @@
padding-left: 30px; padding-left: 30px;
p { p {
color: #999; color: $gray-dark;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@ -52,7 +54,7 @@
} }
&__warn { &__warn {
color: #f09000; color: $yellow;
} }
} }
} }

15
packages/vant-css/src/field.css
View File

@ -1,7 +1,4 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
@import './cell.css';
@import './icon.css';
.van-field { .van-field {
@ -44,7 +41,7 @@
&--disabled { &--disabled {
.van-field__control { .van-field__control {
color: $c-gray-dark; color: $gray-dark;
} }
} }
@ -52,7 +49,7 @@
.van-field__control { .van-field__control {
&, &,
&::placeholder { &::placeholder {
color: $c-red; color: $red;
} }
} }
} }
@ -64,17 +61,12 @@
&::after { &::after {
border-radius: 2px; border-radius: 2px;
@mixin border-retina (top, right, bottom, left);
}
&:last-child::after {
@mixin border-retina (bottom);
} }
} }
&--autosize { &--autosize {
.van-field__control { .van-field__control {
min-height: 0px; min-height: 0;
} }
} }
@ -93,7 +85,6 @@
display: block; display: block;
width: 100%; width: 100%;
resize: none; resize: none;
outline: 0;
} }
&__icon { &__icon {

16
packages/vant-css/src/goods-action.css
View File

@ -1,5 +1,4 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
.van-goods-action { .van-goods-action {
left: 0; left: 0;
@ -13,29 +12,26 @@
} }
&__mini-btn { &__mini-btn {
color: #666; color: $gray-darker;
display: flex; display: flex;
height: 50px; height: 50px;
font-size: 10px; font-size: 10px;
min-width: 15%; min-width: 15%;
position: relative;
text-align: center; text-align: center;
background-color: #fff; background-color: $white;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
&::after { &::after {
@mixin border-retina (top, left), #cacaca; border-width: 1px 0 0 1px;
} }
&:first-child { &:first-child::after {
&::after { border-left-width: 0;
border-left-width: 0;
}
} }
&:active { &:active {
background-color: $c-active; background-color: $active-color;
} }
} }

3
packages/vant-css/src/image-preview.css
View File

@ -1,4 +1,4 @@
@import './swipe.css'; @import './common/var.css';
.van-image-preview { .van-image-preview {
position: fixed; position: fixed;
@ -9,7 +9,6 @@
overflow: auto; overflow: auto;
&__image { &__image {
display: block;
position: absolute; position: absolute;
left: 0; left: 0;

1
packages/vant-css/src/index.css
View File

@ -3,6 +3,7 @@
*/ */
/* base */ /* base */
@import './base.css';
@import './reset.css'; @import './reset.css';
/* common components */ /* common components */

15
packages/vant-css/src/invalid-goods.css
View File

@ -1,3 +1,4 @@
@import './common/var.css';
@import "./mixins/ellipsis.css"; @import "./mixins/ellipsis.css";
$van-invalid-goods-photo-size: 90px; $van-invalid-goods-photo-size: 90px;
@ -7,7 +8,7 @@ $van-invalid-goods-photo-size: 90px;
margin: 10px 0; margin: 10px 0;
&__title { &__title {
color: #999; color: $gray-dark;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
@ -42,11 +43,11 @@ $van-invalid-goods-photo-size: 90px;
top: 0; top: 0;
right: 0; right: 0;
width: 80px; width: 80px;
color: #666; color: $gray-darker;
font-size: 14px; font-size: 14px;
padding-right: 8px; padding-right: 8px;
line-height: calc($van-invalid-goods-photo-size + 10px); line-height: calc($van-invalid-goods-photo-size + 10px);
background-color: #fff; background-color: $white;
text-align: right; text-align: right;
span { span {
@ -62,7 +63,7 @@ $van-invalid-goods-photo-size: 90px;
} }
&-invalid-goods-card { &-invalid-goods-card {
color: #999; color: $gray-dark;
margin: 10px 0; margin: 10px 0;
padding: 5px 10px; padding: 5px 10px;
background-color: #fafafa; background-color: #fafafa;
@ -73,7 +74,7 @@ $van-invalid-goods-photo-size: 90px;
left: 0; left: 0;
top: 70px; top: 70px;
width: $van-invalid-goods-photo-size; width: $van-invalid-goods-photo-size;
color: #fff; color: $white;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
@ -108,14 +109,14 @@ $van-invalid-goods-photo-size: 90px;
} }
&__desc { &__desc {
color: #f60; color: $orange;
font-size: 12px; font-size: 12px;
margin-top: 5px; margin-top: 5px;
} }
} }
.van-icon-arrow { .van-icon-arrow {
color: #666; color: $gray-darker;
font-size: 10px; font-size: 10px;
} }
} }

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

@ -36,8 +36,8 @@
box-sizing: border-box; box-sizing: border-box;
&.van-loading__spinner--black { &.van-loading__spinner--black {
border-color: $c-gray; border-color: $gray;
border-top-color: $c-gray-darker; border-top-color: $gray-darker;
} }
&.van-loading__spinner--white { &.van-loading__spinner--white {

24
packages/vant-css/src/mixins/border_retina.css
View File

@ -1,20 +1,34 @@
@import '../common/var.css';
$border-poses: top, right, bottom, left; $border-poses: top, right, bottom, left;
@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 { @define-mixin border-retina $poses: $border-poses, $border-retina-color: $gray-light {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
box-sizing: border-box;
width: 200%; width: 200%;
height: 200%; height: 200%;
transform: scale(.5); transform: scale(.5);
transform-origin: left top; transform-origin: 0 0;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
pointer-events: none; pointer-events: none;
box-sizing: border-box;
@each $pos in $poses { @each $pos in $poses {
border-$(pos): 1px solid $border-retina-color; border-$(pos): 1px solid $border-retina-color;
} }
}
@define-mixin hairline $border-retina-color: $gray-light {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid $border-retina-color;
} }

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

@ -1,7 +1,7 @@
@import './common/var.css'; @import './common/var.css';
.van-notice-bar { .van-notice-bar {
color: #f60; color: $orange;
padding: 9px 10px; padding: 9px 10px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;

28
packages/vant-css/src/order-coupon.css
View File

@ -1,10 +1,10 @@
@import "./mixins/border_retina.css"; @import './common/var.css';
@import "./mixins/ellipsis.css"; @import "./mixins/ellipsis.css";
.van-order-coupon { .van-order-coupon {
&-list { &-list {
height: 100%; height: 100%;
background-color: #f8f8f8; background-color: $background-color;
&__top { &__top {
position: absolute; position: absolute;
@ -13,10 +13,6 @@
width: 100%; width: 100%;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
&::after {
border-top: none;
}
} }
&__exchange { &__exchange {
@ -34,7 +30,7 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
h3 { h3 {
color: #999; color: $gray-dark;
margin: 15px 0; margin: 15px 0;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
@ -47,7 +43,7 @@
height: 1px; height: 1px;
top: 50%; top: 50%;
position: absolute; position: absolute;
background-color: #e5e5e5; background-color: $gray-light;
} }
&::before { &::before {
@ -74,11 +70,7 @@
line-height: 45px; line-height: 45px;
text-align: center; text-align: center;
position: absolute; position: absolute;
background-color: #fff; background-color: $white;
&::after {
@mixin border-retina (top);
}
} }
} }
@ -102,7 +94,7 @@
&__gradient { &__gradient {
flex: 1; flex: 1;
color: #fff; color: $white;
display: flex; display: flex;
margin-left: -1px; /* hack for flex space */ margin-left: -1px; /* hack for flex space */
text-align: center; text-align: center;
@ -134,7 +126,7 @@
padding: 0 15px; padding: 0 15px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: #fff; background-color: $white;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
@ -146,7 +138,7 @@
p, p,
span { span {
color: #999; color: $gray-dark;
font-size: 12px; font-size: 12px;
margin-top: 5px; margin-top: 5px;
} }
@ -168,13 +160,13 @@
border-style: solid; border-style: solid;
border-width: 18px 19px; border-width: 18px 19px;
border-radius: 0 4px 0 0; border-radius: 0 4px 0 0;
border-color: #f44 #f44 transparent transparent; border-color: $red $red transparent transparent;
.van-icon { .van-icon {
position: absolute; position: absolute;
top: -13px; top: -13px;
right: -13px; right: -13px;
color: #fff; color: $white;
font-size: 12px; font-size: 12px;
&::before { &::before {

47
packages/vant-css/src/order-goods.css
View File

@ -1,17 +1,15 @@
@import "./mixins/border_retina.css"; @import './common/var.css';
.van-order-goods { .van-order-goods {
background-color: #fff; background-color: $white;
&-card { &-card {
margin-left: -15px; margin-left: -15px;
position: relative;
background-color: #fafafa; background-color: #fafafa;
&:not(:first-child), &:not(:first-child) {
&__delivery {
&::after { &::after {
@mixin border-retina (top); border-top-width: 1px;
} }
} }
@ -29,14 +27,14 @@
} }
&__tag-green { &__tag-green {
color: #fff; color: $white;
background-color: #4b0; background-color: $green-wx;
} }
&__tag-red { &__tag-red {
color: #ed5050; color: $gray;
padding: 5px 8px; padding: 5px 8px;
border: 1px solid #ed5050; border: 1px solid $gray;
} }
&__delivery { &__delivery {
@ -44,7 +42,7 @@
background-color: transparent; background-color: transparent;
.van-cell__value { .van-cell__value {
color: #666; color: $gray-darker;
} }
} }
@ -76,17 +74,17 @@
&__message { &__message {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f8f8f8; background-color: $background-color;
h2 { h2 {
color: #999; color: $gray-dark;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
} }
ul { ul {
background-color: #fff; background-color: $white;
} }
p, p,
@ -107,10 +105,9 @@
li { li {
display: flex; display: flex;
padding: 0 10px; padding: 0 10px;
position: relative;
&:not(:last-child)::after { &:not(:last-child)::after {
@mixin border-retina (bottom); border-bottom-width: 1px;
} }
img { img {
@ -124,14 +121,9 @@
&-empty { &-empty {
margin-left: -15px; margin-left: -15px;
text-align: center; text-align: center;
position: relative;
&::after {
@mixin border-retina (top);
}
p { p {
color: #999; color: $gray-dark;
padding: 0 10px; padding: 0 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -148,7 +140,7 @@
margin: 15px 0; margin: 15px 0;
padding: 0 10px; padding: 0 10px;
line-height: 39px; line-height: 39px;
border-color: #e5e5e5; border-color: $gray-light;
} }
} }
@ -167,7 +159,7 @@
} }
a { a {
color: #333; color: $text-color;
font-size: 14px; font-size: 14px;
} }
@ -179,13 +171,12 @@
&-message { &-message {
textarea { textarea {
color: #666; color: $gray-darker;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 22px; height: 22px;
border: none; border: none;
resize: none; resize: none;
outline: none;
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
@ -197,7 +188,7 @@
} }
p { p {
color: #666; color: $gray-darker;
text-align: left; text-align: left;
} }
@ -208,7 +199,7 @@
&-price { &-price {
.van-cell__value { .van-cell__value {
color: #f44; color: $red;
} }
} }
} }

24
packages/vant-css/src/panel.css
View File

@ -1,29 +1,20 @@
@import './mixins/border_retina.css'; @import './common/var.css';
.van-panel { .van-panel {
background: #fff; background: $white;
position: relative;
&::after {
@mixin border-retina (top, bottom);
}
&__header { &__header {
padding: 10px 15px; padding: 10px 15px;
position: relative;
&::after {
@mixin border-retina (bottom);
}
} }
&__title { &__title {
font-size: 14px; font-size: 14px;
color: #333; color: $text-color;
} }
&__desc { &__desc {
font-size: 12px; font-size: 12px;
color: #666; color: $gray-darker;
} }
&__status { &__status {
@ -31,15 +22,10 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 15px; right: 15px;
color: #FF4444; color: $red;
} }
&__footer { &__footer {
padding: 10px 15px; padding: 10px 15px;
position: relative;
&::after {
@mixin border-retina (top);
}
} }
} }

12
packages/vant-css/src/pay-order.css
View File

@ -1,3 +1,5 @@
@import './common/var.css';
.van-pay-order { .van-pay-order {
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -7,7 +9,7 @@
user-select: none; user-select: none;
&__tip { &__tip {
color: #f60; color: $orange;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
padding: 10px 10px; padding: 10px 10px;
@ -18,7 +20,7 @@
height: 50px; height: 50px;
display: flex; display: flex;
line-height: 50px; line-height: 50px;
background-color: #fff; background-color: $white;
} }
&__price { &__price {
@ -28,17 +30,17 @@
} }
&__price-text { &__price-text {
color: #666; color: $gray-darker;
font-size: 16px; font-size: 16px;
} }
&__price-interger { &__price-interger {
color: #f44; color: $red;
font-size: 16px; font-size: 16px;
} }
&__price-decimal { &__price-decimal {
color: #f44; color: $red;
font-size: 12px; font-size: 12px;
} }

14
packages/vant-css/src/picker.css
View File

@ -1,19 +1,14 @@
@import './mixins/border_retina.css'; @import './common/var.css';
.van-picker { .van-picker {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: $white;
&__toolbar { &__toolbar {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
overflow: hidden; overflow: hidden;
padding: 0 15px; padding: 0 15px;
position: relative;
&::after {
@mixin border-retina (top, bottom);
}
} }
&__cancel { &__cancel {
@ -129,11 +124,9 @@
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition-duration: .3s; transition-duration: .3s;
backface-visibility: hidden;
&--selected { &--selected {
color: #000; color: $black;
transform: translate3d(0, 0, 0) rotateX(0);
} }
} }
} }
@ -141,7 +134,6 @@
.picker-column-wrapper { .picker-column-wrapper {
transition-duration: 0.3s; transition-duration: 0.3s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
backface-visibility: hidden;
} }
.picker-column-wrapper.dragging, .picker-column-wrapper.dragging,

9
packages/vant-css/src/popup.css
View File

@ -1,3 +1,5 @@
@import './common/var.css';
.van { .van {
&-modal { &-modal {
position: fixed; position: fixed;
@ -5,17 +7,16 @@
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(0, 0, 0, 0.701961); background-color: rgba(0, 0, 0, 0.7);
transition: all .5s ease-out; transition: .5s ease-out;
} }
&-popup { &-popup {
position: fixed; position: fixed;
background-color: #fff; background-color: $white;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
backface-visibility: hidden;
transition: .2s ease-out; transition: .2s ease-out;
&--top { &--top {

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

@ -4,7 +4,7 @@
height: 4px; height: 4px;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
background: $c-gray-light; background: $gray-light;
&__portion { &__portion {
left: 0; left: 0;
@ -22,6 +22,6 @@
border-radius: 6px; border-radius: 6px;
line-height: 12px; line-height: 12px;
text-align: center; text-align: center;
background-color: $c-gray-light; background-color: $gray-light;
} }
} }

20
packages/vant-css/src/quantity.css
View File

@ -7,7 +7,7 @@
.van-quantity__input, .van-quantity__input,
.van-quantity__minus, .van-quantity__minus,
.van-quantity__plus { .van-quantity__plus {
border-color: #e8e8e8; border-color: $active-color;
} }
} }
@ -15,10 +15,9 @@
width: 40px; width: 40px;
height: 30px; height: 30px;
box-sizing: border-box; box-sizing: border-box;
background-color: $c-white; background-color: $white;
border: 1px solid $c-gray-dark; border: 1px solid $border-color;
position: relative; position: relative;
outline: 0;
padding: 5px; padding: 5px;
vertical-align: middle; vertical-align: middle;
@ -53,8 +52,8 @@
} }
&--disabled { &--disabled {
background-color: #f8f8f8; background-color: $background-color;
border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8; border-color: $active-color $border-color $active-color $active-color;
} }
} }
@ -62,8 +61,8 @@
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
&--disabled { &--disabled {
background-color: #f8f8f8; background-color: $background-color;
border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999; border-color: $active-color $active-color $active-color $border-color;
} }
} }
@ -71,13 +70,12 @@
width: 33px; width: 33px;
height: 26px; height: 26px;
padding: 1px; padding: 1px;
border: 1px solid $c-gray-dark; border: 1px solid $border-color;
border-width: 1px 0; border-width: 1px 0;
border-radius: 0; border-radius: 0;
box-sizing: content-box; box-sizing: content-box;
color: $c-gray-darker; color: $gray-darker;
font-size: 14px; font-size: 14px;
outline: 0;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;

6
packages/vant-css/src/radio.css
View File

@ -7,7 +7,6 @@
position: relative; position: relative;
height: 22px; height: 22px;
float: left; float: left;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
&__control { &__control {
@ -24,7 +23,6 @@
line-height: 22px; line-height: 22px;
display: block; display: block;
margin-left: 37px; margin-left: 37px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.van-icon { .van-icon {
@ -33,11 +31,11 @@
} }
.van-icon-checked { .van-icon-checked {
color: $c-green; color: $green;
} }
.van-icon-check { .van-icon-check {
color: $c-gray-dark; color: $gray-dark;
} }
&--disabled { &--disabled {

10
packages/vant-css/src/reset.css
View File

@ -8,7 +8,8 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
} }
html { html {
line-height: 1 line-height: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
ol, ul { ol, ul {
@ -48,15 +49,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
body { body {
font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, sans-serif; font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, sans-serif;
color: #333; color: $text-color;
background-color: #f8f8f8; background-color: $background-color;
-webkit-backface-visibility: hidden;
} }
a { a {
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
button, button,
@ -65,7 +64,6 @@ select,
textarea { textarea {
font-family: inherit; font-family: inherit;
margin: 0; margin: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
} }

3
packages/vant-css/src/row.css
View File

@ -1,8 +1,9 @@
@import './common/var.css';
.van-row { .van-row {
&:after { &:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
zoom: 1;
} }

17
packages/vant-css/src/search.css
View File

@ -1,5 +1,4 @@
@import './common/var.css'; @import './common/var.css';
@import './icon.css';
.van-search { .van-search {
position: relative; position: relative;
@ -13,19 +12,19 @@
&--showcase { &--showcase {
padding: 10px; padding: 10px;
background-color: #f8f8f8; background-color: $background-color;
.van-search__input-wrap { .van-search__input-wrap {
border-color: $c-gray-light; border-color: $gray-light;
} }
} }
&__input-wrap { &__input-wrap {
position: relative; position: relative;
padding: 8px 24px 8px 35px; padding: 8px 24px 8px 35px;
border: 1px solid $c-gray-light; border: 1px solid $gray-light;
border-radius: 4px; border-radius: 4px;
background-color: $c-white; background-color: $white;
} }
&__input { &__input {
@ -33,10 +32,8 @@
width: 100%; width: 100%;
height: 14px; height: 14px;
font-size: 14px; font-size: 14px;
color: $c-gray-dark; color: $gray-dark;
border: none; border: none;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
&__cancel { &__cancel {
@ -46,11 +43,11 @@
top: 0; top: 0;
right: 10px; right: 10px;
font-size: 14px; font-size: 14px;
color: $c-green; color: $green;
} }
.van-icon-search { .van-icon-search {
color: $c-gray-darker; color: $gray-darker;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);

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

@ -1,11 +1,9 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/ellipsis.css'; @import './mixins/ellipsis.css';
@import './icon.css';
@import './mixins/border_retina.css';
.van-steps { .van-steps {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: $white;
&--horizontal { &--horizontal {
padding: 0 10px; padding: 0 10px;
@ -61,13 +59,13 @@
&__title { &__title {
font-size: 14px; font-size: 14px;
color: $c-black; color: $text-color;
} }
&__desc { &__desc {
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
color: $c-gray-dark; color: $gray-dark;
max-height: 18px; max-height: 18px;
@mixin multi-ellipsis 1; @mixin multi-ellipsis 1;
} }
@ -76,7 +74,7 @@
.van-step { .van-step {
font-size: 14px; font-size: 14px;
position: relative; position: relative;
color: $c-gray-dark; color: $gray-dark;
&--horizontal { &--horizontal {
float: left; float: left;
@ -113,7 +111,7 @@
top: 28px; top: 28px;
left: -8px; left: -8px;
padding: 0 8px; padding: 0 8px;
background-color: #fff; background-color: $white;
z-index: 1; z-index: 1;
} }
@ -130,20 +128,20 @@
top: 30px; top: 30px;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: $c-gray-light; background-color: $gray-light;
} }
&.van-step--finish { &.van-step--finish {
color: $c-black; color: $text-color;
.van-step__circle, .van-step__circle,
.van-step__line { .van-step__line {
background-color: $c-green; background-color: $green;
} }
} }
&.van-step--process { &.van-step--process {
color: $c-black; color: $text-color;
.van-step__circle-container { .van-step__circle-container {
top: 24px; top: 24px;
@ -151,7 +149,7 @@
.van-icon { .van-icon {
font-size: 12px; font-size: 12px;
color: $c-green; color: $green;
line-height: 1; line-height: 1;
display: block; display: block;
} }
@ -173,8 +171,8 @@
line-height: 18px; line-height: 18px;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
&::after { &:not(:last-child)::after {
@mixin border-retina (bottom); border-bottom-width: 1px;
} }
&:first-child { &:first-child {
@ -183,17 +181,13 @@
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 20px; height: 20px;
background-color: #fff; background-color: $white;
top: 0; top: 0;
left: -15px; left: -15px;
z-index: 1; z-index: 1;
} }
} }
&:last-child::after {
display: none;
}
.van-step__circle-container > i { .van-step__circle-container > i {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
@ -217,7 +211,7 @@
left: -15px; left: -15px;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: $c-gray-light; background-color: $gray-light;
} }
} }
} }

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

@ -18,13 +18,13 @@
height: 5px; height: 5px;
display: inline-block; display: inline-block;
border-radius: 100%; border-radius: 100%;
background: #999; background: $gray-dark;
opacity: .8; opacity: .8;
margin: 0 3px; margin: 0 3px;
z-index: 1; z-index: 1;
&--active { &--active {
background: $c-orange; background: $orange;
opacity: 1; opacity: 1;
} }
} }

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

@ -1,3 +1,5 @@
@import './common/var.css';
.van-switch-cell { .van-switch-cell {
.van-cell__title { .van-cell__title {
vertical-align: middle; vertical-align: middle;

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

@ -1,31 +1,29 @@
@import './mixins/border_retina.css'; @import './common/var.css';
.van-switch { .van-switch {
height: 31px; height: 31px;
width: 51px; width: 51px;
display: inline-block; display: inline-block;
position: relative; position: relative;
background: #fff; background: $white;
border-radius: 16px; border-radius: 16px;
&::after{ border: 1px solid rgba(0, 0, 0, .1);
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1); border-radius: 32px;
border-width: 3px;
border-radius: 32px;
}
&__node { &__node {
width: 28px; width: 30px;
height: 28px; height: 30px;
border-radius: 13.5px; border-radius: 13.5px;
background-color: #fff; background-color: $white;
position: absolute; position: absolute;
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
left: 1px; left: 0;
top: 1px; top: 0;
z-index: 2; z-index: 2;
transition: transform .3s; transition: transform .3s;
&::after { &::after {
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1);
border-radius: 27px; border-radius: 27px;
} }
} }
@ -42,14 +40,18 @@
&--on { &--on {
background-color: #44db5e; background-color: #44db5e;
&::after { border-color: #44db5e; }
&::after {
border-color: #44db5e;
}
.van-switch__node { .van-switch__node {
transform: translateX(20px); transform: translateX(21px);
} }
} }
&--off { &--off {
background-color: #fff; background-color: $white;
border-color: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1);
} }

38
packages/vant-css/src/tab.css
View File

@ -1,5 +1,4 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
.van-tabs { .van-tabs {
position: relative; position: relative;
@ -32,7 +31,7 @@
.van-tab { .van-tab {
&::after { &::after {
@mixin border-retina (top, bottom); border-width: 1px 0;
} }
} }
} }
@ -40,23 +39,23 @@
&--card { &--card {
height: 28px; height: 28px;
margin: 0 15px; margin: 0 15px;
background-color: $c-white; background-color: $white;
border-radius: 2px; border-radius: 2px;
border: 1px solid #666666; border: 1px solid $gray-darker;
overflow: hidden; overflow: hidden;
.van-tab { .van-tab {
color: #666; color: $gray-darker;
line-height: 28px; line-height: 28px;
border-right: 1px solid #666; border-right: 1px solid $gray-darker;
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
&.van-tab--active { &.van-tab--active {
background-color: #666; background-color: $gray-darker;
color: $c-white; color: $white;
} }
} }
} }
@ -76,18 +75,17 @@
.van-tab { .van-tab {
position: relative; position: relative;
color: $c-black; color: $text-color;
background-color: $c-white; background-color: $white;
font-size: 14px; font-size: 14px;
line-height: 44px; line-height: 44px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
flex: 1; flex: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&--active { &--active {
color: #FF4444; color: $red;
} }
&__pane { &__pane {
@ -98,19 +96,3 @@
} }
} }
} }

24
packages/vant-css/src/tag.css
View File

@ -1,24 +1,22 @@
@import './common/var.css'; @import './common/var.css';
@import './mixins/border_retina.css';
.van-tag { .van-tag {
position: relative;
display: inline-block; display: inline-block;
line-height: 14px; line-height: 14px;
padding: 1px 5px; padding: 1px 5px;
border-radius: 2px; border-radius: 2px;
font-size: 10px; font-size: 10px;
background: $c-gray; background: $gray;
color: $c-white; color: $white;
&::after { &::after {
@mixin border-retina (top, right, bottom, left), $c-gray; border-color: $gray;
border-radius: 4px; border-radius: 4px;
} }
&.is-plain { &.is-plain {
background: $c-white; background: $white;
color: $c-gray; color: $gray;
} }
&.is-mark { &.is-mark {
@ -30,14 +28,14 @@
} }
&--success { &--success {
background: $c-green; background: $green;
&::after { &::after {
border-color: $c-green; border-color: $green;
} }
&.is-plain { &.is-plain {
color: $c-green; color: $green;
} }
} }
@ -54,14 +52,14 @@
} }
&--primary { &--primary {
background: $c-blue; background: $blue;
&::after { &::after {
border-color: $c-blue; border-color: $blue;
} }
&.is-plain { &.is-plain {
color: $c-blue; color: $blue;
} }
} }
} }

18
packages/vant-css/src/toast.css
View File

@ -4,23 +4,26 @@
position: fixed; position: fixed;
z-index: 3001; z-index: 3001;
border-radius: 5px; border-radius: 5px;
background-color: #272727; background-color: rgb(39, 39, 39, .7);
opacity: .7;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
font-size: 12px; font-size: 12px;
color: $c-white; color: $white;
text-align: center; text-align: center;
line-height: 12px; line-height: 12px;
&-wrapper {
transition: opacity .2s;
}
&__overlay { &__overlay {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
background: transparent; background: transparent;
height: 100vh; height: 100%;
width: 100vh; width: 100%;
z-index: 3000; z-index: 3000;
} }
@ -28,7 +31,7 @@
padding: 45px; padding: 45px;
} }
&--text, html { &--text {
padding: 12px; padding: 12px;
min-width: 200px; min-width: 200px;
} }
@ -50,9 +53,6 @@
} }
} }
.van-toast-fade-enter-active, .van-toast-fade-leave-active {
transition: opacity .2s;
}
.van-toast-fade-enter, .van-toast-fade-leave-to { .van-toast-fade-enter, .van-toast-fade-leave-to {
opacity: 0; opacity: 0;
} }

7
packages/vant-css/src/uploader.css
View File

@ -1,3 +1,5 @@
@import './common/var.css';
.van-uploader { .van-uploader {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -8,14 +10,13 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
cursor:pointer; cursor: pointer;
} }
input[type="file" i]::-webkit-file-upload-button { input[type="file" i]::-webkit-file-upload-button {
cursor:pointer; cursor: pointer;
} }
} }