amis2/scss/components/_button-group.scss

130 lines
2.9 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}ButtonGroup {
2019-12-06 09:58:08 +08:00
position: relative;
display: inline-flex;
vertical-align: middle;
> .#{$ns}Button {
2019-04-30 11:11:25 +08:00
position: relative;
2019-12-06 09:58:08 +08:00
flex: 0 1 auto;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
@if $Button-borderWidth>0 {
> .#{$ns}Button {
2019-12-06 09:58:08 +08:00
@include hover {
z-index: 1;
}
&:focus,
&:active,
&.active,
&.is-active {
z-index: 1;
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
.#{$ns}Button + .#{$ns}Button,
.#{$ns}Button + .#{$ns}ButtonGroup,
.#{$ns}ButtonGroup + .#{$ns}Button,
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
margin-left: -$Button-borderWidth;
}
} @else if
(
variable-exists('ButtonGroup-divider-width') and
variable-exists('ButtonGroup-divider-color')
)
{
background-color: $ButtonGroup-divider-color;
> .#{$ns}Button + .#{$ns}Button {
margin-left: $ButtonGroup-divider-width;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}ButtonToolbar {
2019-12-06 09:58:08 +08:00
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
.#{$ns}ButtonGroup {
margin-left: px2rem(5px);
margin-top: px2rem(5px);
width: auto;
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}ButtonGroup {
2019-12-06 09:58:08 +08:00
> .#{$ns}Button:first-child {
margin-left: 0;
}
// cxd的ButtonGroup的is-active和:active样式不一样这里做个兼容
.#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active {
@if variable-exists('ButtonGroup--primary-isActive-color') {
color: $ButtonGroup--primary-isActive-color;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
@if variable-exists('ButtonGroup--primary-isActive-bg') {
background-color: $ButtonGroup--primary-isActive-bg;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
@if $Button-borderWidth>0 {
2019-04-30 11:11:25 +08:00
> .#{$ns}Button:not(:last-child),
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
2019-12-06 09:58:08 +08:00
border-top-right-radius: 0;
border-bottom-right-radius: 0;
2019-04-30 11:11:25 +08:00
}
> .#{$ns}Button:not(:first-child),
2019-12-06 09:58:08 +08:00
> .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
}
.#{$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}ButtonGroup + .#{$ns}Button,
> .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
margin-top: -$Button-borderWidth;
margin-left: 0;
}
> .#{$ns}Button:not(:last-child),
> .#{$ns}ButtonGroup: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 {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}ButtonGroupControl {
2019-12-06 09:58:08 +08:00
display: inline-block;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
> .#{$ns}ButtonGroup--sm {
margin-top: ($Form-input-height - $Button--sm-height) / 2;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
> .#{$ns}ButtonGroup--xs {
margin-top: ($Form-input-height - $Button--xs-height) / 2;
}
}