vue-vben-admin/src/design/mixins.less

.setPlaceholder(@prefix,@color:@text-color-help-dark) {
  // input
  @{prefix}::-webkit-input-placeholder {
    color: @color;
  }
  @{prefix}::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: @color;
  }
  @{prefix}:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: @color;
  }
  @{prefix}:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: @color;
  }
}
// 文本截断
.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 强制不换行 */
.word-nowrap() {
  word-wrap: normal;
  white-space: nowrap;
}

/* 强制换行 */
.break-all() {
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
}

// 禁止选中
.unselect() {
  cursor: pointer;
  user-select: none;
}

/* 适用于webkit内核和移动端 */
.ellipsis-multiple(@num: 1) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @num;
}

.respond-to (small, @content) {
  @media only screen and (min-width: @screen-sm-min) {
    @content();
  }
}
.respond-to (medium, @content) {
  @media only screen and (min-width: @screen-md-min) {
    @content();
  }
}
.respond-to (large, @content) {
  @media only screen and (min-width: @screen-lg-min) {
    @content();
  }
}
.respond-to (xlarge, @content) {
  @media only screen and (min-width: @screen-xl-min) {
    @content();
  }
}
.respond-to (xsmall-only, @content) {
  @media only screen and (max-width: @screen-xs-max) {
    @content();
  }
}
.respond-to (small-only, @content) {
  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    @content();
  }
}
.respond-to (medium-only, @content) {
  @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    @content();
  }
}
.respond-to (large-only, @content) {
  @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
    @content();
  }
}
.respond-to (xsmall-and-small, @content) {
  @media only screen and (max-width: @screen-sm-max) {
    @content();
  }
}
.respond-to (small-and-medium, @content) {
  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
    @content();
  }
}