zent/css/split-button.css

一套前端设计语言和基于React的实现

.zent-split-button {
  display: inline-block;
}
.zent-split-button + .zent-split-button {
  margin-left: 10px;
}
.zent-split-button__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.zent-split-button__main.zent-btn-loading:hover, .zent-split-button__main.zent-btn-loading:active {
  z-index: 0;
}
.zent-split-button__main.zent-btn-primary {
  border-right-color: #356fd4;
  border-right-color: var(--theme-primary-hover-bg, var(--theme-primary-6, #356fd4));
}
.zent-split-button__main.zent-btn-danger {
  border-right-color: #d42f15;
  border-right-color: var(--theme-danger-color, var(--theme-error-4, #d42f15));
}
.zent-split-button__main.zent-btn-success {
  border-right-color: #45a110;
  border-right-color: var(--theme-success-color, var(--theme-success-4, #45a110));
}
.zent-split-button__main.zent-btn-text {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #fff;
  border-right-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
}
.zent-split-button__main.zent-btn-disabled {
  border-right-color: #f7f7f7;
  border-right-color: var(--theme-body-bg, var(--theme-stroke-8, #f7f7f7));
}
.zent-split-button__main, .zent-split-button__dropdown-wrapper {
  position: relative;
  z-index: 1;
}
.zent-split-button__main:hover, .zent-split-button__dropdown-wrapper:hover {
  z-index: 2;
}
.zent-split-button__dropdown-wrapper {
  margin-left: 1px;
  display: inline-block;
}
.zent-split-button__dropdown-wrapper-text {
  margin-left: 0;
}
.zent-split-button__dropdown {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0;
}
.zent-split-button__dropdown-icononly {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.zent-split-button__dropdown-icon.zenticon.zenticon-down {
  margin-left: 6px;
  margin-right: 6px;
}
.zent-split-button__dropdown.zent-btn-primary {
  border-left-color: #356fd4;
  border-left-color: var(--theme-primary-hover-bg, var(--theme-primary-6, #356fd4));
}
.zent-split-button__dropdown.zent-btn-danger {
  border-left-color: #d42f15;
  border-left-color: var(--theme-danger-color, var(--theme-error-4, #d42f15));
}
.zent-split-button__dropdown.zent-btn-success {
  border-left-color: #45a110;
  border-left-color: var(--theme-success-color, var(--theme-success-4, #45a110));
}
.zent-split-button__dropdown.zent-btn-text .zent-split-button__dropdown-icon {
  margin-left: 4px;
  margin-right: 4px;
  font-size: 14px;
}
.zent-split-button__dropdown.zent-btn-disabled {
  border-left-color: #f7f7f7;
  border-left-color: var(--theme-body-bg, var(--theme-stroke-8, #f7f7f7));
}
.zent-split-button__dropdown-disabled {
  cursor: not-allowed;
}

.zent-split-button__dropdown-menu {
  display: inline-block;
  width: unset;
}
.zent-split-button__dropdown-menu .zent-menu-item {
  padding: 0 16px;
}
.zent-split-button__dropdown-menu .zent-menu-item:hover {
  background-color: #f7f7f7;
  background-color: var(--theme-body-bg, var(--theme-stroke-8, #f7f7f7));
}
.zent-split-button__dropdown-menu-item-text.zent-menu-item {
  padding: 0 8px;
}