Browse Source

💄 Improve Step `type="navigation"` UI in small screen (#20545)

close #19877
pull/20552/head
偏右 5 years ago
committed by GitHub
parent
commit
8ea9356399
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 33
      components/steps/style/nav.less

33
components/steps/style/nav.less

@ -89,3 +89,36 @@
width: 100%;
}
}
@media (max-width: @screen-xs) {
.@{steps-prefix-cls}-navigation {
> .@{steps-prefix-cls}-item {
margin-right: 0 !important;
&::before {
display: none;
}
&.@{steps-prefix-cls}-item-active::before {
top: 0;
right: 0;
left: unset;
display: block;
width: 3px;
height: calc(100% - 24px);
}
&::after {
position: relative;
top: -2px;
left: 50%;
display: block;
width: 8px;
height: 8px;
margin-bottom: 8px;
text-align: center;
transform: rotate(135deg);
}
> .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
visibility: hidden;
}
}
}
}

Loading…
Cancel
Save