依赖更新 && 构建调整 (#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
@@ -2,74 +2,72 @@
|
||||
@import './mixins/border_retina.css';
|
||||
@import './popup.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b actionsheet {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
background-color: #e0e0e0;
|
||||
.van-actionsheet {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
background-color: #e0e0e0;
|
||||
|
||||
@m withtitle {
|
||||
background-color: $c-white;
|
||||
&--withtitle {
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
&__item {
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
background-color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
&__subname {
|
||||
color: $c-gray-darker;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
line-height: 50px;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
&__header {
|
||||
line-height: 44px;
|
||||
color: $c-black;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
@e item {
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
background-color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
@e subname {
|
||||
color: $c-gray-darker;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@e loading {
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@e button {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
line-height: 50px;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
@e header {
|
||||
line-height: 44px;
|
||||
color: $c-black;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
.van-icon-close {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
}
|
||||
.van-icon-close {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,77 +1,77 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b badge-group {
|
||||
.van-badge {
|
||||
|
||||
display: block;
|
||||
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;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
|
||||
&-group {
|
||||
position: relative;
|
||||
width: 85px;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
@b badge {
|
||||
display: block;
|
||||
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;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
|
||||
@m select {
|
||||
font-weight: bold;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
.van-badge__active {
|
||||
display: block;
|
||||
}
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
}
|
||||
&--select {
|
||||
font-weight: bold;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
.van-badge__active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@e active {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: #FF4444;
|
||||
}
|
||||
|
||||
@e info {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
transform:scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #FF4444;
|
||||
color: $c-white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&__active {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: #FF4444;
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
transform:scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #FF4444;
|
||||
color: $c-white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,30 @@
|
||||
|
||||
.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right {
|
||||
-webkit-transition: -webkit-transform 150ms ease-in-out;
|
||||
transition: -webkit-transform 150ms ease-in-out;
|
||||
transition: transform 150ms ease-in-out;
|
||||
transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.van-cell-swipe{
|
||||
.van-cell {
|
||||
&-swipe {
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.van-cell-right{
|
||||
|
||||
.van-cell-wrapper,
|
||||
.van-cell-left,
|
||||
.van-cell-right {
|
||||
transition: transform 150ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
.van-cell-left {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate3d(-100%,0,0);
|
||||
}
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,30 @@
|
||||
@import './mixins/border_retina.css';
|
||||
@import './icon.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b cell-group {
|
||||
.van-cell {
|
||||
width: 100%;
|
||||
display: table;
|
||||
position: relative;
|
||||
padding: 10px 15px 10px 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 24px;
|
||||
background-color: $c-white;
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-group {
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
@@ -13,79 +35,55 @@
|
||||
}
|
||||
}
|
||||
|
||||
@b cell {
|
||||
width: 100%;
|
||||
display: table;
|
||||
position: relative;
|
||||
padding: 10px 15px 10px 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 24px;
|
||||
background-color: $c-white;
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
&__title {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: $c-gray-darker;
|
||||
}
|
||||
|
||||
&__value {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
&--link {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
@e label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: $c-gray-darker;
|
||||
}
|
||||
|
||||
@e value {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
|
||||
@m link {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@m alone {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@m required {
|
||||
overflow: visible;
|
||||
|
||||
&::before {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
font-size: 14px;
|
||||
color: #f44;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@e right-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
color: $c-gray-dark;
|
||||
font-size: 12px;
|
||||
&--alone {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&--required {
|
||||
overflow: visible;
|
||||
|
||||
&::before {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
font-size: 14px;
|
||||
color: #f44;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
color: $c-gray-dark;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,51 +1,49 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b checkbox {
|
||||
overflow: hidden;
|
||||
.van-checkbox {
|
||||
overflow: hidden;
|
||||
|
||||
@m disabled {
|
||||
.van-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
.van-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.van-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
@e control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
margin-left: 37px;
|
||||
display: block;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.van-icon-check {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.van-icon-check {
|
||||
color: $c-gray-dark;
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&__control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
line-height: 22px;
|
||||
margin-left: 37px;
|
||||
display: block;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,51 +2,8 @@
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.van-col-1 { width: 4.166666666666667%; }
|
||||
.van-col-2 { width: 8.333333333333334%; }
|
||||
.van-col-3 { width: 12.5%; }
|
||||
.van-col-4 { width: 16.666666666666668%; }
|
||||
.van-col-5 { width: 20.833333333333336%; }
|
||||
.van-col-6 { width: 25%; }
|
||||
.van-col-7 { width: 29.166666666666668%; }
|
||||
.van-col-8 { width: 33.333333333333336%; }
|
||||
.van-col-9 { width: 37.5%; }
|
||||
.van-col-10 { width: 41.66666666666667%; }
|
||||
.van-col-11 { width: 45.833333333333336%; }
|
||||
.van-col-12 { width: 50%; }
|
||||
.van-col-13 { width: 54.16666666666667%; }
|
||||
.van-col-14 { width: 58.333333333333336%; }
|
||||
.van-col-15 { width: 62.50000000000001%; }
|
||||
.van-col-16 { width: 66.66666666666667%; }
|
||||
.van-col-17 { width: 70.83333333333334%; }
|
||||
.van-col-18 { width: 75%; }
|
||||
.van-col-19 { width: 79.16666666666667%; }
|
||||
.van-col-20 { width: 83.33333333333334%; }
|
||||
.van-col-21 { width: 87.5%; }
|
||||
.van-col-22 { width: 91.66666666666667%; }
|
||||
.van-col-23 { width: 95.83333333333334%; }
|
||||
.van-col-24 { width: 100%; }
|
||||
.van-col-offset-1 { margin-left: 4.166666666666667%; }
|
||||
.van-col-offset-2 { margin-left: 8.333333333333334%; }
|
||||
.van-col-offset-3 { margin-left: 12.5%; }
|
||||
.van-col-offset-4 { margin-left: 16.666666666666668%; }
|
||||
.van-col-offset-5 { margin-left: 20.833333333333336%; }
|
||||
.van-col-offset-6 { margin-left: 25%; }
|
||||
.van-col-offset-7 { margin-left: 29.166666666666668%; }
|
||||
.van-col-offset-8 { margin-left: 33.333333333333336%; }
|
||||
.van-col-offset-9 { margin-left: 37.5%; }
|
||||
.van-col-offset-10 { margin-left: 41.66666666666667%; }
|
||||
.van-col-offset-11 { margin-left: 45.833333333333336%; }
|
||||
.van-col-offset-12 { margin-left: 50%; }
|
||||
.van-col-offset-13 { margin-left: 54.16666666666667%; }
|
||||
.van-col-offset-14 { margin-left: 58.333333333333336%; }
|
||||
.van-col-offset-15 { margin-left: 62.50000000000001%; }
|
||||
.van-col-offset-16 { margin-left: 66.66666666666667%; }
|
||||
.van-col-offset-17 { margin-left: 70.83333333333334%; }
|
||||
.van-col-offset-18 { margin-left: 75%; }
|
||||
.van-col-offset-19 { margin-left: 79.16666666666667%; }
|
||||
.van-col-offset-20 { margin-left: 83.33333333333334%; }
|
||||
.van-col-offset-21 { margin-left: 87.5%; }
|
||||
.van-col-offset-22 { margin-left: 91.66666666666667%; }
|
||||
.van-col-offset-23 { margin-left: 95.83333333333334%; }
|
||||
.van-col-offset-24 { margin-left: 100%; }
|
||||
|
||||
@for $i from 1 to 24 {
|
||||
.van-col-$i { width: calc($i * 100% / 24); }
|
||||
.van-col-offset-$i { margin-left: calc($i * 100% / 24); }
|
||||
}
|
||||
|
||||
@@ -1,94 +1,92 @@
|
||||
@import './mixins/border_retina.css';
|
||||
@import './popup.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b dialog-wrapper {
|
||||
position: absolute;
|
||||
.van-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background-color: #fff;
|
||||
width: 85%;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
&__header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@b dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background-color: #fff;
|
||||
width: 85%;
|
||||
border-radius: 4px;
|
||||
&__content {
|
||||
padding: 15px 20px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
&--notitle {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
@e header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@e content {
|
||||
padding: 15px 20px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
&.is-twobtn {
|
||||
.van-dialog__btn {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
@m notitle {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@e footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
@when twobtn {
|
||||
.van-dialog__btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.van-dialog__cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
.van-dialog__cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e btn {
|
||||
font-size: 16px;
|
||||
line-height: 52px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
&__btn {
|
||||
font-size: 16px;
|
||||
line-height: 52px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e cancel {
|
||||
color: #333;
|
||||
}
|
||||
&__cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
&__confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,6 +94,7 @@
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.7);
|
||||
}
|
||||
|
||||
.dialog-bounce-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
||||
|
||||
@@ -3,96 +3,95 @@
|
||||
@import './cell.css';
|
||||
@import './icon.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b field {
|
||||
.van-field {
|
||||
|
||||
width: 100%;
|
||||
|
||||
.van-cell__title,
|
||||
.van-cell__value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
@m hastextarea {
|
||||
.van-field__control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@m nolabel {
|
||||
.van-cell__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
.van-field__control {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@m error {
|
||||
.van-field__control {
|
||||
color: $c-red;
|
||||
}
|
||||
}
|
||||
|
||||
@m border {
|
||||
.van-field__control {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 2px;
|
||||
@mixin border-retina (top, right, bottom, left);
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@m autosize {
|
||||
.van-field__control {
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-cell__title,
|
||||
.van-cell__value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
@e control {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@e icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
padding: 10px;
|
||||
&--hastextarea {
|
||||
.van-field__control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&--nolabel {
|
||||
.van-cell__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-field__control {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
.van-field__control {
|
||||
color: $c-red;
|
||||
}
|
||||
}
|
||||
|
||||
&--border {
|
||||
.van-field__control {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 2px;
|
||||
@mixin border-retina (top, right, bottom, left);
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&--autosize {
|
||||
.van-field__control {
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&__control {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,36 +1,34 @@
|
||||
@import './swipe.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b image-preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
.van-image-preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@e image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@m center {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.van-image-preview__image--big {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
.van-swipe {
|
||||
height: 100%;
|
||||
&--center {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.van-image-preview__image--big {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
.van-swipe {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,47 +1,45 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b panel {
|
||||
background: #fff;
|
||||
.van-panel {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
@e header {
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e status {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,75 +1,73 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b picker {
|
||||
.van-picker {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
&__toolbar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
|
||||
@e toolbar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
&__cancel {
|
||||
color: #3388FF;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&__confirm {
|
||||
color: #3388FF;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&__title {
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__columns {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&--1 {
|
||||
.van-picker-column {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@e cancel {
|
||||
color: #3388FF;
|
||||
float: left;
|
||||
&--2 {
|
||||
.van-picker-column {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@e confirm {
|
||||
color: #3388FF;
|
||||
float: right;
|
||||
&--3 {
|
||||
.van-picker-column {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
&--4 {
|
||||
.van-picker-column {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@e columns {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@m 1 {
|
||||
.van-picker-column {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 2 {
|
||||
.van-picker-column {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 3 {
|
||||
.van-picker-column {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 4 {
|
||||
.van-picker-column {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 5 {
|
||||
.van-picker-column {
|
||||
width: 20%;
|
||||
}
|
||||
&--5 {
|
||||
.van-picker-column {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -92,7 +90,6 @@
|
||||
width: 100%;
|
||||
background-color: #eaeaea;
|
||||
display: block;
|
||||
van-index: 15;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
@@ -110,7 +107,7 @@
|
||||
top: auto;
|
||||
}
|
||||
|
||||
@b picker-column {
|
||||
&-column {
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -118,7 +115,7 @@
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
@e item {
|
||||
&__item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 10px;
|
||||
@@ -134,7 +131,7 @@
|
||||
transition-duration: .3s;
|
||||
backface-visibility: hidden;
|
||||
|
||||
@m selected {
|
||||
&--selected {
|
||||
color: #000;
|
||||
transform: translate3d(0, 0, 0) rotateX(0);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@component-namespace van {
|
||||
@b modal {
|
||||
.van {
|
||||
&-modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -9,7 +9,7 @@
|
||||
transition: all .5s ease-out;
|
||||
}
|
||||
|
||||
@b popup {
|
||||
&-popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
@@ -18,7 +18,7 @@
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@m top {
|
||||
&--top {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: auto;
|
||||
@@ -27,7 +27,7 @@
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@m right {
|
||||
&--right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
@@ -35,7 +35,7 @@
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
@m bottom {
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
@@ -44,7 +44,7 @@
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@m left {
|
||||
&--left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
|
||||
@@ -1,33 +1,32 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b progress {
|
||||
@e bar {
|
||||
height: 4px;
|
||||
border-radius: 4.5px;
|
||||
width: 100%;
|
||||
background: $c-gray-light;
|
||||
position: relative;
|
||||
.van-progress {
|
||||
&__bar {
|
||||
height: 4px;
|
||||
border-radius: 4.5px;
|
||||
width: 100%;
|
||||
background: $c-gray-light;
|
||||
position: relative;
|
||||
|
||||
@e finished-portion {
|
||||
border-radius: 4.5px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
@e pivot {
|
||||
padding: 2px 0;
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 28px;
|
||||
background-color: $c-gray-light;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
&__finished-portion {
|
||||
border-radius: 4.5px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__pivot {
|
||||
padding: 2px 0;
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 28px;
|
||||
background-color: $c-gray-light;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,87 +1,85 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b quantity {
|
||||
font-size: 0;
|
||||
.van-quantity {
|
||||
font-size: 0;
|
||||
|
||||
@m disabled {
|
||||
.van-quantity__input,
|
||||
.van-quantity__minus,
|
||||
.van-quantity__plus {
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
@e stepper {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
background-color: $c-white;
|
||||
border: 1px solid $c-gray-dark;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
width: 9px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 1px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #6c6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
@e minus {
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
@e plus {
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
@m disabled {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
width: 33px;
|
||||
height: 26px;
|
||||
padding: 1px;
|
||||
border: 1px solid $c-gray-dark;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
-webkit-appearance: none;
|
||||
&--disabled {
|
||||
.van-quantity__input,
|
||||
.van-quantity__minus,
|
||||
.van-quantity__plus {
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
&__stepper {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
background-color: $c-white;
|
||||
border: 1px solid $c-gray-dark;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
width: 9px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 1px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #6c6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
&__minus {
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
&__plus {
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
&--disabled {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 33px;
|
||||
height: 26px;
|
||||
padding: 1px;
|
||||
border: 1px solid $c-gray-dark;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,48 @@
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace van {
|
||||
@b radio {
|
||||
overflow: hidden;
|
||||
.van-radio {
|
||||
overflow: hidden;
|
||||
|
||||
@m disabled {
|
||||
.van-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
&__input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
float: left;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
float: left;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
&__control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
&__label {
|
||||
line-height: 22px;
|
||||
display: block;
|
||||
margin-left: 37px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
display: block;
|
||||
margin-left: 37px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.van-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.van-icon-check {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.van-icon-check {
|
||||
color: $c-gray-dark;
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,73 +1,71 @@
|
||||
@import './common/var.css';
|
||||
@import './icon.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b search {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 15px;
|
||||
background-color: #F2F2F2;
|
||||
.van-search {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 15px;
|
||||
background-color: #F2F2F2;
|
||||
|
||||
@m focus {
|
||||
padding-right: 50px;
|
||||
}
|
||||
&--focus {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
@m showcase {
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
&--showcase {
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.van-search__input-wrap {
|
||||
border-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@e input-wrap {
|
||||
position: relative;
|
||||
padding: 8px 24px 8px 35px;
|
||||
border: 1px solid $c-gray-light;
|
||||
border-radius: 4px;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
@e input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
color: $c-gray-dark;
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@e cancel {
|
||||
position: absolute;
|
||||
line-height: 34px;
|
||||
padding: 4px 0;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.van-icon-search {
|
||||
color: $c-gray-darker;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.van-icon-clear {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #888;
|
||||
.van-search__input-wrap {
|
||||
border-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-wrap {
|
||||
position: relative;
|
||||
padding: 8px 24px 8px 35px;
|
||||
border: 1px solid $c-gray-light;
|
||||
border-radius: 4px;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
color: $c-gray-dark;
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
position: absolute;
|
||||
line-height: 34px;
|
||||
padding: 4px 0;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.van-icon-search {
|
||||
color: $c-gray-darker;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.van-icon-clear {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
+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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,44 +1,42 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b swipe {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.van-swipe {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@e indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&__indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@e indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #999;
|
||||
opacity: .8;
|
||||
margin: 0 3px;
|
||||
z-index: 1;
|
||||
&__indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #999;
|
||||
opacity: .8;
|
||||
margin: 0 3px;
|
||||
z-index: 1;
|
||||
|
||||
@m active {
|
||||
background: $c-orange;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@e items {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
&--active {
|
||||
background: $c-orange;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@b swipe-item {
|
||||
&__items {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,61 +1,59 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b switch {
|
||||
height: 31px;
|
||||
width: 51px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
&::after{
|
||||
.van-switch {
|
||||
height: 31px;
|
||||
width: 51px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
&::after{
|
||||
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
||||
border-width: 3px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
&__node {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 13.5px;
|
||||
background-color: #fff;
|
||||
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);
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
transition: transform .3s;
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
||||
border-width: 3px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
@e node {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 13.5px;
|
||||
background-color: #fff;
|
||||
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);
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
transition: transform .3s;
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
||||
border-radius: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
@e loading {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@m on {
|
||||
background-color: #44db5e;
|
||||
&::after { border-color: #44db5e; }
|
||||
.van-switch__node {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@m off {
|
||||
background-color: #fff;
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
opacity: .4;
|
||||
border-radius: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&--on {
|
||||
background-color: #44db5e;
|
||||
&::after { border-color: #44db5e; }
|
||||
.van-switch__node {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
&--off {
|
||||
background-color: #fff;
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,104 +1,102 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
.van-tabs {
|
||||
position: relative;
|
||||
|
||||
@e nav-wrap {
|
||||
overflow: hidden;
|
||||
&__nav-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__swipe {
|
||||
user-select: none;
|
||||
transition: transform ease .3s;
|
||||
|
||||
.van-tab {
|
||||
flex: 0 0 22%;
|
||||
}
|
||||
|
||||
@e swipe {
|
||||
user-select: none;
|
||||
transition: transform ease .3s;
|
||||
|
||||
.van-tab {
|
||||
flex: 0 0 22%;
|
||||
}
|
||||
|
||||
.van-tabs__nav {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@e nav {
|
||||
overflow: hidden;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@m line {
|
||||
height: 44px;
|
||||
|
||||
.van-tab {
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@m card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
|
||||
.van-tab {
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.van-tab--active {
|
||||
background-color: #666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
.van-tabs__nav {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@b tab {
|
||||
&__nav {
|
||||
overflow: hidden;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
display: flex;
|
||||
|
||||
@m active {
|
||||
color: #FF4444;
|
||||
&--line {
|
||||
height: 44px;
|
||||
|
||||
.van-tab {
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e pane {
|
||||
display: none;
|
||||
&--card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
|
||||
@m select {
|
||||
display: block;
|
||||
.van-tab {
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.van-tab--active {
|
||||
background-color: #666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tab {
|
||||
position: relative;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
&--active {
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
&__pane {
|
||||
display: none;
|
||||
|
||||
&--select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,69 +1,67 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
background: $c-gray;
|
||||
color: $c-white;
|
||||
.van-tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
background: $c-gray;
|
||||
color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), $c-gray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
background: $c-white;
|
||||
color: $c-gray;
|
||||
}
|
||||
|
||||
&.is-mark {
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), $c-gray;
|
||||
border-radius: 4px;
|
||||
border-radius: 0 16px 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: $c-green;
|
||||
|
||||
&::after {
|
||||
border-color: $c-green;
|
||||
}
|
||||
|
||||
@m success {
|
||||
background: $c-green;
|
||||
&.is-plain {
|
||||
color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $c-green;
|
||||
}
|
||||
&--danger {
|
||||
background: $button-danger-background-color;
|
||||
|
||||
@when plain {
|
||||
color: $c-green;
|
||||
}
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
|
||||
@m danger {
|
||||
background: $button-danger-background-color;
|
||||
&.is-plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
&--primary {
|
||||
background: $c-blue;
|
||||
|
||||
@when plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
&::after {
|
||||
border-color: $c-blue;
|
||||
}
|
||||
|
||||
@m primary {
|
||||
background: $c-blue;
|
||||
|
||||
&::after {
|
||||
border-color: $c-blue;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $c-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@when plain {
|
||||
background: $c-white;
|
||||
color: $c-gray;
|
||||
}
|
||||
|
||||
@when mark {
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
&::after {
|
||||
border-radius: 0 16px 16px 0;
|
||||
}
|
||||
&.is-plain {
|
||||
color: $c-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,53 +1,51 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b toast {
|
||||
.van-toast {
|
||||
position: fixed;
|
||||
z-index: 3001;
|
||||
border-radius: 5px;
|
||||
background-color: #272727;
|
||||
opacity: .7;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 12px;
|
||||
color: $c-white;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
|
||||
&__overlay {
|
||||
position: fixed;
|
||||
z-index: 3001;
|
||||
border-radius: 5px;
|
||||
background-color: #272727;
|
||||
opacity: .7;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 12px;
|
||||
color: $c-white;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
width: 100vh;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
@e overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
width: 100vh;
|
||||
z-index: 3000;
|
||||
&--loading {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
&--text, html {
|
||||
padding: 12px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
&--default {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.van-toast__icon {
|
||||
padding-top: 20px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@m loading {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
@m text, html {
|
||||
padding: 12px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
@m default {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.van-toast__icon {
|
||||
padding-top: 20px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.van-toast__text {
|
||||
padding: 15px 0 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.van-toast__text {
|
||||
padding: 15px 0 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
@component-namespace van {
|
||||
@b uploader {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.van-uploader {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@e input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
&__input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
input[type="file" i]::-webkit-file-upload-button {
|
||||
cursor:pointer;
|
||||
}
|
||||
input[type="file" i]::-webkit-file-upload-button {
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user