choerodon-ui/pro/lib/segmented/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../../../lib/style/themes/default';
@import '../../../../lib/style/mixins/index';
@import '../../../../lib/select/style/mixin';
@import '../../field/style/mixin';

@segmented-prefix: ~'@{c7n-pro-prefix}-segmented';
@pro-radio-prefix-cls: ~'@{c7n-pro-prefix}-radio';

.@{segmented-prefix} {
  position: relative;
  display: flex;
  width: fit-content;
  padding: @segmented-padding;
  color: @segmented-color;
  background: @segmented-bg;
  border-radius: @border-radius-base;

  &-wrapper {
    position: relative;
    display: inline-block;

    &&-fullwidth {
      display: flex;
    }
  }

  &-float-label {
    .@{c7n-pro-prefix}-field-label-wrapper {
      position: absolute;
      top: @segmented-float-label-top;
      left: @segmented-float-label-left;

      .@{c7n-pro-prefix}-field-label {
        font-weight: @output-font-weight;
        font-size: @output-float-label-font-size;
      }
    }
  }

  &&-vertical {
    flex-direction: column;

    .@{pro-radio-prefix-cls}-button:not(:first-of-type) {
      .@{pro-radio-prefix-cls}-inner {
        border-top: @segmented-interval-border-width @segmented-interval-border-color @segmented-interval-border-style;
        border-left: none;
      }
    }
  }

  &&-fullwidth {
    width: 100%;

    .@{pro-radio-prefix-cls}-button {
      flex: 1;
    }
  }

  .@{pro-radio-prefix-cls}-button {
    margin: 0;
    line-height: @segmented-item-line-height-base;
    background: transparent;

    + .@{pro-radio-prefix-cls}-button {
      margin-left: 0;
    }

    .@{pro-radio-prefix-cls}:focus + .@{pro-radio-prefix-cls}-inner {
      box-shadow: none;
    }

    .@{pro-radio-prefix-cls}:hover:not(:checked) + .@{pro-radio-prefix-cls}-inner {
      border-color: @segmented-interval-border-color;
      border-radius: 0;
    }

    &:hover {
      .@{pro-radio-prefix-cls}:not(:checked) + .@{pro-radio-prefix-cls}-inner {
        border-color: @segmented-interval-border-color;
      }
    }

    .@{pro-radio-prefix-cls}-inner {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    .@{pro-radio-prefix-cls}-label {
      text-align: center;
    }

    &:not(:first-of-type) {
      .@{pro-radio-prefix-cls}-inner {
        border-left: @segmented-interval-border-width @segmented-interval-border-color @segmented-interval-border-style;
      }
    }
  }

  &-sm {
    font-size: @font-size-sm;

    .@{segmented-prefix} {
      padding: @segmented-padding-sm;
    }

    .@{pro-radio-prefix-cls}-button {
      padding: @segmented-item-padding-sm;
      line-height: @segmented-item-line-height-sm;
    }
  }

  &-lg {
    font-size: @font-size-lg;

    .@{pro-radio-prefix-cls}-button {
      line-height: @segmented-item-line-height-lg;
    }
  }

  .@{pro-radio-prefix-cls} {
    // 选中项的字体颜色及大小，类名选择沿用了 Radio 层级选择
    &-button .@{pro-radio-prefix-cls}:not(:disabled):checked + .@{pro-radio-prefix-cls}-inner + span {
      color: @segmented-checked-color;
      font-weight: @segmented-checked-font-weight;
    }
    &:disabled + .@{pro-radio-prefix-cls}-inner {
      background-color: transparent;
      border-color: @segmented-interval-border-color !important;

      + .@{pro-radio-prefix-cls}-label {
        color: @disabled-color;
      }
    }
  }

  .@{pro-radio-prefix-cls}-checked.@{pro-radio-prefix-cls}-checked,
  .@{pro-radio-prefix-cls}-checked + .@{pro-radio-prefix-cls}-button {
    .@{pro-radio-prefix-cls}-inner {
      border: none;
      border-color: @segmented-interval-border-color;
    }
  }

  &-active-show {
    position: absolute;
    background: @segmented-active-bg;
    border-radius: @border-radius-base;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 3px, rgba(0, 0, 0, 0.1) 0 1px 2px;
    transition: transform .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1);
  }
}