amis2/scss/themes/cxd.scss

// 百度云舍主题：http://console.yunshe.design/docs/index

@import './cxd-variables';

@import './common';

.#{$ns}Switch {
  .text {
    margin: 0 px2rem(8px) 0 px2rem(25px);
    vertical-align: super;
  }
  .slider {
    &:before {
      width: calc(var(--Switch-height) - #{px2rem(4px)});
      top: px2rem(2px);
      bottom: px2rem(2px);
    }
  }
  &:active {
    .slider::before {
      width: calc(var(--Switch-height) + #{px2rem(2px)});
      border-radius: 10px;
    }
  }
  &:hover {
    background: var(--Switch-onHover-bgColor);
  }
  &.is-checked {
    background: var(--Switch-checked-bgColor);

    .slider::before {
      right: px2rem(2px);
    }

    .text {
      margin: 0 px2rem(25px) 0 px2rem(8px);
    }
    &:hover {
      background: var(--Switch-checked-onHover-bgColor);
    }
    &:active {
      background: var(--Switch-checked-onActive-bgColor);
    }
  }
}

// input选择器模式
.#{$ns}TextControl-sugs {
  border-radius: px2rem(3px);
  top: calc(var(--Form-input-height) + #{px2rem(4px)});
  box-shadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
  border: none;
}

.#{$ns}Select {
  .#{$ns}PopOver {
    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
    .#{$ns}Select-menu {
      border-radius: #{$R3};
      .#{$ns}Select-option {
        height: var(--Form-input-height);
        padding: px2rem(5px) px2rem(12px);
      }
    }
  }
}

.#{$ns}NestedSelectControl {
  .#{$ns}PopOver {
    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
    .#{$ns}NestedSelect-menuOuter {
      .#{$ns}NestedSelect-menu {
        border-radius: #{$R3};
        .#{$ns}NestedSelect-option {
          height: var(--Form-input-height);
          padding: 0 px2rem(12px);
          .#{$ns}NestedSelect-optionArrowRight {
            padding-right: 0;
          }
        }

        &:not(:first-child) {
          margin-left: 2px;
        }
      }
    }
  }
}

.#{$ns}TreeSelectControl {
  .#{$ns}PopOver {
    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
    box-shadow: var(--boxShadow);
    .#{$ns}Tree {
      border-radius: #{$R3};
      border: none;
    }
  }
}

.#{$ns}DropDown {
  .#{$ns}DropDown-menu {
    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
    border: none;
    > li {
      color: #{$G2};
    }
    > li.is-disabled {
      color: #{$G6};
    }
  }
}