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

[improvement] use less as css compiler (#664)

Browse Source
This commit is contained in:
neverland 2018-09-28 15:18:24 +08:00 committed by GitHub
parent fe4024cdc9
commit 0e3ee3dc77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
61 changed files with 772 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/compiler.js
View File

@ -1,6 +1,7 @@
const gulp = require('gulp'); const gulp = require('gulp');
const path = require('path'); const path = require('path');
const babel = require('gulp-babel'); const babel = require('gulp-babel');
const less = require('gulp-less');
const postcss = require('gulp-postcss'); const postcss = require('gulp-postcss');
const cssmin = require('gulp-clean-css'); const cssmin = require('gulp-clean-css');
const rename = require('gulp-rename'); const rename = require('gulp-rename');
@ -8,15 +9,16 @@ const rename = require('gulp-rename');
const isProduction = process.env.NODE_ENV === 'production'; const isProduction = process.env.NODE_ENV === 'production';
const src = path.join(__dirname, '../packages'); const src = path.join(__dirname, '../packages');
const dist = path.join(__dirname, isProduction ? '../dist' : '../example/dist'); const dist = path.join(__dirname, isProduction ? '../dist' : '../example/dist');
const ext = ['js', 'ts', 'css', 'json', 'wxml']; const ext = ['js', 'ts', 'less', 'json', 'wxml'];
function copy(ext) { function copy(ext) {
return gulp.src([src + '/**/*.' + ext]).pipe(gulp.dest(dist)); return gulp.src([src + '/**/*.' + ext]).pipe(gulp.dest(dist));
} }
gulp.task('compile-css', () => { gulp.task('compile-less', () => {
return gulp return gulp
.src([src + '/**/*.css']) .src([src + '/**/*.less'])
.pipe(less())
.pipe(postcss()) .pipe(postcss())
.pipe(cssmin()) .pipe(cssmin())
.pipe( .pipe(

5
build/webpack.doc.dev.js
View File

@ -52,11 +52,12 @@ module.exports = {
use: 'babel-loader' use: 'babel-loader'
}, },
{ {
test: /\.(css|postcss)$/, test: /\.(css|less)$/,
use: [ use: [
'style-loader', 'style-loader',
'css-loader', 'css-loader',
'postcss-loader' 'postcss-loader',
'less-loader'
] ]
}, },
{ {

2
dist/col/index.wxss vendored
View File

@ -1 +1 @@
.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16667%}.van-col--offset-1{margin-left:4.16667%}.van-col--2{width:8.33333%}.van-col--offset-2{margin-left:8.33333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66667%}.van-col--offset-4{margin-left:16.66667%}.van-col--5{width:20.83333%}.van-col--offset-5{margin-left:20.83333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16667%}.van-col--offset-7{margin-left:29.16667%}.van-col--8{width:33.33333%}.van-col--offset-8{margin-left:33.33333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66667%}.van-col--offset-10{margin-left:41.66667%}.van-col--11{width:45.83333%}.van-col--offset-11{margin-left:45.83333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16667%}.van-col--offset-13{margin-left:54.16667%}.van-col--14{width:58.33333%}.van-col--offset-14{margin-left:58.33333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66667%}.van-col--offset-16{margin-left:66.66667%}.van-col--17{width:70.83333%}.van-col--offset-17{margin-left:70.83333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16667%}.van-col--offset-19{margin-left:79.16667%}.van-col--20{width:83.33333%}.van-col--offset-20{margin-left:83.33333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66667%}.van-col--offset-22{margin-left:91.66667%}.van-col--23{width:95.83333%}.van-col--offset-23{margin-left:95.83333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%} .van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}

1
dist/common/index.wxss vendored
View File

@ -1 +0,0 @@
.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2}.van-multi-ellipsis--l3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;-webkit-transform:scale(.5);transform:scale(.5);pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}

2
docs/src/App.vue
View File

@ -16,7 +16,7 @@ export default {
}; };
</script> </script>
<style lang="postcss"> <style lang="less">
.van-doc-intro { .van-doc-intro {
text-align: center; text-align: center;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

2
docs/src/Preview.vue
View File

@ -72,7 +72,7 @@ export default {
}; };
</script> </script>
<style lang="postcss"> <style lang="less">
body { body {
margin: 0; margin: 0;
color: #333; color: #333;

5
package.json
View File

@ -37,12 +37,13 @@
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-babel": "^8.0.0", "gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.9.0", "gulp-clean-css": "^3.9.0",
"gulp-less": "^4.0.1",
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"postcss-calc": "^6.0.2", "less": "^3.8.1",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"precss": "^3.1.2",
"progress-bar-webpack-plugin": "^1.11.0", "progress-bar-webpack-plugin": "^1.11.0",
"style-loader": "^0.23.0", "style-loader": "^0.23.0",
"typescript": "^3.0.3", "typescript": "^3.0.3",

20
packages/action-sheet/index.css → packages/action-sheet/index.less
View File

@ -1,12 +1,12 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
.van-action-sheet { .van-action-sheet {
color: $text-color; color: @text-color;
max-height: 90%; max-height: 90%;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: $background-color; background-color: @background-color;
&__item, &__item,
&__cancel { &__cancel {
@ -14,18 +14,18 @@
line-height: 50px; line-height: 50px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
background-color: $white; background-color: @white;
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
} }
&__item--disabled { &__item--disabled {
color: $gray; color: @gray;
&:active { &:active {
background-color: $white; background-color: @white;
} }
} }
@ -36,7 +36,7 @@
&__subname { &__subname {
font-size: 12px; font-size: 12px;
color: $gray-darker; color: @gray-darker;
margin-left: 5px; margin-left: 5px;
} }
@ -59,7 +59,7 @@
right: 0; right: 0;
padding: 0 15px; padding: 0 15px;
font-size: 18px !important; font-size: 18px !important;
color: $gray-dark; color: @gray-dark;
position: absolute !important; position: absolute !important;
line-height: inherit !important; line-height: inherit !important;
} }

12
packages/area/index.css → packages/area/index.less
View File

@ -1,10 +1,10 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-picker { .van-picker {
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */ -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: $white; background-color: @white;
user-select: none; user-select: none;
&__toolbar { &__toolbar {
@ -18,10 +18,10 @@
&__cancel, &__cancel,
&__confirm { &__confirm {
padding: 0 15px; padding: 0 15px;
color: $blue; color: @blue;
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
} }
@ -55,10 +55,10 @@
&__item { &__item {
padding: 0 5px; padding: 0 5px;
color: $gray-dark; color: @gray-dark;
&--selected { &--selected {
color: $black; color: @black;
} }
&--disabled { &--disabled {

6
packages/badge-group/index.css
View File

@ -1,6 +0,0 @@
@import '../common/style/var.css';
@import '../common/style/hairline.css';
.van-badge-group {
width: 85px;
}

6
packages/badge-group/index.less Normal file
View File

@ -0,0 +1,6 @@
@import '../common/style/var.less';
@import '../common/style/hairline.less';
.van-badge-group {
width: 85px;
}

20
packages/badge/index.css → packages/badge/index.less
View File

@ -1,5 +1,5 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
.van-badge { .van-badge {
display: block; display: block;
@ -7,15 +7,15 @@
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: 1.4;
user-select: none; user-select: none;
color: $gray-darker; color: @gray-darker;
word-break: break-all; word-break: break-all;
box-sizing: border-box; box-sizing: border-box;
padding: 20px 12px 20px 9px; padding: 20px 12px 20px 9px;
background-color: $background-color; background-color: @background-color;
border-left: 3px solid transparent; border-left: 3px solid transparent;
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
&::after { &::after {
@ -24,8 +24,8 @@
&--active { &--active {
font-weight: bold; font-weight: bold;
color: $text-color; color: @text-color;
border-color: $red; border-color: @red;
&::after { &::after {
border-right-width: 1px; border-right-width: 1px;
@ -33,7 +33,7 @@
&, &,
&:active { &:active {
background-color: $white; background-color: @white;
} }
} }
@ -41,7 +41,7 @@
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 2px; right: 2px;
color: $white; color: @white;
font-size: 10px; font-size: 10px;
font-weight: normal; font-weight: normal;
transform: scale(0.8); transform: scale(0.8);
@ -51,6 +51,6 @@
min-width: 18px; min-width: 18px;
line-height: 18px; line-height: 18px;
border-radius: 9px; border-radius: 9px;
background-color: $red; background-color: @red;
} }
} }

44
packages/button/index.css → packages/button/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-button { .van-button {
position: relative; position: relative;
@ -23,8 +23,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: inherit; border: inherit;
border-color: $black; border-color: @black;
background-color: $black; background-color: @black;
border-radius: inherit; /* inherit parent's border radius */ border-radius: inherit; /* inherit parent's border radius */
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
@ -38,42 +38,42 @@
} }
&--default { &--default {
color: $button-default-color; color: @button-default-color;
background-color: $button-default-background-color; background-color: @button-default-background-color;
border: 1px solid $button-default-border-color; border: 1px solid @button-default-border-color;
} }
&--primary { &--primary {
color: $button-primary-color; color: @button-primary-color;
background-color: $button-primary-background-color; background-color: @button-primary-background-color;
border: 1px solid $button-primary-border-color; border: 1px solid @button-primary-border-color;
} }
&--danger { &--danger {
color: $button-danger-color; color: @button-danger-color;
background-color: $button-danger-background-color; background-color: @button-danger-background-color;
border: 1px solid $button-danger-border-color; border: 1px solid @button-danger-border-color;
} }
&--warning { &--warning {
color: $button-warning-color; color: @button-warning-color;
background-color: $button-warning-background-color; background-color: @button-warning-background-color;
border: 1px solid $button-warning-border-color; border: 1px solid @button-warning-border-color;
} }
&--plain { &--plain {
background-color: $white; background-color: @white;
&.van-button--primary { &.van-button--primary {
color: $button-primary-background-color; color: @button-primary-background-color;
} }
&.van-button--danger { &.van-button--danger {
color: $button-danger-background-color; color: @button-danger-background-color;
} }
&.van-button--warning { &.van-button--warning {
color: $button-warning-background-color; color: @button-warning-background-color;
} }
} }
@ -119,8 +119,8 @@
} }
&--disabled { &--disabled {
color: $button-disabled-color; color: @button-disabled-color;
background-color: $button-disabled-background-color; background-color: @button-disabled-background-color;
border: 1px solid $button-disabled-border-color; border: 1px solid @button-disabled-border-color;
} }
} }

14
packages/card/index.css → packages/card/index.less
View File

@ -1,8 +1,8 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/mixins/ellipsis.css'; @import '../common/style/mixins/ellipsis.less';
.van-card { .van-card {
color: $text-color; color: @text-color;
height: 100px; height: 100px;
font-size: 16px; font-size: 16px;
background: #fafafa; background: #fafafa;
@ -54,15 +54,15 @@
&__title { &__title {
max-height: 40px; max-height: 40px;
@include multi-ellipsis(2); .multi-ellipsis(2);
} }
&__desc { &__desc {
color: $gray-darker; color: @gray-darker;
font-size: 12px; font-size: 12px;
max-height: 20px; max-height: 20px;
@include ellipsis; .ellipsis();
} }
&__price, &__price,
@ -78,7 +78,7 @@
} }
&__num { &__num {
color: $gray-darker; color: @gray-darker;
font-size: 12px; font-size: 12px;
} }

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

@ -1,2 +0,0 @@
@import '../common/style/var.css';
@import '../common/style/hairline.css';

2
packages/cell-group/index.less Normal file
View File

@ -0,0 +1,2 @@
@import '../common/style/var.less';
@import '../common/style/hairline.less';

18
packages/cell/index.css → packages/cell/index.less
View File

@ -1,5 +1,5 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
.van-cell { .van-cell {
width: 100%; width: 100%;
@ -8,8 +8,8 @@
box-sizing: border-box; box-sizing: border-box;
line-height: 24px; line-height: 24px;
position: relative; position: relative;
background-color: $white; background-color: @white;
color: $text-color; color: @text-color;
font-size: 14px; font-size: 14px;
&::after { &::after {
@ -20,13 +20,13 @@
} }
&-group { &-group {
background-color: $white; background-color: @white;
} }
&__label { &__label {
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
color: $gray-darker; color: @gray-darker;
} }
&__title, &__title,
@ -52,7 +52,7 @@
} }
&__right-icon { &__right-icon {
color: $gray-dark; color: @gray-dark;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
margin-left: 5px; margin-left: 5px;
@ -60,7 +60,7 @@
&--clickable { &--clickable {
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
} }
@ -72,7 +72,7 @@
position: absolute; position: absolute;
left: 7px; left: 7px;
font-size: 14px; font-size: 14px;
color: $red; color: @red;
} }
} }

9
packages/col/index.css
View File

@ -1,9 +0,0 @@
.van-col {
float: left;
box-sizing: border-box;
}
@for $i from 1 to 24 {
.van-col--$i { width: calc($i * 100% / 24); }
.van-col--offset-$i { margin-left: calc($i * 100% / 24); }
}

11
packages/col/index.less Normal file
View File

@ -0,0 +1,11 @@
.van-col {
float: left;
box-sizing: border-box;
}
.generate(24);
.generate(@n, @i: 1) when (@i =< @n) {
.van-col--@{i} { width: @i * 100% / 24; }
.van-col--offset-@{i} { margin-left: @i * 100% / 24; }
.generate(@n, (@i + 1));
}

8
packages/common/index.css
View File

@ -2,7 +2,7 @@
* Entry of basic styles * Entry of basic styles
*/ */
@import "./style/var.css"; @import "./style/var.less";
@import "./style/ellipsis.css"; @import "./style/ellipsis.less";
@import "./style/clearfix.css"; @import "./style/clearfix.less";
@import "./style/hairline.css"; @import "./style/hairline.less";

5
packages/common/style/clearfix.css
View File

@ -1,5 +0,0 @@
@import './mixins/clearfix.css';
.van-clearfix {
@include clearfix;
}

5
packages/common/style/clearfix.less Normal file
View File

@ -0,0 +1,5 @@
@import './mixins/clearfix.less';
.van-clearfix {
.clearfix();
}

13
packages/common/style/ellipsis.css
View File

@ -1,13 +0,0 @@
@import './mixins/ellipsis.css';
.van-ellipsis {
@include ellipsis;
}
.van-multi-ellipsis--l2 {
@include multi-ellipsis(2);
}
.van-multi-ellipsis--l3 {
@include multi-ellipsis(3);
}

13
packages/common/style/ellipsis.less Normal file
View File

@ -0,0 +1,13 @@
@import './mixins/ellipsis.less';
.van-ellipsis {
.ellipsis();
}
.van-multi-ellipsis--l2 {
.multi-ellipsis(2);
}
.van-multi-ellipsis--l3 {
.multi-ellipsis(3);
}

4
packages/common/style/hairline.css → packages/common/style/hairline.less
View File

@ -1,4 +1,4 @@
@import "./mixins/hairline.css"; @import "./mixins/hairline.less";
.van-hairline, .van-hairline,
.van-hairline--top, .van-hairline--top,
@ -10,7 +10,7 @@
position: relative; position: relative;
&::after { &::after {
@include hairline; .hairline();
} }
} }

2
packages/common/style/mixins/clearfix.css → packages/common/style/mixins/clearfix.less
View File

@ -1,4 +1,4 @@
@mixin clearfix { .clearfix() {
&::after { &::after {
content: ''; content: '';
display: table; display: table;

6
packages/common/style/mixins/ellipsis.css → packages/common/style/mixins/ellipsis.less
View File

@ -1,12 +1,12 @@
@mixin multi-ellipsis($lines) { .multi-ellipsis(@lines) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: $lines; -webkit-line-clamp: @lines;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
@mixin ellipsis { .ellipsis() {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

4
packages/common/style/mixins/hairline.css → packages/common/style/mixins/hairline.less
View File

@ -1,4 +1,4 @@
@mixin hairline($border-color: #eee) { .hairline(@border-color: #eee) {
content: ''; content: '';
position: absolute; position: absolute;
top: -50%; top: -50%;
@ -9,5 +9,5 @@
pointer-events: none; pointer-events: none;
box-sizing: border-box; box-sizing: border-box;
transform-origin: center; /* cover wechat button:after default transforn-origin */ transform-origin: center; /* cover wechat button:after default transforn-origin */
border: 0 solid $border-color; border: 0 solid @border-color;
} }

38
packages/common/style/var.css
View File

@ -1,38 +0,0 @@
/* color variables */
$black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$orange: #f85;
$green: #06bf04;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
$gray-darker: #666;
$gray-dark: #999;
/* default colors */
$text-color: #333;
$border-color: #eee;
$active-color: #e8e8e8;
$background-color: #f8f8f8;
/* 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-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: $red;
$button-warning-color: $white;
$button-warning-background-color: $orange;
$button-warning-border-color: $orange;
$button-disabled-color: $gray-dark;
$button-disabled-background-color: $active-color;
$button-disabled-border-color: $border-color;
$button-bottom-action-default-color: $white;
$button-bottom-action-default-background-color: #f85;
$button-bottom-action-primary-color: $white;
$button-bottom-action-primary-background-color: $red;

38
packages/common/style/var.less Normal file
View File

@ -0,0 +1,38 @@
/* color variables */
@black: #000;
@white: #fff;
@red: #f44;
@blue: #38f;
@orange: #f85;
@green: #06bf04;
@gray: #c9c9c9;
@gray-light: #e5e5e5;
@gray-darker: #666;
@gray-dark: #999;
/* default colors */
@text-color: #333;
@border-color: #eee;
@active-color: #e8e8e8;
@background-color: #f8f8f8;
/* 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-danger-color: @white;
@button-danger-background-color: @red;
@button-danger-border-color: @red;
@button-warning-color: @white;
@button-warning-background-color: @orange;
@button-warning-border-color: @orange;
@button-disabled-color: @gray-dark;
@button-disabled-background-color: @active-color;
@button-disabled-border-color: @border-color;
@button-bottom-action-default-color: @white;
@button-bottom-action-default-background-color: #f85;
@button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red;

10
packages/dialog/index.css → packages/dialog/index.less
View File

@ -1,12 +1,12 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
.van-dialog { .van-dialog {
width: 85%; width: 85%;
font-size: 16px; font-size: 16px;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: @white;
&__header { &__header {
padding: 15px 0 0; padding: 15px 0 0;
@ -22,7 +22,7 @@
line-height: 1.5; line-height: 1.5;
&--has-title { &--has-title {
color: $gray-darker; color: @gray-darker;
font-size: 14px; font-size: 14px;
} }
} }
@ -45,7 +45,7 @@
&__confirm { &__confirm {
&, &,
&:active { &:active {
color: $red !important; color: @red !important;
} }
} }

12
packages/field/index.css → packages/field/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-field { .van-field {
&__body { &__body {
@ -26,7 +26,7 @@
&--disabled { &--disabled {
opacity: 1; opacity: 1;
color: $gray-darker; color: @gray-darker;
background-color: transparent; background-color: transparent;
} }
@ -58,11 +58,11 @@
} }
&__clear { &__clear {
color: $gray; color: @gray;
} }
&__icon-container { &__icon-container {
color: $gray-dark; color: @gray-dark;
} }
&__icon { &__icon {
@ -76,12 +76,12 @@
} }
&__error-message { &__error-message {
color: $red; color: @red;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
} }
&--error { &--error {
color: $red; color: @red;
} }
} }

4
packages/icon/index.css → packages/icon/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@font-face { @font-face {
font-style: normal; font-style: normal;
@ -26,7 +26,7 @@
position: absolute; position: absolute;
border-radius: .6em; border-radius: .6em;
box-sizing: border-box; box-sizing: border-box;
background-color: $red; background-color: @red;
transform: translateX(-50%); transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
} }

13
packages/loading/index.css → packages/loading/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-loading { .van-loading {
z-index: 0; z-index: 0;
@ -48,12 +48,15 @@
} }
} }
@for $i from 1 to 12 {
.van-loading__dot:nth-of-type($i) { .generate(@n, @i: 1) when (@i =< @n) {
opacity: calc(1 - (0.75 / 12) * ($i - 1)); .van-loading__dot:nth-of-type(@{i}) {
transform: rotate(calc($i * 30deg)); opacity: 1 - (0.75 / 12) * (@i - 1);
transform: rotate(@i * 30deg);
} }
.generate(@n, (@i + 1));
} }
.generate(12);
@keyframes van-rotate { @keyframes van-rotate {
from { from {

10
packages/nav-bar/index.css → packages/nav-bar/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-nav-bar { .van-nav-bar {
height: 46px; height: 46px;
@ -6,10 +6,10 @@
user-select: none; user-select: none;
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;
background-color: $white; background-color: @white;
&__arrow { &__arrow {
color: $blue; color: @blue;
vertical-align: middle; vertical-align: middle;
transform: rotate(180deg); transform: rotate(180deg);
@ -48,14 +48,14 @@
} }
&__text { &__text {
color: $blue; color: @blue;
margin: 0 -15px; margin: 0 -15px;
padding: 0 15px; padding: 0 15px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
} }
} }

0
packages/notice-bar/index.css → packages/notice-bar/index.less
View File

4
packages/notify/index.css → packages/notify/index.less
View File

@ -1,10 +1,10 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-notify { .van-notify {
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 110; z-index: 110;
color: $white; color: @white;
position: fixed; position: fixed;
min-height: 32px; min-height: 32px;
line-height: 2.3; line-height: 2.3;

0
packages/overlay/index.css → packages/overlay/index.less
View File

14
packages/panel/index.css
View File

@ -1,14 +0,0 @@
@import '../common/style/var.css';
@import '../common/style/hairline.css';
.van-panel {
background: $white;
&__header-value {
color: $red;
}
&__footer {
padding: 10px 15px;
}
}

14
packages/panel/index.less Normal file
View File

@ -0,0 +1,14 @@
@import '../common/style/var.less';
@import '../common/style/hairline.less';
.van-panel {
background: @white;
&__header-value {
color: @red;
}
&__footer {
padding: 10px 15px;
}
}

4
packages/popup/index.css → packages/popup/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-popup { .van-popup {
top: 50%; top: 50%;
@ -7,7 +7,7 @@
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
background-color: $white; background-color: @white;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
animation: ease both; animation: ease both;

6
packages/progress/index.css → packages/progress/index.less
View File

@ -1,10 +1,10 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-progress { .van-progress {
height: 4px; height: 4px;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
background: $gray-light; background: @gray-light;
&__portion { &__portion {
left: 0; left: 0;
@ -30,7 +30,7 @@
border-radius: 1em; border-radius: 1em;
word-break: keep-all; word-break: keep-all;
box-sizing: border-box; box-sizing: border-box;
background-color: $gray-light; background-color: @gray-light;
transform: translate(100%, -50%); transform: translate(100%, -50%);
} }
} }

14
packages/radio-group/index.css → packages/radio-group/index.less
View File

@ -1,6 +1,6 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
$van-radio-size: 20px; @van-radio-size: 20px;
.van-radio { .van-radio {
overflow: hidden; overflow: hidden;
@ -15,7 +15,7 @@ $van-radio-size: 20px;
&__input { &__input {
height: 1em; height: 1em;
position: relative; position: relative;
font-size: $van-radio-size; font-size: @van-radio-size;
} }
&__control { &__control {
@ -30,7 +30,7 @@ $van-radio-size: 20px;
} }
&__label { &__label {
line-height: $van-radio-size; line-height: @van-radio-size;
margin-left: 10px; margin-left: 10px;
&--left { &--left {
@ -43,13 +43,13 @@ $van-radio-size: 20px;
width: 1em; width: 1em;
pointer-events: none; pointer-events: none;
&--disabled { &--disabled {
color: $gray-light; color: @gray-light;
} }
&--checked { &--checked {
color: $green; color: @green;
} }
&--check { &--check {
color: $gray-dark; color: @gray-dark;
} }
} }
} }

16
packages/radio/index.css → packages/radio/index.less
View File

@ -1,6 +1,6 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
$van-radio-size: 20px; @van-radio-size: 20px;
.van-radio { .van-radio {
overflow: hidden; overflow: hidden;
@ -15,7 +15,7 @@ $van-radio-size: 20px;
&__input { &__input {
position: relative; position: relative;
font-size: $van-radio-size; font-size: @van-radio-size;
} }
&__control { &__control {
@ -31,9 +31,9 @@ $van-radio-size: 20px;
&__label { &__label {
margin-left: 10px; margin-left: 10px;
color: $text-color; color: @text-color;
font-size: 16px; font-size: 16px;
line-height: $van-radio-size; line-height: @van-radio-size;
&--left { &--left {
margin: 0 10px 0 0; margin: 0 10px 0 0;
@ -47,15 +47,15 @@ $van-radio-size: 20px;
line-height: 0; line-height: 0;
&--disabled { &--disabled {
color: $gray-light; color: @gray-light;
} }
&--checked { &--checked {
color: $green; color: @green;
} }
&--check { &--check {
color: $gray-dark; color: @gray-dark;
} }
} }
} }

0
packages/row/index.css → packages/row/index.less
View File

8
packages/search/index.css → packages/search/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-search { .van-search {
display: flex; display: flex;
@ -11,7 +11,7 @@
border-radius: 4px; border-radius: 4px;
&__left-icon { &__left-icon {
color: $gray-dark; color: @gray-dark;
} }
} }
@ -32,10 +32,10 @@
padding: 0 10px; padding: 0 10px;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
color: $gray-darker; color: @gray-darker;
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
} }
} }

8
packages/slider/index.css → packages/slider/index.less
View File

@ -1,14 +1,14 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-slider { .van-slider {
position: relative; position: relative;
border-radius: 999px; border-radius: 999px;
background-color: $gray-light; background-color: @gray-light;
&__bar { &__bar {
position: relative; position: relative;
border-radius: inherit; border-radius: inherit;
background-color: $blue; background-color: @blue;
} }
&__button { &__button {
@ -18,7 +18,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: $white; background-color: @white;
transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0);
box-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 1px 2px rgba(0, 0, 0, .5);

22
packages/stepper/index.css → packages/stepper/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-stepper { .van-stepper {
font-size: 0; font-size: 0;
@ -8,7 +8,7 @@
&__input { &__input {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background-color: $white; background-color: @white;
} }
&__minus, &__minus,
@ -16,7 +16,7 @@
width: 40px; width: 40px;
height: 30px; height: 30px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $border-color; border: 1px solid @border-color;
position: relative; position: relative;
padding: 5px; padding: 5px;
@ -43,20 +43,20 @@
} }
&:active { &:active {
background-color: $active-color; background-color: @active-color;
} }
&--disabled { &--disabled {
background-color: $background-color; background-color: @background-color;
&::before, &::before,
&::after { &::after {
background-color: $gray; background-color: @gray;
} }
} }
&--disabled:active { &--disabled:active {
background-color: $background-color; background-color: @background-color;
} }
} }
@ -76,18 +76,18 @@
width: 33px; width: 33px;
height: 26px; height: 26px;
padding: 1px; padding: 1px;
border: 1px solid $border-color; 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: $gray-darker; color: @gray-darker;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;
&--disabled { &--disabled {
color: $gray; color: @gray;
background-color: $background-color; background-color: @background-color;
} }
} }
} }

22
packages/steps/index.css → packages/steps/index.less
View File

@ -1,9 +1,9 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
.van-steps { .van-steps {
overflow: hidden; overflow: hidden;
background-color: $white; background-color: @white;
&--horizontal { &--horizontal {
position: relative; position: relative;
@ -21,10 +21,10 @@
position: relative; position: relative;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: $gray-dark; color: @gray-dark;
&--finish { &--finish {
color: $text-color; color: @text-color;
} }
&__circle { &__circle {
@ -70,7 +70,7 @@
bottom: 6px; bottom: 6px;
z-index: 1; z-index: 1;
padding: 0 8px; padding: 0 8px;
background-color: $white; background-color: @white;
transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0);
} }
@ -86,17 +86,17 @@
right: 0; right: 0;
bottom: 6px; bottom: 6px;
height: 1px; height: 1px;
background-color: $border-color; background-color: @border-color;
transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0);
} }
&.van-step--process { &.van-step--process {
color: $text-color; color: @text-color;
.van-step__active { .van-step__active {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: $green; color: @green;
line-height: 1; line-height: 1;
} }
} }
@ -117,7 +117,7 @@
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 20px; height: 20px;
background-color: $white; background-color: @white;
top: 0; top: 0;
left: -15px; left: -15px;
z-index: 1; z-index: 1;
@ -143,7 +143,7 @@
z-index: 1; z-index: 1;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: $border-color; background-color: @border-color;
transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);
} }
} }

10
packages/submit-bar/index.css → packages/submit-bar/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-submit-bar { .van-submit-bar {
z-index: 100; z-index: 100;
@ -11,7 +11,7 @@
&__tip { &__tip {
padding: 10px; padding: 10px;
background-color: #fff7cc; background-color: #fff7cc;
color: $orange; color: @orange;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
} }
@ -20,20 +20,20 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 50px; height: 50px;
background-color: $white; background-color: @white;
font-size: 14px; font-size: 14px;
} }
&__text { &__text {
flex: 1; flex: 1;
color: $text-color; color: @text-color;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
} }
&__price { &__price {
padding-right: 12px; padding-right: 12px;
color: $red; color: @red;
} }
&__button { &__button {

2
packages/switch-cell/index.css → packages/switch-cell/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-switch-cell { .van-switch-cell {
padding-top: 8px; padding-top: 8px;

6
packages/switch/index.css → packages/switch/index.less
View File

@ -1,11 +1,11 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-switch { .van-switch {
height: 1em; height: 1em;
width: 1.6em; width: 1.6em;
display: inline-block; display: inline-block;
position: relative; position: relative;
background: $white; background: @white;
box-sizing: content-box; box-sizing: content-box;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .1);
border-radius: 1em; border-radius: 1em;
@ -19,7 +19,7 @@
transition: .3s; transition: .3s;
position: absolute; position: absolute;
border-radius: 100%; border-radius: 100%;
background-color: $white; background-color: @white;
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);
} }

6
packages/tabbar-item/index.css → packages/tabbar-item/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-tabbar-item { .van-tabbar-item {
float: left; float: left;
@ -29,7 +29,7 @@
content: ' '; content: ' ';
position: absolute; position: absolute;
border-radius: 100%; border-radius: 100%;
background-color: $red; background-color: @red;
} }
} }
@ -40,6 +40,6 @@
} }
&--active { &--active {
color: $blue; color: @blue;
} }
} }

2
packages/tabbar/index.css → packages/tabbar/index.less
View File

@ -1,4 +1,4 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-tabbar { .van-tabbar {
width: 100%; width: 100%;

44
packages/tabs/index.css → packages/tabs/index.less
View File

@ -1,8 +1,8 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
$van-tabs-line-height: 44px; @van-tabs-line-height: 44px;
$van-tabs-card-height: 30px; @van-tabs-card-height: 30px;
.van-tabs { .van-tabs {
position: relative; position: relative;
@ -35,7 +35,7 @@ $van-tabs-card-height: 30px;
display: flex; display: flex;
user-select: none; user-select: none;
position: relative; position: relative;
background-color: $white; background-color: @white;
&--line { &--line {
height: 100%; height: 100%;
@ -45,21 +45,21 @@ $van-tabs-card-height: 30px;
margin: 0 15px; margin: 0 15px;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $red; border: 1px solid @red;
height: $van-tabs-card-height; height: @van-tabs-card-height;
.van-tab { .van-tab {
color: $red; color: @red;
border-right: 1px solid $red; border-right: 1px solid @red;
line-height: calc($van-tabs-card-height - 2px); line-height: @van-tabs-card-height - 2px;
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
&.van-tab--active { &.van-tab--active {
color: $white; color: @white;
background-color: $red; background-color: @red;
} }
} }
} }
@ -71,22 +71,22 @@ $van-tabs-card-height: 30px;
bottom: 0; bottom: 0;
height: 2px; height: 2px;
position: absolute; position: absolute;
background-color: $red; background-color: @red;
} }
&--line { &--line {
padding-top: $van-tabs-line-height; padding-top: @van-tabs-line-height;
.van-tabs__wrap { .van-tabs__wrap {
height: $van-tabs-line-height; height: @van-tabs-line-height;
} }
} }
&--card { &--card {
padding-top: $van-tabs-card-height; padding-top: @van-tabs-card-height;
.van-tabs__wrap { .van-tabs__wrap {
height: $van-tabs-card-height; height: @van-tabs-card-height;
} }
} }
} }
@ -97,11 +97,11 @@ $van-tabs-card-height: 30px;
padding: 0 5px; padding: 0 5px;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
color: $text-color; color: @text-color;
line-height: $van-tabs-line-height; line-height: @van-tabs-line-height;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
background-color: $white; background-color: @white;
min-width: 0; /* hack for flex ellipsis */ min-width: 0; /* hack for flex ellipsis */
span { span {
@ -109,10 +109,10 @@ $van-tabs-card-height: 30px;
} }
&--active { &--active {
color: $red; color: @red;
} }
&--disabled { &--disabled {
color: $gray; color: @gray;
} }
} }

24
packages/tag/index.css → packages/tag/index.less
View File

@ -1,5 +1,5 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/hairline.css'; @import '../common/style/hairline.less';
.van-tag { .van-tag {
display: inline-block; display: inline-block;
@ -7,8 +7,8 @@
line-height: normal; line-height: normal;
border-radius: 3px; border-radius: 3px;
font-size: 10px; font-size: 10px;
background: $gray; background: @gray;
color: $white; color: @white;
&::after { &::after {
border-color: currentColor; border-color: currentColor;
@ -25,31 +25,31 @@
} }
&--success { &--success {
background: $green; background: @green;
&.van-tag--plain { &.van-tag--plain {
color: $green; color: @green;
} }
} }
&--danger { &--danger {
background: $button-danger-background-color; background: @button-danger-background-color;
&.van-tag--plain { &.van-tag--plain {
color: $button-danger-background-color; color: @button-danger-background-color;
} }
} }
&--primary { &--primary {
background: $blue; background: @blue;
&.van-tag--plain { &.van-tag--plain {
color: $blue; color: @blue;
} }
} }
&--plain { &--plain {
background: $white; background: @white;
color: $gray; color: @gray;
} }
} }

4
packages/toast/index.css → packages/toast/index.less
View File

@ -1,8 +1,8 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
.van-toast { .van-toast {
display: flex; display: flex;
color: $white; color: @white;
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
border-radius: 5px; border-radius: 5px;

0
packages/transition/index.css → packages/transition/index.less
View File

4
packages/tree-select/index.css → packages/tree-select/index.less
View File

@ -1,5 +1,5 @@
@import '../common/style/var.css'; @import '../common/style/var.less';
@import '../common/style/ellipsis.css'; @import '../common/style/ellipsis.less';
.tree-select { .tree-select {
user-select: none; user-select: none;

2
postcss.config.js
View File

@ -1,7 +1,5 @@
module.exports = { module.exports = {
plugins: { plugins: {
'precss': {},
'postcss-calc': {},
'autoprefixer': {} 'autoprefixer': {}
} }
}; };

877
yarn.lock
View File

File diff suppressed because it is too large Load Diff