winbox-ui-next/es/_components/input-label/style/input-label.less

We Design Vue 2.0: A Vue.js 3 UI Library

@import '../../../input/style/token.less';
@import '../../../input/style/input.less';

.input-label-style(@cls) {
  &.@{cls}-search {
    cursor: text;

    & .@{cls}-input,
    & .@{cls}-value {
      pointer-events: none;
    }
  }
  .input-wrapper-style(@cls);

  cursor: pointer;

  .hide-input-element() {
    // A div with width: 0 can also cause line breaks to cause the input box to be stretched, and to separate it from the standard document flow
    position: absolute;
    // Need to hide the input while ensuring that it can be focused by the Tab key
    // So don't use display: none / visibility: hidden
    width: 0 !important;
  }

  .@{cls}-input {
    .input-style();

    &-hidden {
      .hide-input-element();
    }
  }

  .@{cls}-value {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    .text-ellipsis();

    // Fix the style problem that the height of the outer div of the select layer exceeds 4px when the value is an empty string.
    &::after {
      font-size: 0;
      line-height: 0;
      visibility: hidden;
      content: '.';
    }

    &-hidden {
      display: none;
    }
  }

  .size(@size) {
    &.@{cls}-size-@{size} .@{cls}-input,
    &.@{cls}-size-@{size} .@{cls}-value {
      .input-size(@size);
    }
  }

  .size(medium);
  .size(small);
  .size(default);
}