依赖更新 && 构建调整 (#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
Yao
+186
-188
@@ -3,223 +3,221 @@
|
||||
@import './icon.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b steps {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
.van-steps {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
@m horizontal {
|
||||
padding: 0 10px;
|
||||
&--horizontal {
|
||||
padding: 0 10px;
|
||||
|
||||
.van-steps__items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 22px;
|
||||
.van-steps__items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 22px;
|
||||
|
||||
&.van-steps__items--alone {
|
||||
padding-top: 10px;
|
||||
}
|
||||
&.van-steps__items--alone {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@m vertical {
|
||||
padding: 0 0 0 35px;
|
||||
}
|
||||
|
||||
@m 4 {
|
||||
.van-step {
|
||||
width: 33.2%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 3 {
|
||||
.van-step {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@e icon {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@e message {
|
||||
display: table;
|
||||
height: 40px;
|
||||
margin: 15px 0;
|
||||
|
||||
.van-steps__message-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 14px;
|
||||
color: $c-black;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: $c-gray-dark;
|
||||
max-height: 18px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
}
|
||||
|
||||
@b step {
|
||||
&--vertical {
|
||||
padding: 0 0 0 35px;
|
||||
}
|
||||
|
||||
&--4 {
|
||||
.van-step {
|
||||
width: 33.2%;
|
||||
}
|
||||
}
|
||||
|
||||
&--3 {
|
||||
.van-step {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__message {
|
||||
display: table;
|
||||
height: 40px;
|
||||
margin: 15px 0;
|
||||
|
||||
.van-steps__message-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: $c-black;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: $c-gray-dark;
|
||||
|
||||
@m horizontal {
|
||||
float: left;
|
||||
max-height: 18px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.van-step {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: $c-gray-dark;
|
||||
|
||||
&--horizontal {
|
||||
float: left;
|
||||
|
||||
&:first-child {
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
left: auto;
|
||||
right: -9px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
width: 0;
|
||||
}
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.van-step__title {
|
||||
font-size: 12px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
left: auto;
|
||||
right: -9px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
|
||||
&.van-step--finish {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle,
|
||||
.van-step__line {
|
||||
background-color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.van-step--process {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle-container {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 12px;
|
||||
color: $c-green;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
.van-step__circle-container {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@m vertical {
|
||||
float: none;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 10px 10px 10px 0;
|
||||
.van-step__title {
|
||||
font-size: 12px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
|
||||
&.van-step--finish {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle,
|
||||
.van-step__line {
|
||||
background-color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.van-step--process {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle-container {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-step__circle-container > i {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
top: 12px;
|
||||
left: -20px;
|
||||
.van-icon {
|
||||
font-size: 12px;
|
||||
color: $c-green;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
top: 16px;
|
||||
left: -17px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $c-gray-light;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
float: none;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-step__circle-container > i {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
top: 12px;
|
||||
left: -20px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
top: 16px;
|
||||
left: -17px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user