tdesign-mobile-vue/esm/_common/style/mobile/components/segmented/_index.less

tdesign-mobile-vue

@import '../../base.less';

@import './_var.less';

.@{prefix}-segmented {
  display: inline-block;
  padding: calc(@spacer / 4);
  background-color: @segmented-bg-color;
  border-radius: calc(@spacer / 2);

  &--block {
    display: flex;
    width: 100%;

    .@{prefix}-segmented__item {
      flex: 1;
      min-width: 0;
    }

    .@{prefix}-segmented__item-inner {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

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

  &__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: @segmented-item-active-bg;
    border-radius: calc(@spacer / 2);
    transition: @segmented-transition;
    will-change: transform, width;
  }

  &__item {
    position: relative;
    z-index: 1;
    flex: none;
    padding: calc(@spacer-1 / 4) @spacer-1;
    text-align: center;
    cursor: pointer;
    font: @segmented-item-label-font;
    color: @segmented-item-color;

    &-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    &-icon:not(:empty) {
      margin-right: calc(@spacer / 2);
      display: flex;
      align-items: center;
    }

    &-icon {
      font-size: @font-size-m;
    }

    &--active {
      font-weight: 600;
      color: @segmented-item-active-color;
    }

    &--disabled {
      cursor: not-allowed;
      pointer-events: none;
      color: @segmented-item-disabled-color;
    }
  }
}