tdesign-react/esm/style/web/components/back-top/_mixin.less

TDesign Component for React

@prefix-block: e('@{prefix}-back-top');

.back-top-attr(@attr, @modify, @isTarget: false, @target: '') {
  @value: if((boolean(@isTarget)), e('back-top-@{target}-@{attr}-@{modify}'), e('back-top-@{attr}-@{modify}'));

  @{attr}: @@value;
}

.back-top-bg-color(@theme, @isHover) {
  @bg-color: if((boolean(@isHover)), e('back-top-bg-color-@{theme}-hover'), e('back-top-bg-color-@{theme}'));

  background-color: @@bg-color;
}

.back-top-theme(@theme) {
  .back-top-attr(border-color, @theme);
  .back-top-bg-color(@theme, false);

  &:hover {
    .back-top-attr(border-color, '@{theme}-hover');
    .back-top-bg-color(@theme, true);
  }
  .@{prefix-block}__text {
    .back-top-attr(color, @theme, true, 'text');
  }
  .@{prefix-block}__icon {
    .back-top-attr(color, @theme, true, 'icon');
  }
}

.back-top-size(@size) {
  .back-top-attr(width, @size);
  .back-top-attr(height, @size);
  .@{prefix-block}__text {
    .back-top-attr(display, @size, true, 'text');
  }
}

.back-top-shape(@shape) {
  .back-top-attr(border-radius, @shape);
}