mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +08:00
feat: 表单、表格、选项卡、分割线移动端1像素边框优化
This commit is contained in:
parent
d2228ba8d3
commit
59a9651646
@ -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);
|
||||
}
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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 > & {
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user