157 lines
3.5 KiB
SCSS
157 lines
3.5 KiB
SCSS
.#{$ns}ButtonGroup {
|
||
position: relative;
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
flex-wrap: wrap;
|
||
|
||
> .#{$ns}Button {
|
||
position: relative;
|
||
flex: 0 1 auto;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
> .#{$ns}Button,
|
||
.#{$ns}Badge {
|
||
@include hover {
|
||
z-index: 1;
|
||
}
|
||
|
||
&:focus,
|
||
&:active,
|
||
&.active,
|
||
&.is-active {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Badge {
|
||
.#{$ns}Badge-text,
|
||
.#{$ns}Badge-dot,
|
||
.#{$ns}Badge-ribbon,
|
||
.#{$ns}Badge-dot {
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Button + .#{$ns}Button,
|
||
.#{$ns}Button + .#{$ns}ButtonGroup,
|
||
.#{$ns}Button + .#{$ns}Badge,
|
||
.#{$ns}ButtonGroup + .#{$ns}Button,
|
||
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup,
|
||
.#{$ns}Badge + .#{$ns}Badge,
|
||
.#{$ns}Badge + .#{$ns}Button {
|
||
margin-left: calc(var(--ButtonGroup-borderWidth) * -1);
|
||
}
|
||
|
||
&--block {
|
||
display: block;
|
||
}
|
||
&-button--active {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonToolbar {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.#{$ns}ButtonGroup {
|
||
margin-left: var(--gap-xs);
|
||
margin-top: var(--gap-xs);
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonGroup {
|
||
> .#{$ns}Button:first-child,
|
||
> .#{$ns}Badge .#{$ns}Button {
|
||
margin-left: 0;
|
||
}
|
||
|
||
// cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
|
||
.#{$ns}Button--primary.is-active {
|
||
color: var(--ButtonGroup--primary-isActive-color);
|
||
background: var(--ButtonGroup--primary-isActive-bg);
|
||
}
|
||
|
||
> .#{$ns}Button:not(:last-child),
|
||
> .#{$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}Badge:not(:first-child) > .#{$ns}Button {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
> .#{$ns}ButtonGroup:last-child > .#{$ns}Button:not(:last-child) {
|
||
border-top-right-radius: 0;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonGroup--vertical {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
|
||
.#{$ns}Button,
|
||
.#{$ns}ButtonGroup {
|
||
width: 100%;
|
||
}
|
||
|
||
> .#{$ns}Button + .#{$ns}Button,
|
||
> .#{$ns}Button + .#{$ns}ButtonGroup,
|
||
> .#{$ns}Button + .#{$ns}Badge,
|
||
> .#{$ns}ButtonGroup + .#{$ns}Button,
|
||
> .#{$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}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}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,
|
||
> .#{$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,
|
||
> .#{$ns}Badge:last-child > .#{$ns}Button:last-child {
|
||
border-bottom-left-radius: var(--borders-radius-3);
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonGroup--tiled {
|
||
display: flex;
|
||
|
||
.#{$ns}Button,
|
||
.#{$ns}ButtonGroup {
|
||
flex-grow: 1;
|
||
text-align: center;
|
||
}
|
||
}
|