mirror of
https://github.com/youzan/vant.git
synced 2026-05-10 01:06:44 +08:00
依赖更新 && 构建调整 (#60)
* upgrade dependencies * 更改所有 saladcss 写法 * fix: 升级依赖导致的样式错误 * fix: build vant css * use es module when pack && webpack scope hoisting * fix: vue module version * delete unused npm script * fix: build:vant script not work * fix: webpack config format * fix: build minify vant.js * fix: captain ui relative link
This commit is contained in:
neverland
+136
-138
@@ -1,154 +1,152 @@
|
||||
@import './common/var.css';
|
||||
@import './loading.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
.van-button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not(.is-disabled):active::after {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
&__icon-loading {
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&--default {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #cacaca;
|
||||
background-color: $c-gray-light;
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
border: 1px solid $button-primary-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #00AA00;
|
||||
background-color: #00AA00;
|
||||
color: #66CC66;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: $button-danger-color;
|
||||
background-color: $button-danger-background-color;
|
||||
border: 1px solid $button-danger-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #D43333;
|
||||
background-color: #D43333;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
&--normal {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
&--mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
|
||||
& + .van-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--loading {
|
||||
.van-button__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom-action {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: $bottom-action-button-default-background-color;
|
||||
color: $bottom-action-button-default-color;
|
||||
font-size: 16px;
|
||||
|
||||
&:active {
|
||||
border-color: #DD6F44;
|
||||
background-color: #DD6F44;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:not(.is-disabled):active::after {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
@e icon-loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@m default {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #cacaca;
|
||||
background-color: $c-gray-light;
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@m primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
border: 1px solid $button-primary-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #00AA00;
|
||||
background-color: #00AA00;
|
||||
color: #66CC66;
|
||||
}
|
||||
}
|
||||
|
||||
@m danger {
|
||||
color: $button-danger-color;
|
||||
background-color: $button-danger-background-color;
|
||||
border: 1px solid $button-danger-border-color;
|
||||
&.van-button--primary {
|
||||
background-color: $bottom-action-button-primary-background-color;
|
||||
color: $bottom-action-button-primary-color;
|
||||
|
||||
&:active {
|
||||
border-color: #D43333;
|
||||
background-color: #D43333;
|
||||
}
|
||||
}
|
||||
|
||||
@m large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@m normal {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@m small {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
@m mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
|
||||
& + .van-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
@m block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@m loading {
|
||||
.van-button__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@m bottom-action {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: $bottom-action-button-default-background-color;
|
||||
color: $bottom-action-button-default-color;
|
||||
font-size: 16px;
|
||||
|
||||
&:active {
|
||||
border-color: #DD6F44;
|
||||
background-color: #DD6F44;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.van-button--primary {
|
||||
background-color: $bottom-action-button-primary-background-color;
|
||||
color: $bottom-action-button-primary-color;
|
||||
|
||||
&:active {
|
||||
border-color: #D43333;
|
||||
background-color: #D43333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user