alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[build] add stylelint-config-rational-order plugin

Browse Source
This commit is contained in:
陈嘉涵
2019-05-09 19:00:53 +08:00
parent 21589c9b9f
commit ba4f02b9b4
64 changed files with 571 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/action-sheet/index.less
+6 -6
View File
@@ -1,14 +1,14 @@
@import '../style/var';
.van-action-sheet {
color: @action-sheet-item-text-color;
max-height: @action-sheet-max-height;
color: @action-sheet-item-text-color;
&__item,
&__cancel {
text-align: center;
font-size: @action-sheet-item-font-size;
line-height: @action-sheet-item-height;
text-align: center;
background-color: @action-sheet-item-background;
&:active {
@@ -29,9 +29,9 @@
}
&__subname {
margin-left: 5px;
color: @action-sheet-subname-color;
font-size: @action-sheet-subname-font-size;
margin-left: 5px;
}
&__loading {
@@ -39,10 +39,10 @@
}
&__cancel::before {
content: ' ';
display: block;
height: 10px;
background-color: @background-color;
content: ' ';
}
&__header {
@@ -52,13 +52,13 @@
}
&__close {
position: absolute;
top: 0;
right: 0;
padding: 0 15px;
position: absolute;
line-height: inherit;
color: @action-sheet-close-icon-color;
font-size: @action-sheet-close-icon-size;
line-height: inherit;
}
&--safe-area-inset-bottom {
packages/address-list/index.less
+12 -12
View File
@@ -1,20 +1,20 @@
@import '../style/var';
.van-address-list {
box-sizing: border-box;
height: 100%;
padding-bottom: 100px;
box-sizing: border-box;
&__add {
position: fixed;
left: 0;
bottom: 0;
left: 0;
z-index: 9999;
}
&__disabled-text {
color: @gray-dark;
padding: 0 15px;
color: @gray-dark;
font-size: 12px;
line-height: 30px;
}
@@ -24,23 +24,23 @@
padding: 15px;
&__value {
color: @text-color;
padding-right: 34px;
position: relative;
padding-right: 34px;
color: @text-color;
}
.van-radio__label {
box-sizing: border-box;
width: 100%;
margin-left: 0;
padding-left: 27px;
box-sizing: border-box;
}
.van-radio__icon {
position: absolute;
top: 50%;
left: 0;
height: 16px;
position: absolute;
line-height: 16px;
transform: translate(0, -50%);
@@ -52,21 +52,21 @@
}
.van-radio__icon--checked .van-icon {
border-color: @red;
background-color: @red;
border-color: @red;
}
&__name {
font-size: 14px;
font-weight: 500;
line-height: 20px;
margin-bottom: 5px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
&__address {
color: @gray-darker;
font-size: 12px;
line-height: 16px;
color: @gray-darker;
}
&--unswitchable {
packages/button/index.less
+16 -16
View File
@@ -1,31 +1,31 @@
@import '../style/var';
.van-button {
display: inline-block;
position: relative;
padding: 0;
height: @button-default-height;
line-height: @button-default-line-height;
font-size: @button-default-font-size;
border-radius: @button-border-radius;
text-align: center;
display: inline-block;
box-sizing: border-box;
height: @button-default-height;
padding: 0;
font-size: @button-default-font-size;
line-height: @button-default-line-height;
text-align: center;
border-radius: @button-border-radius;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
&::before {
content: " ";
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
width: 100%;
height: 100%;
background-color: @black;
border: inherit;
border-color: @black;
background-color: @black;
border-radius: inherit; /* inherit parent's border radius */
transform: translate(-50%, -50%);
opacity: 0;
content: ' ';
}
&:active::before {
@@ -101,9 +101,9 @@
}
&--small {
padding: 0 8px;
height: @button-small-height;
min-width: @button-small-min-width;
height: @button-small-height;
padding: 0 8px;
font-size: @button-small-font-size;
line-height: @button-small-line-height;
}
@@ -116,8 +116,8 @@
&--mini {
display: inline-block;
height: @button-mini-height;
min-width: @button-mini-min-width;
height: @button-mini-height;
font-size: @button-mini-font-size;
line-height: @button-mini-line-height;
@@ -127,8 +127,8 @@
}
&--block {
width: 100%;
display: block;
width: 100%;
}
&--disabled {
@@ -144,8 +144,8 @@
}
&__loading-text {
margin-left: 5px;
display: inline-block;
margin-left: 5px;
vertical-align: middle;
}
@@ -160,7 +160,7 @@
&.van-button--round::after {
border-radius: @button-round-border-radius;
}
&.van-button--square::after {
border-radius: 0;
}
packages/card/index.less
+12 -12
View File
@@ -3,10 +3,10 @@
.van-card {
position: relative;
color: @card-text-color;
padding: @card-padding;
font-size: @card-font-size;
box-sizing: border-box;
padding: @card-padding;
color: @card-text-color;
font-size: @card-font-size;
background-color: @card-background-color;
&:not(:first-child) {
@@ -18,19 +18,19 @@
}
&__thumb {
display: flex;
position: relative;
width: @card-thumb-size;
height: @card-thumb-size;
margin-right: 10px;
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: @card-thumb-size;
height: @card-thumb-size;
margin-right: 10px;
img {
border: none;
max-width: 100%;
max-height: 100%;
border: none;
}
}
@@ -38,9 +38,9 @@
position: relative;
display: flex;
flex: 1;
height: @card-thumb-size;
flex-direction: column;
min-width: 0; /* hack for flex box ellipsis */
height: @card-thumb-size;
&--centered {
justify-content: center;
@@ -53,16 +53,16 @@
}
&__title {
line-height: @card-title-line-height;
max-height: 32px;
font-weight: 500;
line-height: @card-title-line-height;
.multi-ellipsis(2);
}
&__desc {
color: @card-desc-color;
max-height: @card-desc-line-height;
color: @card-desc-color;
line-height: @card-desc-line-height;
}
@@ -95,8 +95,8 @@
}
&__footer {
text-align: right;
flex: none;
text-align: right;
.van-button {
margin-left: 5px;
packages/cell-group/index.less
+1 -1
View File
@@ -4,8 +4,8 @@
background-color: @cell-group-background-color;
&__title {
color: @cell-group-title-color;
padding: @cell-group-title-padding;
color: @cell-group-title-color;
font-size: @cell-group-title-font-size;
line-height: @cell-group-title-line-height;
}
packages/cell/index.less
+9 -9
View File
@@ -4,14 +4,14 @@
.van-cell {
position: relative;
display: flex;
width: 100%;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: @cell-vertical-padding @cell-horizontal-padding;
overflow: hidden;
color: @cell-text-color;
font-size: @cell-font-size;
line-height: @cell-line-height;
background-color: @cell-background-color;
padding: @cell-vertical-padding @cell-horizontal-padding;
&:not(:last-child)::after {
.hairline-bottom(@cell-border-color, 15px);
@@ -22,9 +22,9 @@
}
&__label {
margin-top: @cell-label-margin-top;
color: @cell-label-color;
font-size: @cell-label-font-size;
margin-top: @cell-label-margin-top;
line-height: @cell-label-line-height;
}
@@ -34,10 +34,10 @@
}
&__value {
color: @cell-value-color;
overflow: hidden;
text-align: right;
position: relative;
overflow: hidden;
color: @cell-value-color;
text-align: right;
vertical-align: middle;
&--alone {
@@ -73,11 +73,11 @@
overflow: visible;
&::before {
content: '*';
position: absolute;
left: 7px;
font-size: @cell-font-size;
color: @cell-required-color;
font-size: @cell-font-size;
content: '*';
}
}
packages/checkbox/index.less
+7 -7
View File
@@ -12,18 +12,18 @@
&__icon {
height: 1em;
line-height: 1em;
font-size: @checkbox-size;
line-height: 1em;
.van-icon {
display: block;
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
font-size: .8em;
color: transparent;
text-align: center;
font-size: .8em;
line-height: inherit;
box-sizing: border-box;
text-align: center;
border: 1px solid @checkbox-border-color;
transition: @checkbox-transition-duration;
}
@@ -37,15 +37,15 @@
&--checked {
.van-icon {
color: @white;
border-color: @checkbox-checked-icon-color;
background-color: @checkbox-checked-icon-color;
border-color: @checkbox-checked-icon-color;
}
}
&--disabled {
.van-icon {
border-color: @checkbox-disabled-icon-color;
background-color: @checkbox-disabled-background-color;
border-color: @checkbox-disabled-icon-color;
}
}
@@ -57,9 +57,9 @@
}
&__label {
margin-left: @checkbox-label-margin;
color: @checkbox-label-color;
line-height: @checkbox-size;
margin-left: @checkbox-label-margin;
&--left {
float: left;
packages/circle/index.less
+7 -7
View File
@@ -2,34 +2,34 @@
.van-circle {
position: relative;
text-align: center;
display: inline-block;
text-align: center;
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
&__layer {
fill: none;
stroke-linecap: round;
stroke-dasharray: 3140;
stroke-dashoffset: 3140;
transform: rotate(90deg);
// should not use transform-origin: center
// that will cause incorrect style in android devices
transform-origin: 530px 530px;
fill: none;
stroke-linecap: round;
stroke-dasharray: 3140;
stroke-dashoffset: 3140;
}
&__text {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: @circle-text-color;
position: absolute;
transform: translateY(-50%);
}
}
packages/collapse-item/index.less
+2 -2
View File
@@ -35,13 +35,13 @@
&__wrapper {
overflow: hidden;
will-change: height;
transition: height @collapse-item-transition-duration ease-in-out;
will-change: height;
}
&__content {
color: @collapse-item-content-text-color;
padding: @collapse-item-content-padding;
color: @collapse-item-content-text-color;
font-size: @collapse-item-content-font-size;
line-height: @collapse-item-content-line-height;
background-color: @collapse-item-content-background-color;
packages/contact-card/index.less
+4 -4
View File
@@ -4,9 +4,9 @@
padding: 15px;
&__value {
display: inline-block;
margin-left: 5px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
@@ -22,12 +22,11 @@
}
&::before {
content: '';
left: 0;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
position: absolute;
background: repeating-linear-gradient(
-45deg,
#ff6c6c 0,
@@ -40,5 +39,6 @@
transparent 50%
);
background-size: 80px;
content: '';
}
}
packages/contact-list/index.less
+8 -8
View File
@@ -1,18 +1,18 @@
@import '../style/var';
.van-contact-list {
box-sizing: border-box;
height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
&__item {
padding: 15px;
}
&__item-value {
color: @text-color;
padding-right: 34px;
position: relative;
padding-right: 34px;
color: @text-color;
}
.van-radio__label {
@@ -20,10 +20,10 @@
}
.van-radio__icon {
position: absolute;
top: 50%;
left: 0;
height: 16px;
position: absolute;
line-height: 16px;
transform: translate(0, -50%);
@@ -35,20 +35,20 @@
}
.van-radio__icon--checked .van-icon {
border-color: @red;
background-color: @red;
border-color: @red;
}
&__group {
box-sizing: border-box;
height: 100%;
overflow-y: scroll;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
&__name {
font-size: 14px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
@@ -62,8 +62,8 @@
&__add {
position: fixed;
left: 0;
bottom: 0;
left: 0;
z-index: 9999;
}
}
packages/coupon-list/index.less
+6 -6
View File
@@ -1,8 +1,8 @@
@import '../style/var';
.van-coupon-list {
height: 100%;
position: relative;
height: 100%;
background-color: @background-color;
&__field {
@@ -15,16 +15,16 @@
}
&__list {
overflow-y: auto;
padding: 15px 0;
box-sizing: border-box;
padding: 15px 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
&__close {
left: 0;
bottom: 0;
position: absolute;
bottom: 0;
left: 0;
font-weight: 500;
}
@@ -33,8 +33,8 @@
text-align: center;
p {
color: @gray-dark;
margin: 15px 0;
color: @gray-dark;
font-size: 14px;
line-height: 20px;
}
packages/coupon/index.less
+8 -8
View File
@@ -2,10 +2,10 @@
@import '../style/mixins/ellipsis';
.van-coupon {
overflow: hidden;
border-radius: 4px;
margin: 0 15px 15px;
overflow: hidden;
background-color: @white;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
&:active {
@@ -14,9 +14,9 @@
&__content {
display: flex;
box-sizing: border-box;
height: 100px;
padding: 24px 0 0 15px;
box-sizing: border-box;
}
p,
@@ -33,9 +33,9 @@
}
p {
color: @gray-dark;
font-size: 12px;
line-height: 16px;
color: @gray-dark;
}
&__head {
@@ -62,8 +62,8 @@
}
&__body {
flex: 1;
position: relative;
flex: 1;
border-radius: 0 4px 4px 0;
h2 {
@@ -72,20 +72,20 @@
}
&__corner {
position: absolute;
top: 16px;
right: 15px;
position: absolute;
.van-icon {
border-color: @red;
background-color: @red;
border-color: @red;
}
}
&__description {
padding: 7px 15px;
border-top: 1px dashed @border-color;
background-color: @background-color-light;
border-top: 1px dashed @border-color;
}
&--disabled {
packages/dialog/index.less
+12 -12
View File
@@ -4,19 +4,19 @@
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
width: @dialog-width;
overflow: hidden;
font-size: @dialog-font-size;
transition: @dialog-transition;
border-radius: @dialog-border-radius;
background-color: @dialog-background-color;
border-radius: @dialog-border-radius;
transform: translate3d(-50%, -50%, 0);
backface-visibility: hidden; // avoid blurry text after scale animation
transition: @dialog-transition;
&__header {
text-align: center;
font-weight: @dialog-header-font-weight;
padding-top: @dialog-header-padding-top;
font-weight: @dialog-header-font-weight;
text-align: center;
&--isolated {
padding: @dialog-header-isolated-padding;
@@ -24,20 +24,20 @@
}
&__message {
max-height: @dialog-message-max-height;
padding: @dialog-message-padding;
overflow-y: auto;
font-size: @dialog-message-font-size;
line-height: @dialog-message-line-height;
max-height: @dialog-message-max-height;
overflow-y: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
// allow newline charactor
white-space: pre-wrap;
text-align: center;
-webkit-overflow-scrolling: touch;
&--has-title {
color: @dialog-has-title-message-text-color;
padding-top: @dialog-has-title-message-padding-top;
color: @dialog-has-title-message-text-color;
}
&--left {
@@ -74,12 +74,12 @@
}
&-bounce-enter {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.7);
opacity: 0;
}
&-bounce-leave-active {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.9);
opacity: 0;
}
}
packages/dropdown-item/index.less
+1 -1
View File
@@ -2,9 +2,9 @@
.van-dropdown-item {
position: fixed;
left: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
&__content {
packages/dropdown-menu/index.less
+7 -7
View File
@@ -3,12 +3,12 @@
.van-dropdown-menu {
display: flex;
height: 50px;
user-select: none;
background-color: @white;
user-select: none;
&__item {
flex: 1;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
@@ -18,25 +18,25 @@
}
&__title {
font-size: 15px;
position: relative;
font-size: 15px;
&::after {
position: absolute;
content: '';
top: 3px;
right: -12px;
opacity: .6;
border: 3px solid;
transform: rotate(-45deg);
border-color: transparent transparent currentColor currentColor;
transform: rotate(-45deg);
opacity: .6;
content: '';
}
&--active {
&::after {
top: 7px;
opacity: 1;
transform: rotate(135deg);
opacity: 1;
}
}
}
packages/field/index.less
+7 -7
View File
@@ -20,24 +20,24 @@
}
&__control {
border: 0;
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
width: 100%;
resize: none;
display: block;
color: @field-input-text-color;
box-sizing: border-box;
background-color: transparent;
border: 0;
resize: none;
&::placeholder {
color: @field-placeholder-text-color;
}
&:disabled {
opacity: 1;
color: @field-input-disabled-text-color;
background-color: transparent;
opacity: 1;
}
&--center {
@@ -65,9 +65,9 @@
&__clear,
&__right-icon {
margin-right: -10px;
padding: 0 10px;
line-height: inherit;
margin-right: -10px;
}
&__clear {
packages/goods-action-icon/index.less
+6 -6
View File
@@ -1,16 +1,16 @@
@import '../style/var';
.van-goods-action-icon {
color: @gray-darker;
display: flex;
height: 50px;
font-size: 10px;
flex-direction: column;
justify-content: center;
min-width: 15%;
height: 50px;
color: @gray-darker;
font-size: 10px;
line-height: 1;
text-align: center;
background-color: @white;
flex-direction: column;
justify-content: center;
&:not(:first-child)::after {
border-left-width: 1px;
@@ -22,7 +22,7 @@
&__icon {
width: 1em;
font-size: 20px;
margin: 0 auto 5px;
font-size: 20px;
}
}
packages/goods-action/index.less
+2 -2
View File
@@ -1,11 +1,11 @@
@import '../style/var';
.van-goods-action {
left: 0;
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
position: fixed;
background-color: @white;
&--safe-area-inset-bottom {
packages/icon/index.less
+3 -3
View File
@@ -7,14 +7,14 @@
height: 1em;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
left: 0;
max-width: 100%;
max-height: 100%;
position: absolute;
margin: auto;
}
}
}
packages/image-preview/index.less
+4 -4
View File
@@ -1,21 +1,21 @@
@import '../style/var';
.van-image-preview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
&__image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
left: 0;
max-width: 100%;
max-height: 100%;
position: absolute;
margin: auto;
}
&__index {
packages/index-anchor/index.less
+1 -1
View File
@@ -2,7 +2,7 @@
.van-index-anchor {
padding: 0 15px;
font-size: 14px;
font-weight: 500;
font-size: 14px;
line-height: 32px;
}
packages/index-bar/index.less
+6 -6
View File
@@ -3,20 +3,20 @@
.van-index-bar {
&__sidebar {
position: fixed;
display: flex;
top: 50%;
right: 0;
z-index: 1;
user-select: none;
text-align: center;
display: flex;
flex-direction: column;
text-align: center;
transform: translateY(-50%);
user-select: none;
}
&__index {
font-size: 10px;
font-weight: 500;
line-height: 14px;
padding: 0 3px 0 15px;
font-weight: 500;
font-size: 10px;
line-height: 14px;
}
}
packages/info/index.less
+8 -8
View File
@@ -2,20 +2,20 @@
.van-info {
position: absolute;
right: 0;
top: -@info-size / 2;
color: @info-color;
font-size: @info-font-size;
font-weight: @info-font-weight;
font-family: @info-font-family;
text-align: center;
right: 0;
box-sizing: border-box;
padding: @info-padding;
min-width: @info-size;
padding: @info-padding;
color: @info-color;
font-weight: @info-font-weight;
font-size: @info-font-size;
font-family: @info-font-family;
line-height: @info-size - @info-border-width * 2;
text-align: center;
background-color: @info-background-color;
border: @info-border-width solid @white;
border-radius: @info-size;
background-color: @info-background-color;
transform: translateX(50%);
transform-origin: 100%;
}
packages/loading/index.less
+16 -16
View File
@@ -1,44 +1,44 @@
@import '../style/var';
.van-loading {
position: relative;
z-index: 0;
font-size: 0;
line-height: 0;
position: relative;
vertical-align: middle;
&__spinner {
z-index: -1;
width: 30px;
height: 30px;
position: relative;
z-index: -1;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
animation: van-rotate 0.8s linear infinite;
width: 30px;
// compatible for 1.x, users may set width or height in root element
max-width: 100%;
height: 30px;
max-height: 100%;
vertical-align: middle;
animation: van-rotate 0.8s linear infinite;
&--spinner {
animation-timing-function: steps(12);
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
&::before {
display: block;
width: 2px;
height: 25%;
content: ' ';
display: block;
margin: 0 auto;
border-radius: 40%;
background-color: currentColor;
border-radius: 40%;
content: ' ';
}
}
}
@@ -53,30 +53,30 @@
height: 100%;
circle {
animation: van-circular 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
animation: van-circular 1.5s ease-in-out infinite;
}
}
&__text {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
color: @loading-text-color;
font-size: @loading-text-font-size;
line-height: @loading-text-line-height;
margin-left: 10px;
vertical-align: middle;
}
&--vertical {
display: flex;
align-items: center;
flex-direction: column;
align-items: center;
.van-loading__text {
margin-left: 0;
margin-top: 10px;
margin-left: 0;
}
}
}
@@ -100,8 +100,8 @@
.generate-spinner(@n, @i: 1) when (@i =< @n) {
.van-loading__spinner--spinner i:nth-of-type(@{i}) {
opacity: 1 - (0.75 / 12) * (@i - 1);
transform: rotate(@i * 30deg);
opacity: 1 - (0.75 / 12) * (@i - 1);
}
.generate-spinner(@n, (@i + 1));
}
packages/nav-bar/index.less
+8 -8
View File
@@ -2,11 +2,11 @@
.van-nav-bar {
position: relative;
user-select: none;
text-align: center;
height: @nav-bar-height;
line-height: @nav-bar-height;
text-align: center;
background-color: @nav-bar-background-color;
user-select: none;
.van-icon {
color: @nav-bar-icon-color;
@@ -24,25 +24,25 @@
}
&--fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
position: fixed;
}
&__title {
margin: 0 auto;
max-width: 60%;
margin: 0 auto;
color: @nav-bar-title-text-color;
font-size: @nav-bar-title-font-size;
font-weight: 500;
font-size: @nav-bar-title-font-size;
}
&__left,
&__right {
position: absolute;
bottom: 0;
font-size: 14px;
position: absolute;
}
&__left {
@@ -54,10 +54,10 @@
}
&__text {
color: @nav-bar-text-color;
display: inline-block;
margin: 0 -15px;
padding: 0 15px;
display: inline-block;
color: @nav-bar-text-color;
vertical-align: middle;
&:active {
packages/notice-bar/index.less
+5 -5
View File
@@ -1,20 +1,20 @@
@import '../style/var';
.van-notice-bar {
position: relative;
display: flex;
align-items: center;
height: 40px;
padding: 0 15px;
color: @orange-dark;
font-size: 14px;
line-height: 24px;
position: relative;
align-items: center;
color: @orange-dark;
background-color: @orange-light;
&__left-icon,
&__right-icon {
font-size: 16px;
min-width: 22px;
font-size: 16px;
}
&__right-icon {
@@ -22,10 +22,10 @@
}
&__wrap {
position: relative;
flex: 1;
height: 24px;
overflow: hidden;
position: relative;
}
&__content {
packages/notify/index.less
+1 -1
View File
@@ -1,7 +1,6 @@
@import '../style/var';
.van-notify {
text-align: center;
box-sizing: border-box;
padding: @notify-padding;
font-size: @notify-font-size;
@@ -9,4 +8,5 @@
// allow newline charactor
white-space: pre-wrap;
text-align: center;
}
packages/number-keyboard/index.less
+14 -14
View File
@@ -1,25 +1,25 @@
@import '../style/var';
.van-number-keyboard {
left: 0;
bottom: 0;
width: 100%;
position: fixed;
user-select: none;
bottom: 0;
left: 0;
width: 100%;
background-color: @white;
animation-timing-function: ease-out;
user-select: none;
&__title {
position: relative;
height: 30px;
color: @gray-darker;
font-size: 14px;
line-height: 30px;
text-align: center;
position: relative;
color: @gray-darker;
&-left {
left: 0;
position: absolute;
left: 0;
}
}
@@ -28,11 +28,11 @@
}
&__close {
position: absolute;
right: 0;
padding: 0 15px;
color: @blue;
font-size: 14px;
padding: 0 15px;
position: absolute;
&:active {
background-color: @active-color;
@@ -40,10 +40,10 @@
}
&__sidebar {
position: absolute;
top: 0;
right: 0;
width: 25%;
position: absolute;
height: @number-keyboard-key-height * 4;
}
@@ -60,14 +60,14 @@
}
.van-key {
display: inline-block;
width: 100% / 3;
height: @number-keyboard-key-height;
font-size: 24px;
font-style: normal;
text-align: center;
display: inline-block;
vertical-align: middle;
height: @number-keyboard-key-height;
line-height: @number-keyboard-key-height;
text-align: center;
vertical-align: middle;
&::after {
border-width: 1px 1px 0 0;
packages/pagination/index.less
+7 -7
View File
@@ -2,17 +2,17 @@
.van-pagination {
display: flex;
text-align: center;
line-height: 40px;
font-size: 14px;
line-height: 40px;
text-align: center;
&__item {
flex: 1;
color: @blue;
height: 40px;
min-width: 36px;
background-color: @white;
box-sizing: border-box;
min-width: 36px;
height: 40px;
color: @blue;
background-color: @white;
user-select: none;
&:active {
@@ -30,8 +30,8 @@
&--disabled,
&--disabled:active {
background-color: @background-color;
color: @gray-darker;
background-color: @background-color;
opacity: 0.6;
}
packages/password-input/index.less
+7 -7
View File
@@ -1,9 +1,9 @@
@import '../style/var';
.van-password-input {
position: relative;
margin: 0 15px;
user-select: none;
position: relative;
&:focus {
outline: none;
@@ -11,8 +11,8 @@
&__info,
&__error-info {
font-size: 14px;
margin-top: 15px;
font-size: 14px;
text-align: center;
}
@@ -25,9 +25,9 @@
}
&__security {
display: flex;
width: 100%;
height: 50px;
display: flex;
background-color: @white;
&::after {
@@ -35,9 +35,9 @@
}
li {
position: relative;
flex: 1;
height: 100%;
position: relative;
font-size: 20px;
line-height: 50px;
text-align: center;
@@ -49,14 +49,14 @@
i {
position: absolute;
left: 50%;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
visibility: hidden;
border-radius: 100%;
background-color: @black;
border-radius: 100%;
visibility: hidden;
}
}
}
packages/picker/index.less
+12 -12
View File
@@ -1,23 +1,23 @@
@import '../style/var';
.van-picker {
overflow: hidden;
user-select: none;
position: relative;
overflow: hidden;
background-color: @white;
user-select: none;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
&__toolbar {
display: flex;
justify-content: space-between;
height: 44px;
line-height: 44px;
justify-content: space-between;
}
&__cancel,
&__confirm {
color: @blue;
padding: 0 15px;
color: @blue;
font-size: 14px;
&:active {
@@ -27,24 +27,24 @@
&__title {
max-width: 50%;
font-size: 16px;
font-weight: 500;
font-size: 16px;
text-align: center;
}
&__columns {
display: flex;
position: relative;
display: flex;
}
&__loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, .9);
@@ -52,13 +52,13 @@
&__loading .van-loading,
&__frame {
position: absolute;
top: 50%;
left: 0;
width: 100%;
z-index: 1;
position: absolute;
pointer-events: none;
width: 100%;
transform: translateY(-50%);
pointer-events: none;
}
&-column {
@@ -72,8 +72,8 @@
color: @gray-dark;
&--selected {
font-weight: 500;
color: @text-color;
font-weight: 500;
}
&--disabled {
packages/popup/index.less
+2 -2
View File
@@ -20,9 +20,9 @@
}
&--top {
width: 100%;
top: 0;
left: 50%;
width: 100%;
transform: translate3d(-50%, 0, 0);
}
@@ -33,9 +33,9 @@
}
&--bottom {
width: 100%;
bottom: 0;
left: 50%;
width: 100%;
transform: translate3d(-50%, 0, 0);
}
packages/progress/index.less
+6 -6
View File
@@ -1,15 +1,15 @@
@import '../style/var';
.van-progress {
height: 4px;
position: relative;
border-radius: 4px;
height: 4px;
background: @gray-light;
border-radius: 4px;
&__portion {
position: absolute;
left: 0;
height: 100%;
position: absolute;
border-radius: inherit;
&--with-pivot {
@@ -19,18 +19,18 @@
}
&__pivot {
position: absolute;
top: 50%;
right: 0;
box-sizing: border-box;
min-width: 2em;
padding: 0 5px;
font-size: 10px;
position: absolute;
line-height: 1.6;
text-align: center;
border-radius: 1em;
word-break: keep-all;
box-sizing: border-box;
background-color: @gray-light;
border-radius: 1em;
transform: translate(100%, -50%);
}
}
packages/pull-refresh/index.less
+7 -7
View File
@@ -1,24 +1,24 @@
@import '../style/var';
.van-pull-refresh {
user-select: none;
overflow: hidden;
user-select: none;
&__track {
position: relative;
}
&__head {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
top: -50px;
font-size: 14px;
color: @gray-dark;
font-size: 14px;
line-height: 50px;
text-align: center;
}
&__loading {
@@ -30,8 +30,8 @@
span,
.van-loading {
vertical-align: middle;
display: inline-block;
vertical-align: middle;
}
}
}
packages/radio/index.less
+7 -7
View File
@@ -12,18 +12,18 @@
&__icon {
height: 1em;
line-height: 1em;
font-size: @radio-size;
line-height: 1em;
.van-icon {
display: block;
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
font-size: .8em;
color: transparent;
text-align: center;
font-size: .8em;
line-height: inherit;
box-sizing: border-box;
text-align: center;
border: 1px solid @radio-border-color;
transition: @radio-transition-duration;
}
@@ -37,15 +37,15 @@
&--checked {
.van-icon {
color: @white;
border-color: @radio-checked-icon-color;
background-color: @radio-checked-icon-color;
border-color: @radio-checked-icon-color;
}
}
&--disabled {
.van-icon {
border-color: @radio-disabled-icon-color;
background-color: @radio-disabled-background-color;
border-color: @radio-disabled-icon-color;
}
}
@@ -57,9 +57,9 @@
}
&__label {
margin-left: @radio-label-margin;
color: @radio-label-color;
line-height: @radio-size;
margin-left: @radio-label-margin;
&--left {
float: left;
packages/rate/index.less
+2 -2
View File
@@ -4,8 +4,8 @@
user-select: none;
&__item {
display: inline-block;
position: relative;
display: inline-block;
padding: 0 @rate-horizontal-padding;
}
@@ -16,7 +16,7 @@
position: absolute;
top: 0;
left: @rate-horizontal-padding;
width: .5em;;
width: .5em;
overflow: hidden;
}
}
packages/row/index.less
+1 -1
View File
@@ -2,9 +2,9 @@
.van-row {
&::after {
content: "";
display: table;
clear: both;
content: "";
}
&--flex {
packages/search/index.less
+6 -6
View File
@@ -2,16 +2,16 @@
.van-search {
display: flex;
padding: 10px 16px;
align-items: center;
box-sizing: border-box;
padding: 10px 16px;
&__content {
display: flex;
flex: 1;
padding-left: 10px;
background-color: @search-background-color;
border-radius: 2px;
padding-left: 10px;
&--round {
border-radius: 17px;
@@ -19,10 +19,10 @@
}
&__label {
font-size: 14px;
color: @text-color;
line-height: 34px;
padding: 0 5px;
color: @text-color;
font-size: 14px;
line-height: 34px;
}
.van-cell {
@@ -50,9 +50,9 @@
&__action {
padding: 0 10px;
color: @text-color;
font-size: 14px;
line-height: 34px;
color: @text-color;
&:active {
background-color: @active-color;
packages/sidebar-item/index.less
+4 -4
View File
@@ -2,16 +2,16 @@
.van-sidebar-item {
display: block;
overflow: hidden;
user-select: none;
word-break: break-all;
box-sizing: border-box;
color: @sidebar-text-color;
padding: @sidebar-padding;
overflow: hidden;
color: @sidebar-text-color;
font-size: @sidebar-font-size;
line-height: @sidebar-line-height;
word-break: break-all;
background-color: @sidebar-background-color;
border-left: 3px solid transparent;
user-select: none;
&__text {
position: relative;
packages/sku/index.less
+32 -32
View File
@@ -3,10 +3,10 @@
.van-sku {
&-container {
max-height: max-content; /* avoid androiod keyboard cover fields */
overflow-y: visible;
font-size: 14px;
background: @white;
overflow-y: visible;
max-height: max-content; /* avoid androiod keyboard cover fields */
}
&-body {
@@ -26,29 +26,29 @@
&__img-wrap {
position: relative;
float: left;
margin-top: -10px;
width: 80px;
height: 80px;
margin-top: -10px;
background: @background-color;
border-radius: 2px;
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
}
&__goods-info {
padding: 10px 60px 10px 10px;
min-height: 82px;
overflow: hidden;
box-sizing: border-box;
min-height: 82px;
padding: 10px 60px 10px 10px;
overflow: hidden;
}
}
@@ -66,17 +66,17 @@
}
&__goods-price {
color: @red;
margin-top: 10px;
color: @red;
vertical-align: middle;
}
&__close-icon {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: @gray-dark;
position: absolute;
font-size: 20px;
text-align: center;
}
@@ -105,28 +105,28 @@
&__item {
display: inline-block;
padding: 5px 9px;
margin: 0 10px 10px 0;
height: 28px;
box-sizing: border-box;
min-width: 52px;
line-height: 16px;
font-size: 12px;
height: 28px;
margin: 0 10px 10px 0;
padding: 5px 9px;
color: @text-color;
font-size: 12px;
line-height: 16px;
text-align: center;
border: 1px solid @gray-dark;
border-radius: 3px;
box-sizing: border-box;
&--active {
color: @white;
border-color: @red;
background: @red;
border-color: @red;
}
&--disabled {
color: @gray;
background: @active-color;
border-color: @border-color;
color: @gray;
}
}
}
@@ -134,8 +134,8 @@
/* sku stepper */
&-stepper {
&-stock {
padding: 12px 0;
margin-left: 15px;
padding: 12px 0;
}
&-container {
@@ -185,12 +185,12 @@
display: inline-block;
&__header {
color: @text-color;
padding: 0 10px;
color: @text-color;
font-size: 12px;
line-height: 24px;
border-radius: 3px;
border: 1px solid @border-color;
border-radius: 3px;
.van-icon {
top: 3px;
@@ -200,45 +200,45 @@
}
&__img {
height: 60px;
width: 60px;
float: left;
margin: 10px 10px 0 0;
position: relative;
float: left;
width: 60px;
height: 60px;
margin: 10px 10px 0 0;
border: 1px solid @border-color;
img {
position: relative;
top: 50%;
max-width: 100%;
max-height: 100%;
top: 50%;
position: relative;
transform: translateY(-50%);
}
}
&__delete {
position: absolute;
color: @red;
top: -12px;
right: -14px;
z-index: 1;
padding: 6px;
color: @red;
&::before {
border-radius: 14px;
background-color: @white;
border-radius: 14px;
}
}
&__uploading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
left: 0;
width: 20px;
height: 20px;
margin: auto;
}
}
packages/slider/index.less
+8 -8
View File
@@ -2,21 +2,21 @@
.van-slider {
position: relative;
border-radius: 999px;
background-color: @slider-inactive-background-color;
border-radius: 999px;
&__bar {
position: relative;
border-radius: inherit;
background-color: @slider-active-background-color;
border-radius: inherit;
}
&__button {
width: @slider-button-width;
height: @slider-button-height;
box-shadow: @slider-button-box-shadow;
border-radius: @slider-button-border-radius;
background-color: @slider-button-background-color;
border-radius: @slider-button-border-radius;
box-shadow: @slider-button-box-shadow;
&-wrapper {
position: absolute;
@@ -26,12 +26,12 @@
/* use pseudo element to expand touch area */
&::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
content: '';
}
}
}
@@ -41,8 +41,8 @@
}
&--vertical {
height: 100%;
display: inline-block;
height: 100%;
.van-slider__button-wrapper {
top: auto;
packages/step/index.less
+18 -18
View File
@@ -1,17 +1,17 @@
@import '../style/var';
.van-step {
flex: 1;
font-size: 14px;
position: relative;
flex: 1;
color: @gray-dark;
font-size: 14px;
&__circle {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: @gray-dark;
border-radius: 50%;
}
&--horizontal {
@@ -19,8 +19,8 @@
&:first-child {
.van-step__title {
transform: none;
margin-left: 0;
transform: none;
}
}
@@ -30,13 +30,13 @@
width: auto;
.van-step__title {
transform: none;
margin-left: 0;
transform: none;
}
.van-step__circle-container {
left: auto;
right: -9px;
left: auto;
}
}
@@ -44,27 +44,27 @@
position: absolute;
top: 30px;
left: -8px;
padding: 0 8px;
z-index: 1;
padding: 0 8px;
background-color: @white;
transform: translateY(-50%);
}
.van-step__title {
display: inline-block;
font-size: 12px;
margin-left: 3px;
font-size: 12px;
transform: translateX(-50%);
@media(max-width: 321px) {
@media (max-width: 321px) {
font-size: 11px;
}
}
.van-step__line {
position: absolute;
left: 0;
top: 30px;
left: 0;
width: 100%;
height: 1px;
background-color: @border-color;
@@ -81,11 +81,11 @@
}
&--vertical {
float: none;
display: block;
float: none;
padding: 10px 10px 10px 0;
font-size: 14px;
line-height: 18px;
padding: 10px 10px 10px 0;
&:not(:last-child)::after {
border-bottom-width: 1px;
@@ -93,24 +93,24 @@
&:first-child {
&::before {
content: '';
position: absolute;
width: 1px;
height: 20px;
background-color: @white;
top: 0;
left: -15px;
z-index: 1;
width: 1px;
height: 20px;
background-color: @white;
content: '';
}
}
.van-step__circle-container {
position: absolute;
z-index: 2;
top: 19px;
left: -15px;
line-height: 1;
z-index: 2;
font-size: 12px;
line-height: 1;
transform: translate(-50%, -50%);
}
packages/stepper/index.less
+15 -15
View File
@@ -5,15 +5,15 @@
&__minus,
&__plus {
position: relative;
box-sizing: border-box;
width: 28px;
height: 28px;
box-sizing: border-box;
background-color: @stepper-background-color;
border: 0;
margin: 1px;
position: relative;
padding: 5px;
vertical-align: middle;
background-color: @stepper-background-color;
border: 0;
&::before {
width: 9px;
@@ -27,14 +27,14 @@
&::before,
&::after {
content: '';
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: @text-color;
content: '';
}
&:active {
@@ -68,19 +68,19 @@
}
&__input {
box-sizing: content-box;
width: 30px;
height: 26px;
padding: 1px;
border: 0;
margin: 1px;
background-color: @stepper-background-color;
border-width: 1px 0;
border-radius: 0;
box-sizing: content-box;
padding: 1px;
color: @text-color;
font-size: 14px;
vertical-align: middle;
text-align: center;
vertical-align: middle;
background-color: @stepper-background-color;
border: 0;
border-width: 1px 0;
border-radius: 0;
-webkit-appearance: none;
&[disabled] {
@@ -91,7 +91,7 @@
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
-webkit-appearance: none;
}
}
packages/steps/index.less
+1 -1
View File
@@ -8,9 +8,9 @@
padding: 10px 10px 0;
.van-steps__items {
position: relative;
display: flex;
margin: 0 0 10px;
position: relative;
padding-bottom: 22px;
}
}
packages/style/mixins/clearfix.less
+1 -1
View File
@@ -1,7 +1,7 @@
.clearfix() {
&::after {
content: '';
display: table;
clear: both;
content: '';
}
}
packages/style/mixins/ellipsis.less
+2 -1
View File
@@ -1,8 +1,9 @@
.multi-ellipsis(@lines) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @lines;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
}
packages/style/mixins/hairline.less
+6 -6
View File
@@ -1,27 +1,27 @@
.hairline-common() {
content: ' ';
position: absolute;
pointer-events: none;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}
.hairline(@border-color: #ebedf0) {
.hairline-common();
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
transform: scale(0.5);
left: -50%;
border: 0 solid @border-color;
transform: scale(0.5);
}
.hairline-bottom(@border-color: #ebedf0, @left: 0) {
.hairline-common();
left: @left;
right: 0;
bottom: 0;
transform: scaleY(0.5);
left: @left;
border-bottom: 1px solid @border-color;
transform: scaleY(0.5);
}
packages/style/normalize.less
Vendored
+1 -1
View File
@@ -33,6 +33,6 @@ ul {
input,
button,
textarea {
font: inherit;
color: inherit;
font: inherit;
}
packages/style/reset.less
+4 -4
View File
@@ -83,10 +83,10 @@ audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
html {
@@ -148,14 +148,14 @@ summary {
}
body {
font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
color: @text-color;
font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
background-color: @background-color;
}
a {
background: transparent;
text-decoration: none;
background: transparent;
}
button,
@@ -166,7 +166,7 @@ input[type='email'],
input[type='search'],
select,
textarea {
font-family: inherit;
margin: 0;
font-family: inherit;
-webkit-appearance: none;
}
packages/submit-bar/index.less
+11 -11
View File
@@ -1,25 +1,25 @@
@import '../style/var';
.van-submit-bar {
left: 0;
bottom: 0;
width: 100%;
z-index: 100;
position: fixed;
user-select: none;
bottom: 0;
left: 0;
z-index: 100;
width: 100%;
background-color: @white;
user-select: none;
&__tip {
color: #f56723;
padding: 10px;
color: #f56723;
font-size: 12px;
line-height: 18px;
background-color: #fff7cc;
}
&__tip-icon {
font-size: 12px;
min-width: 18px;
font-size: 12px;
vertical-align: middle;
}
@@ -28,18 +28,18 @@
}
&__bar {
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
height: 50px;
font-size: 14px;
}
&__text {
flex: 1;
padding-right: 12px;
color: @text-color;
font-weight: 500;
text-align: right;
color: @text-color;
padding-right: 12px;
span {
display: inline-block;
packages/swipe-cell/index.less
+2 -2
View File
@@ -1,14 +1,14 @@
@import '../style/var';
.van-swipe-cell {
overflow: hidden;
position: relative;
overflow: hidden;
&__left,
&__right {
position: absolute;
top: 0;
height: 100%;
position: absolute;
}
&__left {
packages/swipe/index.less
+7 -7
View File
@@ -1,8 +1,8 @@
@import '../style/var';
.van-swipe {
overflow: hidden;
position: relative;
overflow: hidden;
user-select: none;
&__track {
@@ -10,16 +10,16 @@
}
&__indicators {
display: flex;
position: absolute;
left: 50%;
bottom: @swipe-indicator-margin;
left: 50%;
display: flex;
transform: translateX(-50%);
&--vertical {
left: @swipe-indicator-margin;
top: 50%;
bottom: auto;
left: @swipe-indicator-margin;
flex-direction: column;
transform: translateY(-50%);
@@ -30,11 +30,11 @@
}
&__indicator {
border-radius: 100%;
opacity: @swipe-indicator-inactive-opacity;
width: @swipe-indicator-size;
height: @swipe-indicator-size;
background-color: @swipe-indicator-inactive-background-color;
border-radius: 100%;
opacity: @swipe-indicator-inactive-opacity;
transition: opacity .2s;
&:not(:last-child) {
@@ -42,8 +42,8 @@
}
&--active {
opacity: @swipe-indicator-active-opacity;
background-color: @swipe-indicator-active-background-color;
opacity: @swipe-indicator-active-opacity;
}
}
}
packages/switch/index.less
+8 -8
View File
@@ -1,27 +1,27 @@
@import '../style/var';
.van-switch {
display: inline-block;
position: relative;
display: inline-block;
box-sizing: content-box;
width: @switch-width;
height: @switch-height;
background-color: @switch-background-color;
border: @switch-border;
border-radius: @switch-node-size;
box-sizing: content-box;
background-color: @switch-background-color;
transition: background-color @switch-transition-duration;
&__node {
position: absolute;
top: 0;
left: 0;
position: absolute;
border-radius: 100%;
z-index: @switch-node-z-index;
width: @switch-node-size;
height: @switch-node-size;
z-index: @switch-node-z-index;
transition: @switch-transition-duration;
box-shadow: @switch-node-box-shadow;
background-color: @switch-node-background-color;
border-radius: 100%;
box-shadow: @switch-node-box-shadow;
transition: @switch-transition-duration;
}
&__loading {
packages/tabbar-item/index.less
+8 -8
View File
@@ -1,19 +1,19 @@
@import '../style/var';
.van-tabbar-item {
flex: 1;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
color: @tabbar-item-text-color;
font-size: @tabbar-item-font-size;
line-height: @tabbar-item-line-height;
align-items: center;
flex-direction: column;
justify-content: center;
&__icon {
position: relative;
font-size: @tabbar-item-icon-size;
margin-bottom: @tabbar-item-margin-bottom;
font-size: @tabbar-item-icon-size;
.van-icon {
display: block;
@@ -22,14 +22,14 @@
&--dot {
&::after {
position: absolute;
top: 0;
right: -8px;
width: 8px;
height: 8px;
content: ' ';
position: absolute;
border-radius: 100%;
background-color: @red;
border-radius: 100%;
content: ' ';
}
}
packages/tabbar/index.less
+2 -2
View File
@@ -7,9 +7,9 @@
background-color: @tabbar-background-color;
&--fixed {
left: 0;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
}
&--safe-area-inset-bottom {
packages/tabs/index.less
+20 -20
View File
@@ -1,24 +1,24 @@
@import '../style/var';
.van-tab {
position: relative;
flex: 1;
cursor: pointer;
box-sizing: border-box;
min-width: 0; // hack for flex ellipsis
padding: 0 5px;
font-size: 14px;
position: relative;
color: @gray-darker;
font-size: 14px;
line-height: @tabs-line-height;
text-align: center;
box-sizing: border-box;
cursor: pointer;
span {
display: block;
}
&--active {
font-weight: 500;
color: @text-color;
font-weight: 500;
}
&--disabled {
@@ -30,12 +30,12 @@
position: relative;
&__wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
z-index: 99;
overflow: hidden;
position: absolute;
&--page-top {
position: fixed;
@@ -68,28 +68,28 @@
}
&__nav {
display: flex;
user-select: none;
position: relative;
display: flex;
background-color: @white;
user-select: none;
&--line {
box-sizing: content-box;
height: 100%;
padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
box-sizing: content-box;
}
&--card {
margin: 0 15px;
border-radius: 2px;
box-sizing: border-box;
border: 1px solid @red;
height: @tabs-card-height;
margin: 0 15px;
border: 1px solid @red;
border-radius: 2px;
.van-tab {
color: @red;
border-right: 1px solid @red;
line-height: @tabs-card-height - 2px;
border-right: 1px solid @red;
&:last-child {
border-right: none;
@@ -108,13 +108,13 @@
}
&__line {
z-index: 1;
left: 0;
bottom: 15px;
height: 3px;
position: absolute;
border-radius: 3px;
bottom: 15px;
left: 0;
z-index: 1;
height: 3px;
background-color: @red;
border-radius: 3px;
}
&__content {
@@ -148,8 +148,8 @@
}
.van-tab__pane {
width: 100%;
flex-shrink: 0;
box-sizing: border-box;
width: 100%;
}
}
packages/tag/index.less
+2 -2
View File
@@ -1,12 +1,12 @@
@import '../style/var';
.van-tag {
display: inline-block;
padding: @tag-padding;
color: @tag-text-color;
font-size: @tag-font-size;
padding: @tag-padding;
line-height: normal;
border-radius: @tag-border-radius;
display: inline-block;
&::after {
border-color: currentColor;
packages/toast/index.less
+12 -12
View File
@@ -5,25 +5,25 @@
top: 50%;
left: 50%;
display: flex;
text-align: center;
color: @toast-text-color;
max-width: @toast-max-width;
font-size: @toast-font-size;
line-height: @toast-line-height;
border-radius: @toast-border-radius;
word-break: break-all;
align-items: center;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: content-box;
transform: translate3d(-50%, -50%, 0);
background-color: @toast-background-color;
// hack for avoid max-width when use left & fixed
width: fit-content;
max-width: @toast-max-width;
color: @toast-text-color;
font-size: @toast-font-size;
line-height: @toast-line-height;
// allow newline charactor
white-space: pre-wrap;
text-align: center;
word-break: break-all;
background-color: @toast-background-color;
border-radius: @toast-border-radius;
transform: translate3d(-50%, -50%, 0);
// should not add pointer-events: none directly to body tag
// that will cause unexpected tap-highlight-color in mobile safari
@@ -34,14 +34,14 @@
}
&--text {
padding: @toast-text-padding;
min-width: @toast-text-min-width;
padding: @toast-text-padding;
}
&--default {
width: @toast-default-width;
padding: @toast-default-padding;
min-height: @toast-default-min-height;
padding: @toast-default-padding;
.van-toast__icon {
font-size: @toast-icon-size;
packages/tree-select/index.less
+8 -8
View File
@@ -1,16 +1,16 @@
@import '../style/var';
.van-tree-select {
user-select: none;
font-size: 14px;
position: relative;
font-size: 14px;
user-select: none;
&__nav {
width: 35%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
left: 0;
width: 35%;
min-width: 120px;
overflow: scroll;
background-color: @background-color-light;
@@ -19,8 +19,8 @@
&__nitem {
position: relative;
line-height: 44px;
padding: 0 9px 0 15px;
line-height: 44px;
&--active::after {
position: absolute;
@@ -47,14 +47,14 @@
}
&__content {
box-sizing: border-box;
width: 65%;
height: 100%;
padding-left: 15px;
margin-left: 35%;
padding-left: 15px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
background-color: @white;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
&__item {
packages/uploader/index.less
+1 -1
View File
@@ -12,8 +12,8 @@
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
opacity: 0;
}
input[type="file"]::-webkit-file-upload-button {