@import "mixins/mixins";
|
@import "common/var";
|
@import "button";
|
@import "./popper";
|
|
@include b(dropdown) {
|
display: inline-block;
|
position: relative;
|
color: $--color-text-regular;
|
font-size: $--font-size-base;
|
|
.el-button-group {
|
display: block;
|
.el-button {
|
float: none;
|
}
|
}
|
|
& .el-dropdown__caret-button {
|
padding-left: 5px;
|
padding-right: 5px;
|
position: relative;
|
border-left: none;
|
|
&::before {
|
$gap: 5px;
|
|
content: '';
|
position: absolute;
|
display: block;
|
width: 1px;
|
top: $gap;
|
bottom: $gap;
|
left: 0;
|
background: mix(white, transparent, 50%);
|
}
|
|
&.el-button--default::before {
|
background: mix($--button-default-border-color, transparent, 50%);
|
}
|
|
&:hover {
|
&:not(.is-disabled)::before {
|
top: 0;
|
bottom: 0;
|
}
|
}
|
|
& .el-dropdown__icon {
|
padding-left: 0;
|
}
|
}
|
@include e(icon) {
|
font-size: 12px;
|
margin: 0 3px;
|
}
|
|
.el-dropdown-selfdefine { // 自定义
|
&:focus:active, &:focus:not(.focusing) {
|
outline-width: 0;
|
}
|
}
|
|
[disabled] {
|
cursor: not-allowed;
|
color: $--font-color-disabled-base;
|
}
|
}
|
|
@include b(dropdown-menu) {
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
padding: 10px 0;
|
margin: 5px 0;
|
background-color: $--color-white;
|
border: 1px solid $--border-color-lighter;
|
border-radius: $--border-radius-base;
|
box-shadow: $--dropdown-menu-box-shadow;
|
|
@include e(item) {
|
list-style: none;
|
line-height: 36px;
|
padding: 0 20px;
|
margin: 0;
|
font-size: $--font-size-base;
|
color: $--color-text-regular;
|
cursor: pointer;
|
outline: none;
|
&:not(.is-disabled):hover, &:focus {
|
background-color: $--dropdown-menuItem-hover-fill;
|
color: $--dropdown-menuItem-hover-color;
|
}
|
|
i {
|
margin-right: 5px;
|
}
|
|
@include m(divided) {
|
$divided-offset: 6px;
|
|
position: relative;
|
margin-top: $divided-offset;
|
border-top: 1px solid $--border-color-lighter;
|
|
&:before {
|
content: '';
|
height: $divided-offset;
|
display: block;
|
margin: 0 -20px;
|
background-color: $--color-white;
|
}
|
}
|
|
@include when(disabled) {
|
cursor: default;
|
color: $--font-color-disabled-base;
|
pointer-events: none;
|
}
|
}
|
|
@include m(medium) {
|
padding: 6px 0;
|
|
@include e(item) {
|
line-height: 30px;
|
padding: 0 17px;
|
font-size: 14px;
|
|
&.el-dropdown-menu__item--divided {
|
$divided-offset: 6px;
|
margin-top: $divided-offset;
|
|
&:before {
|
height: $divided-offset;
|
margin: 0 -17px;
|
}
|
}
|
}
|
}
|
|
@include m(small) {
|
padding: 6px 0;
|
|
@include e(item) {
|
line-height: 27px;
|
padding: 0 15px;
|
font-size: 13px;
|
|
&.el-dropdown-menu__item--divided {
|
$divided-offset: 4px;
|
margin-top: $divided-offset;
|
|
&:before {
|
height: $divided-offset;
|
margin: 0 -15px;
|
}
|
}
|
}
|
}
|
|
@include m(mini) {
|
padding: 3px 0;
|
|
@include e(item) {
|
line-height: 24px;
|
padding: 0 10px;
|
font-size: 12px;
|
|
&.el-dropdown-menu__item--divided {
|
$divided-offset: 3px;
|
margin-top: $divided-offset;
|
|
&:before {
|
height: $divided-offset;
|
margin: 0 -10px;
|
}
|
}
|
}
|
}
|
}
|
