wetrade-design/es/segmented/style/index-pure.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';

@segmented-prefix-cls: ~'@{wd-prefix}-segmented';
@segmented-group-prefix-cls: ~'@{wd-prefix}-segmented-group';
@segmented-item-prefix-cls: ~'@{wd-prefix}-segmented-item';

.@{segmented-prefix-cls} {
  .reset-component();
  display: inline-block;
  padding: @segmented-padding;
  color: @segmented-color;
  background-color: @segmented-bg-color;
  border-radius: @segmented-border-radius;
  transition: all 0.3s ease-in-out;

  &-group {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-items: flex-start;
    width: 100%;
  }

  // RTL styles
  &-rtl {
    direction: rtl;
  }

  // block styles
  &-block {
    display: flex;
  }

  &-block &-item {
    flex: 1;
    min-width: 0;
  }

  // item
  &-item {
    position: relative;
    text-align: center;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    border-radius: @segmented-border-radius;

    &-selected {
      color: @segmented-selected-color;
      background-color: @segmented-selected-bg-color;
      box-shadow: @segmented-item-active-shadow;
    }

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      inset-inline-start: 0;
      border-radius: inherit;
      transition: background-color 0.3s;
    }

    &:hover:not(.@{segmented-prefix-cls}-item-selected):not(
        .@{segmented-prefix-cls}-item-disabled
      ) {
      color: @segmented-item-hover-color;

      &::after {
        background-color: @segmented-item-hover-bg-color;
      }
    }

    &-label {
      min-height: @segmented-height;
      line-height: @segmented-height;
      padding: 0 @segmented-item-horizontal-padding-base;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    // &-icon + * {
    //   margin-inline-start:
    // }

    &-input {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none;
    }

    &-disabled {
      &,
      &:hover,
      &:focus {
        color: @segmented-item-disable-color;
        cursor: not-allowed;
      }
      &.@{segmented-prefix-cls}-item-selected {
        background-color: @segmented-item-selected-disable-bg-color;
      }
    }
  }

  // thumb style
  &-thumb {
    background-color: @segmented-selected-bg-color;
    box-shadow: @segmented-item-active-shadow;
    position: absolute;
    inset-block-start: 0;
    inset-block-start: 0;
    width: 0;
    height: 100%;
    //  padding: `${token.paddingXXS}px 0`,
    border-radius: @border-radius-sm;

    &
      ~ .@{segmented-prefix-cls}-item:not(.@{segmented-prefix-cls}-item-selected):not(
        .@{segmented-prefix-cls}-item-disabled
      )::after {
      background-color: transparent;
    }

    &-motion-appear-active {
      transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      will-change: transform, width;
    }
  }

  // ========================== size ==========================
  .size(@height, @horizontalPadding, @font-size, @border-radius: @segmented-border-radius) {
    border-radius: @border-radius;
    .@{segmented-prefix-cls}-item-label {
      min-height: @height;
      line-height: @height;
      padding: 0 @horizontalPadding;
      font-size: @font-size;
    }
    .@{segmented-prefix-cls}-item,
    .@{segmented-prefix-cls}-thumb {
      border-radius: @border-radius;
    }
  }

  &-bg {
    .size(@segmented-height-bg, @segmented-item-horizontal-padding-bg, @segmented-font-size-bg);
  }
  &-sm {
    .size(@segmented-height-sm, @segmented-item-horizontal-padding-sm, @segmented-font-size-sm);
  }
  &-xs {
    .size(@segmented-height-xs, @segmented-item-horizontal-padding-xs, @segmented-font-size-xs);
  }
}