tdesign-react/esm/common/style/web/components/radio/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_scrollbar.less";

@import "../../mixins/_reset.less";

@import "../../mixins/_focus.less";

// <name> 替换为组件名
.@{radio-cls}-group {
  .reset;

  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border-radius: @border-radius-default;
  flex-wrap: wrap;
  .scrollbar(4px);

  .@{radio-cls} {
    margin-right: @radio-margin-right;
  }

  &.@{radio-cls}-group__outline {
    flex-wrap: wrap;
    row-gap: @comp-margin-xs;

    &.@{prefix}-size-s {
      .@{radio-button--cls} {
        height: @radio-outline-height-small;
      }
    }

    &.@{prefix}-size-m {
      .@{radio-button--cls} {
        height: @radio-outline-height-medium;
      }
    }

    &.@{prefix}-size-l {
      .@{radio-button--cls} {
        height: @radio-outline-height-large;
      }
    }

    .@{radio-button--cls} {
      &:first-child {
        border-radius: @border-radius-default 0 0 @border-radius-default;
      }

      &:last-child {
        border-radius: 0 @border-radius-default @border-radius-default 0;
      }

      &:only-child {
        border-radius: @border-radius-default;
      }

      &.@{prefix}-is-checked {
        color: @radio-button-color-outline-checked;
      }

      &.@{prefix}-is-disabled {
        &.@{prefix}-is-checked {
          color: @brand-color-disabled;
          border-color: @brand-color-disabled;
          background-color: @radio-button-background-color-outline-disabled-checked;
        }
      }
    }
  }

  &.@{radio-cls}-group--filled {
    border-color: @radio-button-group-background-color-filled;
    padding: @radio-group-padding;
    border-radius: @border-radius-default;
    background-color: @radio-button-group-background-color-filled;
    position: relative;

    .@{radio-cls}-group__bg-block {
      position: absolute;
      left: @radio-group-filled-bg-block-left;
      top: @radio-group-filled-bg-block-top;
      width: 0;
      height: calc(100% - 4px);
      background-color: @radio-button-background-color-default-filled-checked;
      transition: @radio-group-transition;
      border-radius: @radio-button-border-radius;
    }

    .@{radio-button--cls} {
      color: @radio-button-color-filled;
      border: 0;
      background-color: transparent;

      &:hover {
        color: @radio-button-color-filled-hover;
      }

      &::before {
        content: "";
        position: absolute;
        left: @radio-button-before-left;
        top: @radio-button-before-top;
        transform: @radio-button-before-transition;
        width: @radio-button-before-width;
        height: calc(100% - 16px);
        background-color: @component-border;
        transition: opacity @anim-duration-base @anim-time-fn-ease-out;
      }

      &:first-child {
        &::before {
          opacity: @radio-opacity-transparent;
        }
      }

      &.@{prefix}-is-checked {
        position: relative;
        color: @radio-button-color-default-filled-checked;
        z-index: 1;
        border: 0;
        transition: color @anim-duration-base linear;

        &::before {
          opacity: @radio-opacity-transparent;
        }

        & + label {
          &::before {
            opacity: @radio-opacity-transparent;
          }
        }
      }

      &.@{prefix}-is-disabled {
        background-color: transparent;

        &.@{prefix}-is-checked {
          color: @radio-button-color-default-filled-disabled-checked;
        }

        &.@{prefix}-is-checked ~ .@{radio-cls}-group__bg-block {
          background-color: @radio-button-background-color-default-filled-disabled-checked;
        }
      }
    }
  }

  &.@{radio-cls}-group--primary-filled {
    .@{radio-cls}-group__bg-block {
      background-color: @radio-button-background-color-primary-filled-checked;
    }

    .@{radio-button--cls} {
      &.@{prefix}-is-checked {
        color: @radio-button-color-primary-filled-checked;
      }

      &.@{prefix}-is-disabled {
        &.@{prefix}-is-checked {
          color: @radio-button-color-primary-filled-checked;
        }

        &.@{prefix}-is-checked ~ .@{radio-cls}-group__bg-block {
          background-color: @radio-button-background-color-primary-filled-disabled-checked;
        }
      }
    }
  }

  &.@{prefix}-size-s {
    .@{radio-button--cls} {
      height: @radio-height-small;
      padding: @radio-button-padding-small;
      font: @radio-button-font-small;

      &::before {
        height: calc(100% - 16px);
      }
    }
  }

  &.@{prefix}-size-m {
    .@{radio-button--cls} {
      height: @radio-height-medium;
      padding: @radio-button-padding-medium;
      font: @radio-button-font-medium;

      &::before {
        height: calc(100% - 20px);
      }
    }
  }

  &.@{prefix}-size-l {
    .@{radio-button--cls} {
      height: @radio-height-large;
      padding: @radio-button-padding-large;
      font: @radio-button-font-large;

      &::before {
        height: calc(100% - 24px);
      }
    }
  }

  .@{radio-button--cls} {
    cursor: pointer;
    position: relative;
    border: @radio-button-border;
    border-color: @radio-button-border-color-default;
    border-right: 0;
    display: inline-flex;
    align-items: center;
    transition: @radio-button-transition;
    color: @radio-label-color;
    white-space: nowrap;
    box-sizing: border-box;

    &:first-child {
      border-radius: @radio-button-border-radius 0 0 @radio-button-border-radius;
    }

    &:last-child {
      border-right: @radio-button-border;
      border-right-color: @radio-button-border-color-default;
      border-radius: 0 @radio-button-border-radius @radio-button-border-radius 0;
    }

    &__former {
      opacity: @radio-opacity-transparent;
      height: 0;
      width: 0;
      .reset;
    }

    &:hover {
      color: @radio-button-color-outline-checked;
    }

    &.@{prefix}-is-checked {
      border-right: @radio-button-border;
      border-color: @radio-button-border-color-checked;
      transition: border-color @anim-duration-base @anim-time-fn-ease-out;

      + .@{radio-button--cls} {
        border-left: 0;
      }
    }

    &.@{prefix}-is-disabled {
      cursor: not-allowed;
      color: @radio-button-color-disabled;
      background-color: @radio-button-background-color-disabled;

      &:hover {
        border-color: @radio-button-border-color-default;
        color: @radio-button-color-disabled;

        &::after {
          width: 0;
        }
      }

      &.@{prefix}-is-checked {
        color: @radio-button-color-disabled-checked;

        &::after {
          width: 0;
        }
      }
    }
  }
}

.@{radio-cls} {
  .reset;

  position: relative;
  cursor: pointer;
  display: inline-block;

  &__former {
    .reset;

    opacity: @radio-opacity-transparent;
    position: absolute;
  }

  &__input {
    position: relative;
    display: inline-block;
    width: @radio-size;
    height: @radio-size;
    vertical-align: middle;
    border-radius: @border-radius-circle;
    border: @radio-input-border;
    background-color: @radio-input-color;
    transition: @radio-input-transition;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: @radio-size;
      height: @radio-size;
      margin-top: -@radio-dot-size;
      margin-left: -@radio-dot-size;
      transform: scale(.5);
      opacity: @radio-opacity-transparent;
      border-radius: @border-radius-circle;
      background-color: @radio-dot-color;
      transition: all @anim-duration-base @anim-time-fn-ease-out;
    }
  }

  &__label {
    display: inline-block;
    margin-left: @radio-input-label-spacer;
    color: @radio-label-color;
    vertical-align: middle;
    font: @radio-font;
    white-space: nowrap;
  }

  &:hover {
    .@{radio-cls}__input {
      border-color: @radio-dot-color;
    }
  }

  &.@{prefix}-is-checked {
    .@{radio-cls}__input {
      border-color: @radio-dot-color;

      &::after {
        opacity: 1;
      }
    }
  }

  &.@{prefix}-is-disabled {
    cursor: not-allowed;

    .@{radio-cls}__label {
      color: @radio-button-color-disabled;
    }

    .@{radio-cls}__input {
      background-color: @radio-input-color-disabled;
    }

    &:hover {
      .@{radio-cls}__input {
        border-color: @radio-border-color;
      }
    }

    &.@{prefix}-is-checked {
      .@{radio-cls}__input {
        border-color: @radio-border-color;

        &::after {
          background-color: @radio-dot-color-disabled-checked;
        }
      }
    }
  }
}

.@{prefix}-radio:focus-visible {
  .tab-focus-style-rect();
}