mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
8583c70fdc
* feat(theme-chalk): use @use instead of @import & remove /**/ comment * refactor(theme-chalk): refactor scss with @use module * fix(docs): scss in docs toggle to '@use' * docs: add custom theme on demand * docs: add unplugin-element-plus
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);
|
|
}
|
|
}
|
|
}
|
|
}
|