cyber-web-ui/es/radio/style/index.less

spring-cyber前端ui框架

@import '../../style/theme/index.less';

.cyber-radio-warpper {
  margin-bottom: 20px;
  background: #FFFFFF;
  padding: 10px 20px 11px;
  border-radius: @border-radius-base;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
}

.cyber-radio-group {
  width: auto;
  border-radius: 100px;
  background: #F4F6F9;
  border: 1px solid #F4F6F9;
  .ant-radio-button-wrapper {
    background: #F4F6F9;
  }
}

.cyber-radio-button {
  height: 100%;
  border-radius: 100px !important;
  text-align: center;
  overflow: hidden;
  border: none !important;
  background: #F4F6F9;
  // 默认样式
  &.ant-radio-button-wrapper {
    padding: 0 17px 0;
    .cyber-radio-button-content {
      display: flex;
      align-items: center;
      justify-content: center;
      // 通用统计样式
      .count {
        display: flex;
        align-items: center;
        font-family: @oswald;
        height: 20px;
        padding: 0 8px;
        margin-left: 10px;
        color: #FFFFFF;
        background: @primary-color;
        border-radius: 16px 16px 16px 16px;
      }
    }
    // 未禁用样式
    &:not(.ant-radio-button-wrapper-disabled) {
      // 选中样式
      &.ant-radio-button-wrapper-checked {
        background-color: @primary-color;
        &:hover {
          background-color: hardlight(@primary-color, #ffffff33);
        }
        &:active {
          background-color: hardlight(@primary-color, #00000033);
        }
        .count {
          color: @primary-color;
          background: #FFFFFF;
        }
      }
      // 未选中样式
      &:not(.ant-radio-button-wrapper-checked) {
        &:hover {
          color: hardlight(@primary-color, #ffffff33);
        }
        .count {
          color: #FFFFFF;
          background-color: @primary-color
        }
      }
      // 停用样式
      &.cyber-radio-button-dark {
        // 选中样式
        &.ant-radio-button-wrapper-checked {
          background-color: @dark-color;
          border-color: @dark-color;
          &:hover {
            background-color: hardlight(@dark-color, #ffffff33);
          }
          &:active {
            background-color: hardlight(@dark-color, #00000033);
          }
          .count {
            color: @dark-color;
            background: #FFFFFF;
          }
        }
        // 未选中样式
        &:not(.ant-radio-button-wrapper-checked) {
          &:hover {
            color: hardlight(@dark-color, #ffffff33);
          }
          .count {
            color: #FFFFFF;
            background-color: @dark-color
          }
        }
      }
    }
    // 禁用样式
    &.ant-radio-button-wrapper-disabled {
      color: @disabled-color;
      background-color: @disabled-bg-color;
      &:hover {
        background-color: @disabled-bg-color;
      }
      &:active {
        background-color: @disabled-bg-color;
      }
      .count {
        background: #FFFFFF;
        color: @disabled-color;
      }
    }
  }
}