feat: 表单、表格、选项卡、分割线移动端1像素边框优化

This commit is contained in:
zhangxulong 2023-08-16 15:49:16 +08:00
parent d2228ba8d3
commit 59a9651646
9 changed files with 97 additions and 6 deletions

View File

@ -615,3 +615,28 @@
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin hairline-common() {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}
@mixin hairline-top($color: var(--van-border-color), $left: 0, $right: 0) {
@include hairline-common();
top: 0;
right: $right;
left: $left;
border-top: 1px solid $color;
transform: scaleY(0.5);
}
@mixin hairline-bottom($color: var(--van-border-color), $left: 0, $right: 0) {
@include hairline-common();
right: $right;
bottom: 0;
left: $left;
border-bottom: 1px solid $color;
transform: scaleY(0.5);
}

View File

@ -184,3 +184,15 @@
}
}
}
/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
.#{$ns}Collapse {
border: none;
position: relative;
&::before {
@include hairline-bottom(var(--collapse-default-bottom-border-color));
}
}
}

View File

@ -8,4 +8,15 @@
&--solid {
border-bottom-style: solid;
}
&--dashed {
border-bottom-style: dashed;
}
}
/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
.#{$ns}Divider {
transform: scaleY(0.5);
}
}

View File

@ -77,8 +77,11 @@
&.is-mobile {
border: none;
border-radius: 0;
border-bottom: var(--Form-input-borderWidth) solid
var(--Form-input-borderColor);
position: relative;
&::before {
@include hairline-bottom(var(--Form-input-borderColor));
}
&.is-error,
.is-error > & {

View File

@ -145,8 +145,11 @@
&.is-mobile {
.#{$ns}Number {
border-radius: 0;
border-bottom: var(--Number-borderWidth) solid
var(--Form-input-borderColor);
position: relative;
&::before {
@include hairline-bottom(var(--Form-input-borderColor));
}
}
}
}

View File

@ -1073,3 +1073,23 @@
margin-right: px2rem(10px);
}
}
/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
.#{$ns}Table-table > thead > tr > th {
border-bottom: none;
&::before {
@include hairline-bottom(var(--Table-thead-borderColor));
}
}
.#{$ns}Table-table th,
.#{$ns}Table-table td {
position: relative;
border-bottom: none;
&::before {
@include hairline-bottom(var(--Table-borderColor));
}
}
}

View File

@ -1389,3 +1389,15 @@
justify-content: flex-end; // 默认居右展示
}
}
/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
.#{$ns}Tabs--line {
.#{$ns}Tabs-linksContainer-wrapper {
&::before {
border-bottom-width: 1px;
transform: scaleY(0.5);
}
}
}
}

View File

@ -336,7 +336,11 @@
.#{$ns}Combo-item {
align-items: center;
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
position: relative;
&::before {
@include hairline-bottom(var(--borderColor));
}
}
}

View File

@ -524,7 +524,8 @@
right: 0;
bottom: 0;
left: 0;
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
border-bottom: 1px solid var(--borderColor);
transform: scaleY(0.5);
}
.#{$ns}InputGroup-addOn,