amis/scss/components/form/_combo.scss

.#{$ns}Combo {
  &-placeholder {
    color: $text--muted-color;
    padding-top: $Form-label-paddingTop;
  }

  &-toolbarBtn {
    line-height: $Combo-toolbarBtn-lineHeight;
    height: $Combo-toolbarBtn-height;
    color: $Combo-toolbarBtn-color;
    padding: $Combo-toolbarBtn-paddingY $Combo-toolbarBtn-paddingX;
    cursor: pointer;

    &:hover {
      color: darken($Combo-toolbarBtn-color, 10%);
    }
  }

  &-setNullBtn {
    margin-top: $gap-xs;
    display: inline-block;
  }

  &-addBtn {
    > svg {
      width: $Combo-addBtn-fontSize;
      height: $Combo-addBtn-fontSize;
    }

    font-size: $Combo-addBtn-fontSize;

    @include button-size(
      $Combo-addBtn-paddingY,
      $Combo-addBtn-paddingX,
      $Combo-addBtn-fontSize,
      $Combo-addBtn-lineHeight,
      $Combo-addBtn-borderRadius,
      $Combo-addBtn-height
    );

    @include button-variant(
      $Combo-addBtn-bg,
      $Combo-addBtn-border,
      $Combo-addBtn-color,
      $Combo-addBtn-onHover-bg,
      $Combo-addBtn-onHover-border,
      $Combo-addBtn-onHover-color,
      $Combo-addBtn-onActive-bg,
      $Combo-addBtn-onActive-border,
      $Combo-addBtn-onActive-color
    );

    &.is-disabled {
      pointer-events: none;
      opacity: $Button-onDisabled-opacity;
    }
  }

  &-items {
    &:empty {
      display: none;

      + .#{$ns}Combo-toolbar {
        padding-top: ($Form-input-height - $Combo-addBtn-height) / 2;
      }
    }

    margin-bottom: $Combo-items-marginBottom;
  }

  &-item {
    // background: $white;
  }

  &-itemDrager {
    cursor: move;

    > a {
      color: $icon-color;

      &:hover {
        color: $icon-onHover-color;
      }
    }

    svg {
      width: px2rem(16px);
      height: px2rem(16px);
    }
  }

  &--hor {
    .#{$ns}Combo-item {
      display: flex;
      flex-wrap: nowrap;
    }

    .#{$ns}Combo-item + .#{$ns}Combo-item {
      margin-top: $Combo--horizontal-item-gap;
    }

    .#{$ns}Combo-itemInner {
      flex-basis: 0;
      flex-grow: 1;
    }

    .#{$ns}Combo-itemTag {
      margin-right: $gap-sm;

      label {
        color: $info;
        margin-right: $gap-sm;
      }
    }

    .#{$ns}Combo-itemToolbar {
      margin-left: $gap-xs;
      display: flex;
      white-space: nowrap;
      align-items: flex-start;
      padding-top: $Form-label-paddingTop;

      > .is-disabled {
        pointer-events: none;
        opacity: $Button-onDisabled-opacity;
      }
    }

    &.is-draggable .#{$ns}Combo-toolbar {
      padding-left: px2rem(24px);
    }

    .#{$ns}Combo-itemDrager {
      padding: $Combo--horizontal-dragger-top px2rem(6px) 0 0;
    }
  }

  // &--ver {
  //   .#{$ns}Combo-item {
  //     background: $white;
  //   }
  // }

  &--ver:not(&--noBorder) {
    @include clearfix();
    > .#{$ns}Combo-items {
      margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
        0 (-$Combo--vertical-item-gap * 2);

      > .#{$ns}Combo-placeholder {
        margin: $Combo--vertical-item-gap * 2;
      }
    }

    .#{$ns}Combo-itemTag {
      text-align: right;

      label {
        color: $info;
        margin-right: $gap-sm;
      }
    }

    // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
    > .#{$ns}Combo-item,
    > .#{$ns}Combo-items > .#{$ns}Combo-item {
      border: $Combo--vertical-item-borderWidth dashed
        $Combo--vertical-item-borderColor;
      padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX;
      position: relative;
    }

    > .#{$ns}Combo-items > .#{$ns}Combo-item {
      margin: $Combo--vertical-item-gap * 2;
    }

    > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
      opacity: 0;
      position: absolute;
      right: $Combo--vertical-itemToolbar-positionRight;
      top: $Combo--vertical-itemToolbar-positionTop / 2;
      transition: $Combo--vertical-itemToolbar-transion;
      height: $Combo--vertical-itemToolbar-height;
      line-height: $Combo--vertical-itemToolbar-height;
      background-color: $Combo--vertical-itemToolbar-bg;
      color: $Combo--vertical-itemToolbar-color;
      border-top-left-radius: $Combo--vertical-itemToolbar-borderRadius;
      border-top-right-radius: $Combo--vertical-itemToolbar-borderRadius;
      padding: 0 px2rem(3px);
      border-style: solid;
      border-color: $Combo--vertical-itemToolbar-borderColor;
      border-width: $Combo--vertical-itemToolbar-borderWidth
        $Combo--vertical-itemToolbar-borderWidth 0
        $Combo--vertical-itemToolbar-borderWidth;
      // margin-top: px2rem(-1px);

      .#{$ns}Combo-toolbarBtn {
        color: inherit;
        line-height: $Combo--vertical-itemToolbar-height;
        // font-size: px2rem(14px);

        &:hover {
          color: $Combo--vertical-itemToolbar-onHover-color;
        }
      }

      // top: $Combo--vertical-itemToolbar-positionTop;
      // opacity: 1;
    }

    &:not(.is-disabled) > .#{$ns}Combo-item:hover,
    &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
      border-color: $Combo--vertical-item-onHover-borderColor;
      // border-style: solid;

      > .#{$ns}Combo-itemToolbar {
        top: $Combo--vertical-itemToolbar-positionTop;
        opacity: 1;
      }
    }

    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemDrager {
      position: absolute;
      top: $Combo--horizontal-dragger-top;
      left: px2rem(-30px);
    }

    &.is-draggable {
      > .#{$ns}Combo-items > .#{$ns}Combo-item {
        margin-left: px2rem(35px);
      }
      > .#{$ns}Combo-toolbar {
        padding-left: px2rem(25px);
      }
    }
  }

  &-item--dragging {
    position: relative;

    &:after {
      content: '';
      display: block;
      position: absolute;
      z-index: 5;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
  }
}

.#{$ns}ComboTabs > .#{$ns}Tabs-links {
  @include clearfix();
}

.#{$ns}ComboTabs-addLink {
  float: right;
}

.#{$ns}Combo-dragableTip {
  color: $text--muted-color;
  font-size: $fontSizeSm;
  margin-left: $gap-xs;

  &:empty {
    display: none;
  }
}

.#{$ns}ComboControl.is-inline {
  .#{$ns}Combo--hor .#{$ns}Combo-itemInner {
    flex-grow: unset;
    flex-basis: unset;
  }

  .#{$ns}Combo--ver .#{$ns}Combo-item {
    display: inline-block;
  }
}

@include media-breakpoint-up(sm) {
  .#{$ns}Combo-form .#{$ns}Form-item:last-child {
    margin-bottom: 0;
  }
}