81 lines
1.9 KiB
SCSS
81 lines
1.9 KiB
SCSS
|
@use 'sass:map';
|
||
|
|
|
||
|
|
@use 'common/var' as *;
|
||
|
|
@use 'mixins/mixins' as *;
|
||
|
|
@use 'mixins/utils' as *;
|
||
|
|
|
||
|
|
@include b(button-group) {
|
||
|
|
@include utils-clearfix;
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: middle;
|
||
|
|
|
||
|
|
& > .#{$namespace}-button {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
& + .#{$namespace}-button {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
&:first-child {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
&:first-child:last-child {
|
||
|
|
border-top-right-radius: map.get($button-border-radius, 'default');
|
||
|
|
border-bottom-right-radius: map.get($button-border-radius, 'default');
|
||
|
|
border-top-left-radius: map.get($button-border-radius, 'default');
|
||
|
|
border-bottom-left-radius: map.get($button-border-radius, 'default');
|
||
|
|
|
||
|
|
&.is-round {
|
||
|
|
border-radius: var(--el-border-radius-round);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-circle {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:not(:first-child):not(:last-child) {
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
&:not(:last-child) {
|
||
|
|
margin-right: -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include when(active) {
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .#{$namespace}-dropdown {
|
||
|
|
& > .#{$namespace}-button {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
border-left-color: var(--el-button-divide-border-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $type in (primary, success, warning, danger, info) {
|
||
|
|
.#{$namespace}-button--#{$type} {
|
||
|
|
&:first-child {
|
||
|
|
border-right-color: var(--el-button-divide-border-color);
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
border-left-color: var(--el-button-divide-border-color);
|
||
|
|
}
|
||
|
|
&:not(:first-child):not(:last-child) {
|
||
|
|
border-left-color: var(--el-button-divide-border-color);
|
||
|
|
border-right-color: var(--el-button-divide-border-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|