fix: 修改角标样式 (#6383)

Co-authored-by: yanglu19 <yanglu19@baidu.com>
This commit is contained in:
Dora 2023-03-15 20:32:45 +08:00 committed by GitHub
parent 69b1cb3f29
commit 158e9912de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 16 deletions

View File

@ -76,7 +76,7 @@
&-ribbon-out {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
@ -93,6 +93,11 @@
top: 5px;
}
&-ribbon-out--top-left,
&-ribbon-out--top-right {
top: 0;
}
&-ribbon-out--top-left,
&-ribbon-out--bottom-left {
left: 0;
@ -105,7 +110,8 @@
right: auto;
}
&-ribbon--bottom-left {
&-ribbon--bottom-left,
&-ribbon-out--bottom--left {
transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7);
transform-origin: 50% 100%;
left: 0;
@ -114,7 +120,8 @@
top: auto;
}
&-ribbon--bottom-right {
&-ribbon--bottom-right,
&-ribbon-out--bottom--right {
transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7);
transform-origin: 50% 100%;
left: auto;

View File

@ -12,7 +12,8 @@
white-space: nowrap;
}
> .#{$ns}Button {
> .#{$ns}Button,
.#{$ns}Badge {
@include hover {
z-index: 1;
}
@ -36,8 +37,11 @@
.#{$ns}Button + .#{$ns}Button,
.#{$ns}Button + .#{$ns}ButtonGroup,
.#{$ns}Button + .#{$ns}Badge,
.#{$ns}ButtonGroup + .#{$ns}Button,
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup,
.#{$ns}Badge + .#{$ns}Badge,
.#{$ns}Badge + .#{$ns}Button {
margin-left: calc(var(--ButtonGroup-borderWidth) * -1);
}
@ -60,7 +64,8 @@
}
.#{$ns}ButtonGroup {
> .#{$ns}Button:first-child {
> .#{$ns}Button:first-child,
> .#{$ns}Badge .#{$ns}Button {
margin-left: 0;
}
@ -71,13 +76,15 @@
}
> .#{$ns}Button:not(:last-child),
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button,
> .#{$ns}Badge:not(:last-child) > .#{$ns}Button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> .#{$ns}Button:not(:first-child),
> .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
> .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button,
> .#{$ns}Badge:not(:first-child) > .#{$ns}Button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@ -99,33 +106,39 @@
> .#{$ns}Button + .#{$ns}Button,
> .#{$ns}Button + .#{$ns}ButtonGroup,
> .#{$ns}Button + .#{$ns}Badge,
> .#{$ns}ButtonGroup + .#{$ns}Button,
> .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
> .#{$ns}ButtonGroup + .#{$ns}ButtonGroup,
> .#{$ns}Badge + .#{$ns}Badge,
> .#{$ns}Badge + .#{$ns}Button {
margin-top: calc(var(--ButtonGroup-borderWidth) * -1);
margin-left: 0;
}
> .#{$ns}Button:not(:last-child),
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button,
> .#{$ns}Badge:not(:last-child) > .#{$ns}Button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
> .#{$ns}Button:not(:first-child),
> .#{$ns}ButtonGroup:not(:first-child) > .btn {
> .#{$ns}ButtonGroup:not(:first-child) > .btn,
> .#{$ns}Badge:not(:first-child) > .btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* 修正头尾的圆角 */
> .#{$ns}Button:first-child,
> .#{$ns}ButtonGroup:first-child > .#{$ns}Button:first-child {
border-top-right-radius: var(--Button-borderRadius);
> .#{$ns}ButtonGroup:first-child > .#{$ns}Button:first-child,
> .#{$ns}Badge:first-child > .#{$ns}Button:first-child {
border-top-right-radius: var(--borders-radius-3);
}
> .#{$ns}Button:last-child,
> .#{$ns}ButtonGroup:last-child > .#{$ns}Button:last-child {
border-bottom-left-radius: var(--Button-borderRadius);
> .#{$ns}ButtonGroup:last-child > .#{$ns}Button:last-child,
> .#{$ns}Badge:last-child > .#{$ns}Button:last-child {
border-bottom-left-radius: var(--borders-radius-3);
}
}