vue3-treeselect/styles/style.less

Tree select hierarchical component for vue 3 (next)

/**
 * Dependencies
 */

@import "~material-colors/dist/colors.less";
@import "~easings-css/index.less";

/**
 * Variables
 */

@treeselect-font-size: 1em;
@treeselect-font-size-sm: 12px;
@treeselect-padding: 5px;
@treeselect-border-radius-lg: 5px;
@treeselect-border-radius-sm: 2px;
@treeselect-narrow-cell-width: 20px;
@treeselect-wide-cell-width: 100%;
@treeselect-icon-size: 12px;
@treeselect-transition-duration: 200ms;
@treeselect-transition-duration-slow: 400ms;
@treeselect-max-level: 8;

@treeselect-control-height: 36px;
@treeselect-control-inner-height: @treeselect-control-height - @treeselect-control-border-width * 2;
@treeselect-control-border-width: 1px;
@treeselect-control-border-color: #ddd;
@treeselect-control-border-color-hover: #cfcfcf;
@treeselect-control-border-color-active: @treeselect-control-border-color-hover;
@treeselect-control-border-color-focus: @md-light-blue-600;
@treeselect-control-border-radius: @treeselect-border-radius-lg;
@treeselect-control-bg: #fff;
@treeselect-control-box-shadow-focus: 0 0 0 3px fade(@treeselect-control-border-color-focus, 10%);
@treeselect-control-bg-disabled: #f9f9f9;

@treeselect-placeholder-font-color: @md-grey-400;
@treeselect-single-value-font-color: #333;
@treeselect-single-value-font-color-focused: @treeselect-placeholder-font-color;
@treeselect-multi-value-margin-x: 0;
@treeselect-multi-value-margin-y: 2px;
@treeselect-multi-value-padding-x: @treeselect-padding;
@treeselect-multi-value-padding-y: 0;
@treeselect-multi-value-font-size: @treeselect-font-size-sm;
@treeselect-multi-value-font-color: @md-light-blue-600;
@treeselect-multi-value-item-bg: @md-blue-50;
@treeselect-multi-value-item-bg-new: @md-green-50;
@treeselect-multi-value-item-border-width: 1px;
@treeselect-multi-value-item-border-color: transparent;
@treeselect-multi-value-font-color-hover: @treeselect-multi-value-font-color;
@treeselect-multi-value-item-bg-hover: @treeselect-multi-value-item-bg;
@treeselect-multi-value-item-bg-new-hover: @treeselect-multi-value-item-bg-new;
@treeselect-multi-value-font-color-disabled: @md-grey-600;
@treeselect-multi-value-item-bg-disabled: @md-grey-100;
@treeselect-multi-value-item-font-color-control-disabled: #555;
@treeselect-multi-value-item-bg-control-disabled: #fff;
@treeselect-multi-value-item-border-color-control-disabled: #e5e5e5;
@treeselect-multi-value-remove-color: @treeselect-multi-value-font-color;
@treeselect-multi-value-remove-color-hover: @md-red-600;
@treeselect-multi-value-remove-size: 6px;
@treeselect-multi-value-divider-color: #fff;
@treeselect-limit-tip-font-color: @md-grey-400;
@treeselect-limit-tip-font-size: @treeselect-multi-value-font-size;
@treeselect-limit-tip-font-weight: 600;
@treeselect-single-input-font-size: inherit;
@treeselect-multi-input-font-size: @treeselect-multi-value-font-size;

@treeselect-menu-bg: #fff;
@treeselect-menu-padding-y: @treeselect-padding;
@treeselect-menu-line-height: 180%;
@treeselect-menu-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
@treeselect-control-menu-divider-color: #f2f2f2;

@treeselect-arrow-size: 9px;
@treeselect-arrow-color: #ccc;
@treeselect-arrow-color-hover: @md-grey-700;
@treeselect-arrow-transition-timing-function: @ease-out-expo;

@treeselect-x-size: 8px;
@treeselect-x-color: @treeselect-arrow-color;
@treeselect-x-color-hover: @md-red-600;

@treeselect-option-bg-highlight: @md-grey-100;
@treeselect-option-selected-bg: @md-blue-50;
@treeselect-option-selected-bg-hover: @treeselect-option-selected-bg;
@treeselect-checkbox-size: @treeselect-icon-size;
@treeselect-checkbox-border-radius: @treeselect-border-radius-sm;
@treeselect-checkbox-color: @md-grey-300;
@treeselect-checkbox-color-highlight: @md-light-blue-600;
@treeselect-checkbox-border-color: @treeselect-checkbox-color;
@treeselect-checkbox-bg: #fff;
@treeselect-checkbox-border-color-hover: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-bg-hover: @treeselect-checkbox-bg;
@treeselect-checkbox-indeterminate-border-color: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-indeterminate-bg: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-indeterminate-icon: "./assets/checkbox-indeterminate.png";
@treeselect-checkbox-indeterminate-border-color-hover: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-indeterminate-bg-hover: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-checked-border-color: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-checked-bg: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-checked-icon: "./assets/checkbox-checked.png";
@treeselect-checkbox-checked-border-color-hover: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-checked-bg-hover: @treeselect-checkbox-color-highlight;
@treeselect-checkbox-disabled-border-color: @treeselect-checkbox-border-color;
@treeselect-checkbox-disabled-bg-color: darken(@treeselect-checkbox-bg, 3%);
@treeselect-checkbox-disabled-indeterminate-icon: "./assets/checkbox-indeterminate-disabled.png";
@treeselect-checkbox-disabled-checked-icon: "./assets/checkbox-checked-disabled.png";
@treeselect-option-label-color: inherit;
@treeselect-option-label-color-disabled: rgba(0, 0, 0, 0.25);

@treeselect-loader-color-dark: @md-light-blue-600;
@treeselect-loader-color-light: @md-light-blue-100;
@treeselect-loader-animation-duration: 1.6s;
@treeselect-warning-icon-bg: @md-orange-600;
@treeselect-error-icon-bg: @md-red-600;
@treeselect-tip-color: @md-grey-600;
@treeselect-tip-font-size: @treeselect-font-size-sm;
@treeselect-retry-text-color: @md-light-blue-600;


/**
 * Mixins
 */

.clickable() {
  cursor: pointer;
}

.inputtable() {
  cursor: text;
}

.forbidden() {
  cursor: not-allowed;
}

.reset-cursor() {
  cursor: default;
}

.rounded() {
  border-radius: 50%;
}

.border-radius-top(@size) {
  border-top-left-radius: @size;
  border-top-right-radius: @size;
}

.border-radius-bottom(@size) {
  border-bottom-left-radius: @size;
  border-bottom-right-radius: @size;
}

.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-padding(@value) {
  padding-left: @value;
  padding-right: @value;
}

.vertical-padding(@value) {
  padding-top: @value;
  padding-bottom: @value;
}

.icon() {
  display: block;
  margin: auto;
}

.row() {
  .horizontal-padding(@treeselect-padding);

  display: table;
  table-layout: fixed;
  width: 100%;
}

.cell() {
  display: table-cell;
  vertical-align: middle;
}

.wide-cell() {
  .cell();
  .horizontal-padding(@treeselect-padding);
  .text-truncate();

  width: @treeselect-wide-cell-width;
}

.narrow-cell() {
  .cell();

  width: @treeselect-narrow-cell-width;
  text-align: center;
  line-height: 0;
}

// based on: https://github.com/strues/retinajs/blob/master/dist/retina.less
.retina(@path, @cap: 2) { // stylelint-disable-line selector-class-pattern
  @lowretina: ~"(min-resolution: 1.5dppx)";
  @2xpath: replace(@path, "(\.\w+)$", "@2x$1");

  background-image: url(@path);

  @media @lowretina {
    background-image: url(@2xpath);
  }

  .create-queries() when (@cap >= 2) {
    .loop(@env) when (@env <= @cap) {
      @retinapath: replace(@path, "(\.\w+)$", "@@{env}x$1");
      @media (min-resolution: @env * 96dpi) {
        background-image: url(@retinapath);
      }

      .loop((@env + 1));
    }

    .loop(2);
  }
  .create-queries();
}

/**
 * Helpers
 */

.vue-treeselect-helper-hide {
  display: none;
}

.vue-treeselect-helper-zoom-effect-off {
  transform: none !important; // stylelint-disable-line declaration-no-important
}


/**
 * Animations
 */

@keyframes vue-treeselect-animation-fade-in {
  0% {
    opacity: 0;
  }
}

@keyframes vue-treeselect-animation-bounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

@keyframes vue-treeselect-animation-rotate {
  100% {
    transform: rotate(360deg);
  }
}


/**
 * Transitions
 */

.vue-treeselect__multi-value-item--transition {
  &-enter-active,
  &-leave-active {
    transition-duration: @treeselect-transition-duration;
    transition-property: transform, opacity;
  }

  &-enter-active {
    transition-timing-function: @ease-out-circ;
  }

  &-leave-active {
    transition-timing-function: @ease-out-cubic;
    // trigger animation when element is removed
    position: absolute;
  }

  &-enter,
  &-leave-to {
    transform: scale(0.7);
    opacity: 0;
  }

  &-move {
    transition: @treeselect-transition-duration transform @ease-out-quart;
  }
}

.vue-treeselect__menu--transition {
  &-enter-active,
  &-leave-active {
    // to be overriden
  }

  &-enter,
  &-leave-to {
    // to be overriden
  }
}

.vue-treeselect__list--transition {
  &-enter-active,
  &-leave-active {
    // to be overriden
  }

  &-enter,
  &-leave-to {
    // to be overriden
  }
}


/**
 * Namespace
 */

.vue-treeselect {
  position: relative;
  text-align: left;

  [dir="rtl"] & {
    text-align: right;
  }

  div,
  span {
    box-sizing: border-box;
  }

  svg {
    fill: currentColor;
  }
}


/**
 * Control
 */

.vue-treeselect__control {
  .row();

  height: @treeselect-control-height;
  border: @treeselect-control-border-width solid @treeselect-control-border-color;
  border-radius: @treeselect-control-border-radius;
  background: @treeselect-control-bg;
  transition-duration: @treeselect-transition-duration;
  transition-property: border-color, box-shadow, width, height, background-color, opacity;
  transition-timing-function: @ease-out-cubic;

  .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) &:hover {
    border-color: @treeselect-control-border-color-hover;
  }

  .vue-treeselect--focused:not(.vue-treeselect--open) & {
    border-color: @treeselect-control-border-color-focus;
    box-shadow: @treeselect-control-box-shadow-focus;
  }

  .vue-treeselect--disabled & {
    background-color: @treeselect-control-bg-disabled;
  }

  .vue-treeselect--open & {
    border-color: @treeselect-control-border-color-active;
  }

  .vue-treeselect--open.vue-treeselect--open-below & {
    .border-radius-bottom(0);
  }

  .vue-treeselect--open.vue-treeselect--open-above & {
    .border-radius-top(0);
  }
}

.vue-treeselect__value-container,
.vue-treeselect__multi-value {
  width: 100%;
  vertical-align: middle;
}

.vue-treeselect__value-container {
  display: table-cell;
  position: relative;

  .vue-treeselect--searchable:not(.vue-treeselect--disabled) & {
    // The real input is small and not covering the whole control.
    // We show an I-shape cursor to give user a hint that
    // clicking anywhere in the control will make the input focused.
    .inputtable();
  }
}

.vue-treeselect__multi-value {
  display: inline-block;

  .vue-treeselect--has-value & {
    margin-bottom: @treeselect-padding;
  }
}

.vue-treeselect__placeholder,
.vue-treeselect__single-value {
  .text-truncate();
  .horizontal-padding(@treeselect-padding);

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: @treeselect-control-inner-height;
  user-select: none;
  pointer-events: none;
}

.vue-treeselect__placeholder {
  color: @treeselect-placeholder-font-color;
}

.vue-treeselect__single-value {
  color: @treeselect-single-value-font-color;

  .vue-treeselect--focused.vue-treeselect--searchable & {
    color: @treeselect-single-value-font-color-focused;
  }

  .vue-treeselect--disabled & {
    // #274 Fix for IE
    position: static;
  }
}

.vue-treeselect__multi-value-item-container {
  display: inline-block;
  padding-top: @treeselect-padding;
  padding-right: @treeselect-padding;
  vertical-align: top;

  [dir="rtl"] & {
    padding-right: 0;
    padding-left: @treeselect-padding;
  }
}

.vue-treeselect__multi-value-item {
  .clickable();

  display: inline-table;
  background: @treeselect-multi-value-item-bg;
  // Table elements do not have margin, so we set at the container element.
  padding: @treeselect-multi-value-margin-y @treeselect-multi-value-margin-x;
  border: @treeselect-multi-value-item-border-width solid @treeselect-multi-value-item-border-color;
  border-radius: @treeselect-border-radius-sm;
  color: @treeselect-multi-value-font-color;
  font-size: @treeselect-multi-value-font-size;
  vertical-align: top; // stylelint-disable-line plugin/declaration-block-no-ignored-properties

  .vue-treeselect:not(.vue-treeselect--disabled) &:not(.vue-treeselect__multi-value-item-disabled):hover &:not(.vue-treeselect__multi-value-item-new) &:not(.vue-treeselect__multi-value-item-new):hover {
    .clickable();

    background: @treeselect-multi-value-item-bg-hover;
    color: @treeselect-multi-value-font-color-hover;
  }

  &.vue-treeselect__multi-value-item-disabled {
    .reset-cursor();

    background: @treeselect-multi-value-item-bg-disabled;
    color: @treeselect-multi-value-font-color-disabled;
  }

  .vue-treeselect--disabled & {
    .reset-cursor();

    background: @treeselect-multi-value-item-bg-control-disabled;
    border-color: @treeselect-multi-value-item-border-color-control-disabled;
    color: @treeselect-multi-value-item-font-color-control-disabled;
  }

  &.vue-treeselect__multi-value-item-new {
    background: @treeselect-multi-value-item-bg-new;
    &:hover {
      background: @treeselect-multi-value-item-bg-new;
    }
  }
}

.vue-treeselect__value-remove,
.vue-treeselect__multi-value-label {
  display: table-cell;
  padding: @treeselect-multi-value-padding-y @treeselect-multi-value-padding-x;
  vertical-align: middle;
}

.vue-treeselect__value-remove {
  color: @treeselect-multi-value-remove-color;
  padding-left: @treeselect-multi-value-padding-x;
  border-left: 1px solid @treeselect-multi-value-divider-color;
  line-height: 0;

  [dir="rtl"] & {
    border-left: 0 none;
    border-right: 1px solid @treeselect-multi-value-divider-color;
  }

  .vue-treeselect__multi-value-item:hover & {
    color: @treeselect-multi-value-remove-color-hover;
  }

  .vue-treeselect--disabled &,
  .vue-treeselect__multi-value-item-disabled & {
    display: none;
  }

  > svg {
    width: @treeselect-multi-value-remove-size;
    height: @treeselect-multi-value-remove-size;
  }
}

.vue-treeselect__multi-value-label {
  padding-right: @treeselect-multi-value-padding-x;
  white-space: pre-line;
  user-select: none;
}

.vue-treeselect__limit-tip {
  display: inline-block;
  padding-top: @treeselect-padding;
  padding-right: @treeselect-padding;
  vertical-align: top;

  [dir="rtl"] & {
    padding-right: 0;
    padding-left: @treeselect-padding;
  }
}

.vue-treeselect__limit-tip-text {
  .reset-cursor();

  display: block;
  margin: @treeselect-multi-value-margin-y @treeselect-multi-value-margin-x;
  padding: (@treeselect-multi-value-padding-y + @treeselect-multi-value-item-border-width) 0;
  color: @treeselect-limit-tip-font-color;
  font-size: @treeselect-limit-tip-font-size;
  font-weight: @treeselect-limit-tip-font-weight;
}

.vue-treeselect__input-container {
  display: block;
  max-width: 100%;
  outline: none;

  .vue-treeselect--single & {
    font-size: @treeselect-single-input-font-size;
    height: 100%;
  }

  .vue-treeselect--multi & {
    display: inline-block;
    font-size: @treeselect-multi-input-font-size;
    vertical-align: top;
  }

  .vue-treeselect--searchable & {
    .horizontal-padding(@treeselect-padding);
  }

  .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value & {
    padding-top: @treeselect-padding;
    padding-left: 0;

    [dir="rtl"] & {
      padding-left: @treeselect-padding;
      padding-right: 0;
    }
  }

  .vue-treeselect--disabled & {
    display: none;
  }
}

.vue-treeselect__input,
.vue-treeselect__sizer {
  margin: 0;
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
}

.vue-treeselect__input {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-sizing: content-box;
  box-shadow: none;
  background: none transparent;
  line-height: 1;
  vertical-align: middle;

  &::-ms-clear {
    display: none;
  }

  .vue-treeselect--single & {
    width: 100%;
    height: 100%;
  }

  .vue-treeselect--multi & {
    .vertical-padding(@treeselect-multi-value-margin-y + @treeselect-multi-value-item-border-width);
  }

  .vue-treeselect--has-value & {
    line-height: inherit;
    vertical-align: top;
  }
}

.vue-treeselect__sizer {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  height: 0;
  overflow: scroll;
  white-space: pre;
}

.vue-treeselect__x-container {
  .narrow-cell();
  .clickable();

  color: @treeselect-x-color;
  animation: @treeselect-transition-duration vue-treeselect-animation-fade-in @ease-out-circ;

  &:hover {
    color: @treeselect-x-color-hover;
  }
}

.vue-treeselect__x {
  width: @treeselect-x-size;
  height: @treeselect-x-size;
}

.vue-treeselect__control-arrow-container {
  .narrow-cell();
  .clickable();

  .vue-treeselect--disabled & {
    .reset-cursor();
  }
}

.vue-treeselect__control-arrow {
  width: @treeselect-arrow-size;
  height: @treeselect-arrow-size;
  color: @treeselect-arrow-color;

  .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover & {
    color: @treeselect-arrow-color-hover;
  }

  .vue-treeselect--disabled & {
    opacity: 0.35;
  }
}

.vue-treeselect__control-arrow--rotated {
  transform: rotateZ(180deg);
}


/**
 * Menu
 */

.vue-treeselect__menu-container {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: visible;
  transition: 0s;

  .vue-treeselect--open-below:not(.vue-treeselect--append-to-body) & {
    top: 100%;
  }

  .vue-treeselect--open-above:not(.vue-treeselect--append-to-body) & {
    bottom: 100%;
  }
}

.vue-treeselect__menu {
  .reset-cursor(); // set to normal cursor since text is unselectable
  .vertical-padding(@treeselect-menu-padding-y);

  display: block;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  // IE9 does not properly handle `width: 100%` with scrollbar when `box-sizing: border-box`
  width: auto;
  border: 1px solid @treeselect-control-border-color-active;
  background: @treeselect-menu-bg;
  line-height: @treeselect-menu-line-height;
  // https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
  -webkit-overflow-scrolling: touch;

  .vue-treeselect--open-below & {
    .border-radius-bottom(@treeselect-border-radius-lg);

    top: 0;
    margin-top: (-@treeselect-control-border-width);
    border-top-color: @treeselect-control-menu-divider-color;
    box-shadow: @treeselect-menu-box-shadow;
  }

  .vue-treeselect--open-above & {
    .border-radius-top(@treeselect-border-radius-lg);

    bottom: 0;
    margin-bottom: (-@treeselect-control-border-width);
    border-bottom-color: @treeselect-control-menu-divider-color;
  }
}

.generate-level-indentations(@i) when (@i >= 0) {
  .generate-level-indentations((@i - 1));

  .vue-treeselect__indent-level-@{i} {
    .vue-treeselect__option {
      padding-left: @treeselect-padding + @i * @treeselect-narrow-cell-width;

      [dir="rtl"] & {
        padding-left: @treeselect-padding;
        padding-right: @treeselect-padding + @i * @treeselect-narrow-cell-width;
      }
    }

    .vue-treeselect__tip {
      padding-left: @treeselect-padding + (@i + 1) * @treeselect-narrow-cell-width;

      [dir="rtl"] & {
        padding-left: @treeselect-padding;
        padding-right: @treeselect-padding + (@i + 1) * @treeselect-narrow-cell-width;
      }
    }
  }
}
.generate-level-indentations(@treeselect-max-level);

.vue-treeselect__option {
  .row();
}

.vue-treeselect__option--highlight {
  background: @treeselect-option-bg-highlight;
}

.vue-treeselect__option--selected {
  // note that these should override `.vue-treeselect__option--highlight`
  .vue-treeselect--single & {
    background: @treeselect-option-selected-bg;
    font-weight: 600;

    &:hover {
      background: @treeselect-option-selected-bg-hover;
    }
  }
}

.vue-treeselect__option--hide {
  display: none;
}

.vue-treeselect__option-arrow-container,
.vue-treeselect__option-arrow-placeholder {
  .narrow-cell();
}

.vue-treeselect__option-arrow-container {
  .clickable();
}

.vue-treeselect__option-arrow {
  display: inline-block;
  width: @treeselect-arrow-size;
  height: @treeselect-arrow-size;
  color: @treeselect-arrow-color;
  vertical-align: middle;
  transition: @treeselect-transition-duration transform @treeselect-arrow-transition-timing-function;
  transform: rotateZ(-90deg);

  [dir="rtl"] & {
    transform: rotateZ(90deg);
  }

  .vue-treeselect__option-arrow-container:hover &,
  .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover & {
    color: @treeselect-arrow-color-hover;
  }
}

.vue-treeselect__option-arrow--rotated {
  transform: rotateZ(0);

  [dir="rtl"] & {
    transform: rotateZ(0);
  }

  &.vue-treeselect__option-arrow--prepare-enter {
    transform: rotateZ(-90deg) !important; // stylelint-disable-line declaration-no-important

    [dir="rtl"] & {
      transform: rotateZ(90deg) !important; // stylelint-disable-line declaration-no-important
    }
  }
}

.vue-treeselect__label-container {
  .cell();
  .clickable();

  display: table;
  width: 100%;
  table-layout: fixed;
  color: @treeselect-option-label-color;

  .vue-treeselect__option--disabled & {
    .forbidden();

    color: @treeselect-option-label-color-disabled;
  }
}

.vue-treeselect__checkbox-container {
  display: table-cell;
  width: @treeselect-narrow-cell-width;
  min-width: @treeselect-narrow-cell-width;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.vue-treeselect__checkbox {
  display: block;
  margin: auto;
  width: @treeselect-checkbox-size;
  height: @treeselect-checkbox-size;
  border-width: 1px;
  border-style: solid;
  border-radius: @treeselect-border-radius-sm;
  position: relative;
  transition: @treeselect-transition-duration all @ease-out-circ;
}

.vue-treeselect__check-mark,
.vue-treeselect__minus-mark {
  display: block;
  position: absolute;
  left: 1px;
  top: 1px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: @treeselect-transition-duration all ease;
}

.vue-treeselect__minus-mark {
  width: image-width(@treeselect-checkbox-indeterminate-icon);
  height: image-height(@treeselect-checkbox-indeterminate-icon);
  // Svg icons are rendered differently in different browsers thus unacceptable.
  // Png provides the best consistency with a drawback that
  // its color can't be controlled by CSS.
  .retina(@treeselect-checkbox-indeterminate-icon, 3);
  background-size: image-size(@treeselect-checkbox-indeterminate-icon);

  .vue-treeselect__checkbox--indeterminate > & {
    opacity: 1;
  }

  .vue-treeselect__checkbox--disabled & {
    .retina(@treeselect-checkbox-disabled-indeterminate-icon, 3);
  }
}

.vue-treeselect__check-mark {
  width: image-width(@treeselect-checkbox-checked-icon);
  height: image-height(@treeselect-checkbox-checked-icon);
  .retina(@treeselect-checkbox-checked-icon, 3);
  background-size: image-size(@treeselect-checkbox-checked-icon);
  // Set initial height to 1px.
  transform: scaleY(1 / unit(image-height(@treeselect-checkbox-checked-icon)));

  .vue-treeselect__checkbox--checked > & {
    opacity: 1;
    transform: scaleY(1);
  }

  .vue-treeselect__checkbox--disabled & {
    .retina(@treeselect-checkbox-disabled-checked-icon, 3);
  }
}

.vue-treeselect__checkbox--unchecked {
  border-color: @treeselect-checkbox-border-color;
  background: @treeselect-checkbox-bg;

  .vue-treeselect__label-container:hover & {
    border-color: @treeselect-checkbox-border-color-hover;
    background: @treeselect-checkbox-bg-hover;
  }
}

.vue-treeselect__checkbox--indeterminate {
  border-color: @treeselect-checkbox-indeterminate-border-color;
  background: @treeselect-checkbox-indeterminate-bg;

  .vue-treeselect__label-container:hover & {
    border-color: @treeselect-checkbox-indeterminate-border-color-hover;
    background: @treeselect-checkbox-indeterminate-bg-hover;
  }
}

.vue-treeselect__checkbox--checked {
  border-color: @treeselect-checkbox-checked-border-color;
  background: @treeselect-checkbox-checked-bg;

  .vue-treeselect__label-container:hover & {
    border-color: @treeselect-checkbox-checked-border-color-hover;
    background: @treeselect-checkbox-checked-bg-hover;
  }
}

.vue-treeselect__checkbox--disabled {
  border-color: @treeselect-checkbox-disabled-border-color;
  background-color: @treeselect-checkbox-disabled-bg-color;

  .vue-treeselect__label-container:hover & {
    border-color: @treeselect-checkbox-disabled-border-color;
    background-color: @treeselect-checkbox-disabled-bg-color;
  }
}


.vue-treeselect__label {
  .text-truncate();

  display: table-cell;
  padding-left: @treeselect-padding;
  max-width: 100%;
  vertical-align: middle;
  cursor: inherit; // override user agent style

  [dir="rtl"] & {
    padding-left: 0;
    padding-right: @treeselect-padding;
  }
}

.vue-treeselect__count {
  margin-left: @treeselect-padding;
  font-weight: 400;
  opacity: 0.6;

  [dir="rtl"] & {
    margin-left: 0;
    margin-right: @treeselect-padding;
  }
}

.vue-treeselect__tip {
  .row();

  color: @treeselect-tip-color;
}

.vue-treeselect__tip-text {
  .wide-cell();

  font-size: @treeselect-tip-font-size;
}

.vue-treeselect__retry {
  .vue-treeselect__error-tip & {
    .clickable();

    margin-left: @treeselect-padding;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    color: @treeselect-retry-text-color;

    [dir="rtl"] & {
      margin-left: 0;
      margin-right: @treeselect-padding;
    }
  }
}

.vue-treeselect__icon-container {
  .narrow-cell();

  .vue-treeselect--single & {
    padding-left: @treeselect-padding;

    [dir="rtl"] & {
      padding-left: 0;
      padding-right: @treeselect-padding;
    }
  }
}

.vue-treeselect__icon-warning {
  .icon();
  .rounded();

  position: relative;
  width: @treeselect-icon-size;
  height: @treeselect-icon-size;
  background: @treeselect-warning-icon-bg;

  &::after {
    display: block;
    position: absolute;
    content: "";
    left: 5px;
    top: 2.5px;
    width: 2px;
    height: 1px;
    border: 0 solid #fff;
    border-top-width: 5px;
    border-bottom-width: 1px;
  }
}

.vue-treeselect__icon-error {
  .icon();
  .rounded();

  @stroke-length: 6px;

  position: relative;
  width: @treeselect-icon-size;
  height: @treeselect-icon-size;
  background: @treeselect-error-icon-bg;

  &::before,
  &::after {
    display: block;
    position: absolute;
    content: "";
    background: #fff;
    transform: rotate(45deg);
  }

  &::before {
    width: @stroke-length;
    height: 2px;
    left: 3px;
    top: 5px;
  }

  &::after {
    width: 2px;
    height: @stroke-length;
    left: 5px;
    top: 3px;
  }
}

.vue-treeselect__icon-loader {
  .icon();

  position: relative;
  width: @treeselect-icon-size;
  height: @treeselect-icon-size;
  text-align: center;
  animation: @treeselect-loader-animation-duration vue-treeselect-animation-rotate linear infinite;

  &::before,
  &::after {
    .rounded();

    position: absolute;
    content: "";
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    animation: @treeselect-loader-animation-duration vue-treeselect-animation-bounce ease-in-out infinite;
  }

  &::before {
    background: @treeselect-loader-color-dark;
  }

  &::after {
    background: @treeselect-loader-color-light;
    animation-delay: -(@treeselect-loader-animation-duration / 2);
  }
}


/**
 * Menu Portal
 */

.vue-treeselect__menu-placeholder {
  display: none;
}

.vue-treeselect__portal-target {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: visible;
  box-sizing: border-box;
}