xdesign-vue-next/es/tree-select/style/index.css

XDesign Component for vue-next

.x-tree-select {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-tree-select--without-input input {
  display: none;
}
.x-tree-select--without-input .x-input__suffix-icon {
  margin-left: auto;
}
.x-tree-select .x-fake-arrow {
  transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  color: var(--td-text-color-placeholder);
}
.x-tree-select .x-fake-arrow--highlight {
  color: var(--td-text-color-brand);
}
.x-tree-select .x-fake-arrow--disable {
  color: var(--td-text-color-disabled);
}
.x-tree-select--placeholder {
  color: var(--td-text-color-placeholder);
}
.x-tree-select.x-single-suffix {
  padding-right: 20px;
}
.x-tree-select.x-tag-prefix {
  padding-left: 4px;
}
.x-tree-select-popup .x-popup__content {
  scrollbar-color: var(--td-scrollbar-color) transparent;
  scrollbar-width: thin;
  padding: var(--td-pop-padding-m);
  max-height: 300px;
  overflow-y: auto;
}
.x-tree-select-popup .x-popup__content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.x-tree-select-popup .x-popup__content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: var(--td-scrollbar-color);
  border-radius: 15px;
}
.x-tree-select-popup .x-popup__content::-webkit-scrollbar-thumb:vertical:hover,
.x-tree-select-popup .x-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: var(--td-scrollbar-hover-color);
}