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

XDesign Component for vue-next

.x-select__wrap {
  width: 100%;
}
.x-select__dropdown .x-popup__content {
  scrollbar-color: var(--td-scrollbar-color) transparent;
  scrollbar-width: thin;
  margin: var(--td-comp-paddingTB-s) 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--td-shadow-2);
}
.x-select__dropdown .x-popup__content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.x-select__dropdown .x-popup__content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: var(--td-scrollbar-color);
  border-radius: 15px;
}
.x-select__dropdown .x-popup__content::-webkit-scrollbar-thumb:vertical:hover,
.x-select__dropdown .x-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: var(--td-scrollbar-hover-color);
}
.x-select__dropdown-inner .x-select__list .x-select__list {
  padding: 0;
}
.x-select__dropdown-inner .x-select__list,
.x-select__dropdown-inner .x-tree {
  padding: var(--td-pop-padding-m);
}
.x-select__dropdown-inner--size-s .x-select__list,
.x-select__dropdown-inner--size-s .x-tree {
  padding: var(--td-pop-padding-s);
}
.x-select__dropdown-inner--size-l .x-select__list,
.x-select__dropdown-inner--size-l .x-tree {
  padding: var(--td-pop-padding-l);
}
.x-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-select__dropdown.x-popup {
  padding: 0;
}
.x-select__empty.x-size-s {
  line-height: var(--td-comp-size-xs);
}
.x-select__empty {
  text-align: center;
  color: var(--td-text-color-disabled);
  line-height: var(--td-comp-size-m);
  padding: 0 var(--td-comp-paddingLR-s);
}
.x-select__empty.x-size-l {
  line-height: var(--td-comp-size-xl);
}
.x-select__loading-tips.x-size-s {
  line-height: var(--td-comp-size-xs);
}
.x-select__loading-tips {
  text-align: center;
  line-height: var(--td-comp-size-m);
  color: var(--td-text-color-disabled);
}
.x-select__loading-tips.x-size-l {
  line-height: var(--td-comp-size-xl);
}
.x-select-option-group + .x-select-option-group {
  padding-top: var(--td-comp-margin-xs);
  margin-top: var(--td-comp-margin-xs);
}
.x-select-option-group__divider + .x-select-option-group__divider {
  position: relative;
}
.x-select-option-group__divider + .x-select-option-group__divider::before {
  content: "";
  width: 100%;
  height: 1px;
  padding: 0 var(--td-comp-paddingLR-s);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: var(--td-border-level-1-color);
  background-clip: content-box;
}
ul.x-select-option-group__header,
.x-select-option-group__header {
  color: var(--td-text-color-placeholder);
  display: block;
  height: var(--td-comp-size-s);
  line-height: var(--td-comp-size-s);
  padding: 0 var(--td-comp-paddingLR-s);
  box-sizing: border-box;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-select-option-group__header.x-size-l {
  height: var(--td-comp-size-l);
  line-height: var(--td-comp-size-l);
  padding: 0 var(--td-comp-paddingLR-m);
}
.x-select-option-group__header.x-size-s {
  height: var(--td-comp-size-xxs);
  line-height: var(--td-comp-size-xxs);
  padding: 0 var(--td-comp-paddingLR-s);
}
.x-select-option {
  display: flex;
  align-items: center;
  border-radius: var(--td-radius-default);
  height: var(--td-comp-size-s);
  font: var(--td-font-body-medium);
  cursor: pointer;
  padding: 0 var(--td-comp-paddingLR-s);
  color: var(--td-text-color-primary);
  transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  box-sizing: border-box;
  --ripple-color: var(--td-bg-color-container-active);
}
.x-select-option span {
  position: relative;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-select-option:not(.x-is-disabled):not(.x-is-selected):hover {
  background-color: var(--td-bg-color-container-hover);
}
.x-select-option:not(.x-is-disabled):not(.x-is-selected):hover .x-checkbox__label {
  color: inherit;
}
.x-select-option:not(.x-is-disabled):not(.x-is-selected):hover .x-checkbox__input {
  border-color: var(--td-brand-color);
}
.x-select-option .x-checkbox__label {
  color: var(--td-text-color-primary);
  flex: 1;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-select-option .x-checkbox {
  width: 100%;
}
.x-select-option.x-is-disabled {
  cursor: not-allowed;
  color: var(--td-text-color-disabled);
  background: var(--td-bg-color-specialcomponent);
}
.x-select-option.x-is-disabled:hover,
.x-select-option.x-is-disabled :active {
  background: var(--td-bg-color-specialcomponent);
}
.x-select-option.x-size-l {
  height: var(--td-comp-size-l);
  padding: 0 var(--td-comp-paddingLR-m);
  font: var(--td-font-body-large);
}
.x-select-option.x-size-m {
  font: var(--td-font-body-medium);
}
.x-select-option.x-size-s {
  height: var(--td-comp-size-xxs);
  padding: 0 var(--td-comp-paddingLR-s);
  font: var(--td-font-body-small);
}
.x-select-option.x-is-selected {
  color: var(--td-brand-color);
  background-color: var(--td-brand-color-light);
  transition: all 0.2s linear;
}
.x-select-option.x-is-selected .x-checkbox__label {
  color: var(--td-brand-color);
}
.x-select-option.x-is-selected:hover {
  background-color: var(--td-brand-color-light);
}
/** 规范 CSS 类名为 --hover */
.x-select-option.x-select-option__hover:not(.x-is-disabled).x-select-option.x-select-option__hover:not(.x-is-selected),
.x-select-option.x-select-option__hover:not(.x-is-disabled).x-select-option.x-select-option--hover:not(.x-is-selected),
.x-select-option.x-select-option--hover:not(.x-is-disabled).x-select-option.x-select-option__hover:not(.x-is-selected),
.x-select-option.x-select-option--hover:not(.x-is-disabled).x-select-option.x-select-option--hover:not(.x-is-selected) {
  background-color: var(--td-bg-color-container-hover);
}
.x-select-option.x-select-option__hover:not(.x-is-disabled).x-select-option.x-select-option__hover:not(.x-is-selected) .x-checkbox__input,
.x-select-option.x-select-option__hover:not(.x-is-disabled).x-select-option.x-select-option--hover:not(.x-is-selected) .x-checkbox__input,
.x-select-option.x-select-option--hover:not(.x-is-disabled).x-select-option.x-select-option__hover:not(.x-is-selected) .x-checkbox__input,
.x-select-option.x-select-option--hover:not(.x-is-disabled).x-select-option.x-select-option--hover:not(.x-is-selected) .x-checkbox__input {
  border-color: var(--td-brand-color);
}
.x-select-option.x-select-option__hover .x-checkbox__label,
.x-select-option.x-select-option--hover .x-checkbox__label {
  color: inherit;
}
.x-select-option + .x-select-option {
  margin-top: var(--td-comp-paddingTB-xxs);
}
.x-select.x-select-input--borderless .x-select__right-icon {
  position: relative;
  margin: 0;
}
.x-select .x-fake-arrow {
  color: var(--td-text-color-placeholder);
}
.x-select .x-fake-arrow--active {
  color: var(--td-brand-color);
}