@qvant/qui-max/dist/css/q-cascader.css

A Vue 3 Design system for Web.

.q-cascader-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.q-cascader-input .q-input {
  height: inherit;
}
.q-cascader-input .q-input__inner {
  height: 100%;
  padding-right: 40px;
  text-overflow: ellipsis;
  user-select: none;
}
.q-cascader:not(.q-cascader_disabled) .q-cascader-input .q-input__inner,
.q-cascader:not(.q-cascader_disabled) .q-cascader-input .q-input__suffix {
  cursor: pointer;
}
.q-cascader-input__icon-arrow {
  transition: transform 0.3s;
}
.q-cascader-input__icon-arrow_reverse {
  transform: rotateZ(180deg);
}
.q-cascader-input__icon-close {
  display: none;
  pointer-events: all;
}
.q-cascader-input:hover .q-cascader-input__icon-close {
  display: block;
}
.q-cascader-input:hover .q-cascader-input__icon-close + .q-cascader-input__icon-arrow {
  display: none;
}

.q-cascader-dropdown__wrapper {
  display: flex;
  align-items: flex-start;
}
.q-cascader-dropdown__wrapper_animation-enter-active, .q-cascader-dropdown__wrapper_animation-leave-active {
  transition: opacity 0.25s var(--transition-spline-base), transform 0.25s var(--transition-spline-base);
}
.q-cascader-dropdown__wrapper_animation-enter-from, .q-cascader-dropdown__wrapper_animation-leave-to {
  opacity: 0;
  transform: translateX(8px);
}

.q-cascader-column {
  background-color: var(--color-tertiary-gray-light);
  box-shadow: var(--box-shadow-secondary);
}
.q-cascader-column:not(:first-child) {
  border-left: 1px solid var(--color-tertiary-gray-dark);
}
.q-cascader-column__scrollbar {
  max-height: 204px;
}
.q-cascader-column_left-bottom-border,
.q-cascader-column_left-bottom-border .q-cascader-column__scrollbar {
  border-top-left-radius: var(--border-radius-base);
  border-bottom-left-radius: var(--border-radius-base);
}
.q-cascader-column_right-bottom-border,
.q-cascader-column_right-bottom-border .q-cascader-column__scrollbar {
  border-top-right-radius: var(--border-radius-base);
  border-bottom-right-radius: var(--border-radius-base);
}
.q-cascader-column:first-child,
.q-cascader-column:first-child .q-cascader-column__scrollbar {
  border-top-left-radius: var(--border-radius-base);
  border-bottom-left-radius: var(--border-radius-base);
}
.q-cascader-column:last-child,
.q-cascader-column:last-child .q-cascader-column__scrollbar {
  border-top-right-radius: var(--border-radius-base);
  border-bottom-right-radius: var(--border-radius-base);
}

.q-cascader-row {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  min-width: 200px;
  max-width: 300px;
  min-height: 40px;
  color: var(--color-primary-blue);
  cursor: pointer;
  background-color: var(--color-tertiary-gray-light);
  box-shadow: var(--box-shadow-pressed);
}
.q-cascader-row:not(:first-child) {
  border-top: 1px solid var(--color-tertiary-gray-dark);
}
.q-cascader-row:not(.q-cascader-row_disabled):focus {
  outline: none;
}
.q-cascader-row:not(.q-cascader-row_disabled):hover, .q-cascader-row:not(.q-cascader-row_disabled).focus-visible {
  color: var(--color-primary-black);
  background-color: var(--color-tertiary-gray);
}
.q-cascader-column:last-child .q-cascader-row:first-child {
  border-top-right-radius: var(--border-radius-base);
}
.q-cascader-column:first-child .q-cascader-row:first-child {
  border-top-left-radius: var(--border-radius-base);
}
.q-cascader-column:last-child .q-cascader-row:last-child {
  border-bottom-right-radius: var(--border-radius-base);
}
.q-cascader-column:first-child .q-cascader-row:last-child {
  border-bottom-left-radius: var(--border-radius-base);
}
.q-cascader-row_disabled {
  color: rgb(var(--color-rgb-gray)/64%);
  cursor: not-allowed;
}
.q-cascader-row_expanded {
  color: var(--color-primary-black);
  background-color: var(--color-tertiary-gray-ultra-light);
}
.q-cascader_single .q-cascader-row_checked {
  color: var(--color-primary-black);
  background-color: var(--color-tertiary-gray-ultra-light);
}
.q-cascader-row__checkbox {
  height: 40px;
  padding: 8px;
}
.q-cascader-row__label {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-cascader-row__label:first-child {
  margin-left: 16px;
}
.q-cascader-row__icon {
  width: 40px;
  padding: 8px;
  margin-left: auto;
  font-size: 24px;
  transition: transform 0.3s;
}
.q-cascader-row__icon_reverse {
  transform: rotateZ(180deg);
}

.q-cascader-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% - 40px);
  padding: 8px 0 8px 8px;
  white-space: normal;
  pointer-events: none;
}
.q-cascader-tags_collapse-tags {
  flex-wrap: nowrap;
}
.q-cascader-tags_collapse-tags .q-tag + .q-tag {
  flex-shrink: 0;
}

.q-cascader {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  vertical-align: middle;
}
.q-cascader__dropdown_animation-enter-active, .q-cascader__dropdown_animation-leave-active {
  transition: opacity var(--transition-spline-base) 0.25s;
}
.q-cascader__dropdown_animation-enter-active .q-cascader-column, .q-cascader__dropdown_animation-leave-active .q-cascader-column {
  transition: margin-top var(--transition-spline-base) 0.25s;
}
.q-cascader__dropdown_animation-enter-from, .q-cascader__dropdown_animation-leave-to {
  opacity: 0;
}
.q-cascader__dropdown_animation-enter-from .q-cascader-column, .q-cascader__dropdown_animation-leave-to .q-cascader-column {
  margin-top: -8px;
}