@jecloud/ui/es/assets/styles/antd.less

JECloud UI库，基于ant-design-vue封装

/*           button            */
@btn-prefix-cls: ~'@{ant-prefix}-btn';
.@{btn-prefix-cls}{
  transition: none;

  &-icon-only{
    font-size: 14px;
  }

  & > i + span, 
  & > span + i {
      margin-left: 8px;
   }

   & > i {
     font-size: 14px;
     width:14px;
     height:14px;
     text-align: center;
     line-height: 1;
     display: inline-block;
   }
  
   &-primary {
     color: @white !important;
     background-color: @primary-color !important;
     border-color: @primary-color !important;
     text-shadow: none;
     box-shadow: none;
     &:hover,
     &:focus{
       color: @white !important ;
       opacity: 0.8;
     }

     &[disabled] {
      &,
      &:hover,
      &:focus,
      &:active {
        background-color: @primary-color;
        border-color: @primary-color;
        opacity: 0.5;
      }
    }
   }
   
   &-link{
     color: @link-color !important;
     border-color: transparent !important;
     background: transparent !important;
     &:hover, &:focus, &:active {
       border-color: transparent !important ;
       background: transparent !important ;
     }
   }
   &-text {
     border-color: transparent !important;
     background: transparent !important;
     &:hover, &:focus {
       background: rgba(0, 0, 0, 0.08) !important;
     }
     &:active {
       background: rgba(0, 0, 0, 0.1) !important;
     }
   }
   &-background-ghost&-primary{
     color: @primary-color !important;
     background: transparent !important ;
     &:hover,
     &:focus{
      opacity: .8;
     }
   }
}

/*           menu            */
@menu-prefix-cls: ~'@{ant-prefix}-menu';

.@{menu-prefix-cls} {
  box-shadow: none !important;
}

/*           tabs            */
@tabs-prefix-cls: ~'@{ant-prefix}-tabs';
.@{tabs-prefix-cls} {
  &-content{
    height:100%;
  }
  &-tabpane{
    position: relative;
  }
}

@radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';

.@{radio-group-prefix-cls}{
  .@{radio-prefix-cls}-button-wrapper {
    border-left-width: 0;
    &:first-child {
      border-left-width: @border-width-base;
    }
  }
  &.ant-radio-group-outline{
    .ant-radio-button-wrapper-checked{
      background-color: fade(@primary-color,10%);
    }
  }
}

/*           input            */
.ant-input-affix-wrapper{
  .ant-input:focus{
    box-shadow: none !important;
  }
  &.ant-input-textarea{
    .ant-input{
      border:0;
      padding:0;
      resize:none;
    }
    .ant-input-prefix,
    .ant-input-suffix{
      padding-top:5px;
      align-items:baseline;
    }
  }

  .ant-input-suffix{
    position: relative;
    margin-left:0;
    .ant-input-clear-icon{
      visibility: hidden;
      position: absolute;
      left:-8px;
      // top:5px;
      z-index: 1;
      margin:0;
      & + i {
        margin-left:0;
      }
    }
    &.ant-input-has-suffix{
      margin-left:4px;
      .ant-input-clear-icon{
        left:-16px;
      }
    }

    .icon-button{
      color: @text-color-secondary;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: @input-icon-hover-color;
      }
    }
  }

  &:hover,
  .ant-input:focus + .ant-input-suffix{
    .ant-input-clear-icon-show{
      visibility: visible;
    }
  }
  // &.ant-input-affix-wrapper-input-with-clear-btn{
  //   .ant-input{
  //     padding-right:20px;
  //   }
  // }

}

/*           input-number            */
.ant-input-number{
  &-input-wrap,
  &-input{
    height:100%;
    min-height: 30px;
  }
}

/*           select            */
.ant-select{
  &-selector,
  &-selection-search,
  &-selection-search-input{
    height:100% !important;
    transition: none !important;
  }

  &-single &-selector &-selection-item,
  &-single &-selector &-selection-placeholder{
    align-self: center;
  }
}

/*           dropdown            */
.ant-dropdown-menu{
  padding:0;
}
.ant-select-dropdown{
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: @vxe-table-row-checked-bg;
}
  .rc-virtual-list-scrollbar{
    width:4px !important;
    background-color:transparent;
    .rc-virtual-list-scrollbar-thumb{
      background-color: rgba(0, 0, 0, 0.1) !important;
    }
  }
}


/*           switch            */
.ant-switch{
  @switch-pin-size: @switch-height - 4px;
  @switch-sm-pin-size: @switch-sm-height - 4px;

  box-shadow:none !important;
  // calc编译有问题，重新调整
  &-checked &-handle {
    left: ~'calc(100% - @{switch-pin-size} - @{switch-padding})';
  }

  &-small&-checked &-handle {
    left: ~'calc(100% - @{switch-sm-pin-size} - @{switch-padding})';
  }
}

/*           collapse            */
.ant-collapse{
  border-bottom: 0 !important;
}

/*           rate            */
.ant-rate{
  .ant-rate-star-first .anticon,
  .ant-rate-star-second .anticon {
    vertical-align: baseline;
  }
}


/*           animation            */
// 高亮
.is--highlight{
  animation: je-highlight 1s;
}

@keyframes je-highlight
{
	0%   {background-color:transparent;}
	50%  {background-color:@primary-2;box-shadow: 0 0 4px @primary-2;}
	100% {background-color:transparent;}
}

/*           picker            */
.ant-picker-input>.input-focused,
.ant-picker-input>input:focus{
  box-shadow:none !important;
}

/*           disabled            */
.ant-input[disabled],
.ant-input-number-input[disabled],
.ant-input-number-disabled,
.ant-input-number[disabled],
.ant-picker-input > input[disabled],
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector{
  color:@text-color;
}

/*           input-group-addon            */
.je-addon-group-wrapper{
  width:auto;
}
.je-addon-group-wrapper.ant-input-group{
  width:100%;
  &>.ant-input-number-affix-wrapper{
    width:100%;
  }
  &>.ant-select,
  &>.ant-picker{
    width:100%;
  }
}
.ant-input-group-wrapper > .je-addon-group-wrapper.ant-input-group{
  height:100%;
  &>.ant-input-affix-wrapper{
    height:100%;
  }
}
.je-input-group-addon {
  .addon-item {
    display: inline-block;
    padding-left: 10px;
    &-link{
      color: @primary-color;
      cursor: pointer;
    }
    &:first-child {
      padding-left: 0;
    }
  }
  &.vertical-layout {
    vertical-align: baseline;
    .addon-item {
      padding: 4px 0 0 0;
      display: block;
      text-align: left;
      &:first-child {
        padding-top: 0;
      }
    }
  }
}