shineout/css/Cascader/styles/cascader.css

Shein 前端组件库

.so-cascader {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-cascader:focus {
  outline: none;
}
.so-cascader-result {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 105px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  overflow-y: auto;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.so-cascader-result-ltr {
  padding: 6px 24px 0 12px;
}
.so-cascader-result-rtl {
  padding: 6px 12px 0 24px;
}
.so-cascader-result .so-input-placeholder {
  color: var(--input-placeholder-color, #999);
}
.so-cascader-result > span,
.so-cascader-result .so-cascader-item {
  display: inline-block;
  overflow: hidden;
  max-width: 80%;
  padding: 0 var(--select-result-padding-horizontal, 4px);
  margin-bottom: 6px;
  border-radius: 3px;
  color: inherit;
  text-overflow: ellipsis;
  position: relative;
}
.so-cascader-result > span-ltr,
.so-cascader-result .so-cascader-item-ltr {
  margin-right: var(--select-result-padding-horizontal, 4px);
}
.so-cascader-result > span-rtl,
.so-cascader-result .so-cascader-item-rtl {
  margin-left: var(--select-result-padding-horizontal, 4px);
}
.so-cascader-result > span-compressed,
.so-cascader-result .so-cascader-item-compressed {
  padding: 0 8px;
  font-size: 80%;
  opacity: 0.9;
}
.so-cascader-result > span-compressed > span,
.so-cascader-result .so-cascader-item-compressed > span {
  letter-spacing: 2px;
  padding: 0;
  margin: 0;
  overflow: visible;
  max-width: none;
}
.so-cascader-result > span:after,
.so-cascader-result .so-cascader-item:after {
  content: '\feff ';
}
.so-cascader-result > span.so-cascader-remove-container-ltr,
.so-cascader-result .so-cascader-item.so-cascader-remove-container-ltr {
  padding-right: 16px;
}
.so-cascader-result > span.so-cascader-remove-container-rtl,
.so-cascader-result .so-cascader-item.so-cascader-remove-container-rtl {
  padding-left: 16px;
}
.so-cascader-result > span.so-cascader-remove-container:after,
.so-cascader-result .so-cascader-item.so-cascader-remove-container:after {
  content: none;
}
.so-cascader-result > span .so-cascader-single-remove,
.so-cascader-result .so-cascader-item .so-cascader-single-remove {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
}
.so-cascader-result > span .so-cascader-single-remove-ltr,
.so-cascader-result .so-cascader-item .so-cascader-single-remove-ltr {
  right: 8px;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.so-cascader-result > span .so-cascader-single-remove-rtl,
.so-cascader-result .so-cascader-item .so-cascader-single-remove-rtl {
  left: 8px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.so-cascader-result > span .so-cascader-single-remove svg,
.so-cascader-result .so-cascader-item .so-cascader-single-remove svg {
  width: 6px;
  height: 6px;
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
}
.so-cascader-result > span .so-cascader-single-remove svg path,
.so-cascader-result .so-cascader-item .so-cascader-single-remove svg path {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  fill: var(--gray-500, #adb5bd);
}
.so-cascader-result > span .so-cascader-single-remove:hover svg path,
.so-cascader-result .so-cascader-item .so-cascader-single-remove:hover svg path {
  fill: var(--primary-color, #3399ff);
}
.so-cascader-result .so-cascader-item {
  background: var(--gray-100, #f8f9fa);
  font-size: var(--font-size-base, 14px);
  color: var(--gray-700, #495057);
}
.so-cascader-result .so-cascader-item-disabled {
  cursor: not-allowed;
  color: var(--input-disabled-color, #999DA8);
}
.so-cascader-result .so-cascader-input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 12px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 6px;
  outline: none;
  cursor: text;
  white-space: pre;
}
.so-cascader-result .so-cascader-input:after {
  content: '\feff ';
}
.so-cascader-result .so-cascader-input.so-cascader-full {
  display: block;
}
.so-cascader-disabled .so-cascader-result {
  cursor: not-allowed;
}
.so-cascader-disabled .so-cascader-result .so-cascader-item {
  cursor: not-allowed;
  background-color: inherit;
  color: inherit;
}
.so-cascader-disabled .so-cascader-result .so-select-multi {
  visibility: visible;
  cursor: not-allowed;
}
.so-cascader:not(.so-cascader-disabled).so-cascader-focus .so-cascader-close,
.so-cascader:not(.so-cascader-disabled) .so-cascader-result:hover .so-cascader-close,
.so-cascader:not(.so-cascader-disabled) .so-cascader-title-box:hover .so-cascader-close {
  display: block;
}
.so-cascader:not(.so-cascader-disabled).so-cascader-focus .so-cascader-result-clearable .so-select-multi,
.so-cascader:not(.so-cascader-disabled) .so-cascader-result-clearable:hover .so-select-multi,
.so-cascader:not(.so-cascader-disabled) .so-cascader-title-box:hover .so-cascader-result-clearable .so-select-multi {
  visibility: hidden;
}
.so-cascader-multiple .so-cascader-close-ltr {
  right: 19px;
}
.so-cascader-multiple .so-cascader-close-rtl {
  left: 19px;
}
div.so-cascader-options {
  width: auto;
  white-space: nowrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  font-size: var(--font-size-base, 14px);
}
.so-cascader-focus .so-cascader-options {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.so-cascader-compressed.so-cascader-result {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.so-cascader-compressed.so-cascader-result-ltr {
  padding: 6px 34px 0 12px;
}
.so-cascader-compressed.so-cascader-result-rtl {
  padding: 6px 12px 0 34px;
}
.so-cascader-compressed.so-cascader-result .so-cascader-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.so-cascader-compressed.so-cascader-result .so-cascader-item-only {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
.so-cascader-compressed.so-cascader-result .so-cascader-input {
  white-space: nowrap;
}
.so-cascader-compressed.so-cascader-result .so-cascader-close-ltr {
  right: 9px;
}
.so-cascader-compressed.so-cascader-result .so-cascader-close-rtl {
  left: 9px;
}
.so-cascader-no-data {
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 6px 24px 6px 12px;
  color: var(--gray-500, #adb5bd);
  font-size: var(--font-size-base, 14px);
  line-height: var(--common-line-height, 1.42857143);
  text-overflow: ellipsis;
  -webkit-transition: none;
  transition: none;
  white-space: nowrap;
}
.so-input-rtl .so-cascader-no-data,
.so-list-rtl .so-cascader-no-data {
  padding: 6px 12px 6px 24px;
}
.so-cascader-no-data:hover {
  color: var(--select-item-active-color, #292d32);
}
.so-cascader-list-loading {
  padding: 6px 12px;
}
.so-cascader-list {
  display: inline-block;
  min-width: 120px;
  height: 100%;
  overflow-y: auto;
  vertical-align: top;
}
.so-cascader-list-ltr {
  border-right: solid 1px var(--gray-200, #e9ecef);
}
.so-cascader-list-rtl {
  border-left: solid 1px var(--gray-200, #e9ecef);
}
.so-cascader-node {
  position: relative;
  padding: 6px 28px 6px 12px;
  color: var(--gray-800, #343a40);
  white-space: nowrap;
}
.so-input-rtl .so-cascader-node,
.so-list-rtl .so-cascader-node {
  padding: 6px 12px 6px 28px;
}
.so-cascader-node:hover {
  background-color: #f5f5f5;
}
.so-cascader-node.so-cascader-disabled {
  color: var(--gray-400, #ced4da);
  cursor: not-allowed;
}
.so-cascader-node.so-cascader-disabled:hover {
  background-color: transparent;
}
.so-cascader-loading {
  position: absolute;
  top: 10px;
  right: 12px;
}
.so-input-rtl .so-cascader-loading,
.so-list-rtl .so-cascader-loading {
  right: auto;
  left: 12px;
}
.so-cascader-has-children .so-cascader-caret,
.so-cascader-may-be-children .so-cascader-caret {
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
}
.so-cascader-has-children .so-cascader-caret-ltr,
.so-cascader-may-be-children .so-cascader-caret-ltr {
  right: 12px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
      -ms-transform: translateY(-50%) rotate(-90deg);
          transform: translateY(-50%) rotate(-90deg);
}
.so-cascader-has-children .so-cascader-caret-rtl,
.so-cascader-may-be-children .so-cascader-caret-rtl {
  left: 12px;
  -webkit-transform: translateY(-50%) rotate(90deg);
      -ms-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
.so-cascader-may-be-children .so-cascader-caret {
  fill: var(--gray-300, #dee2e6);
}
.so-cascader-active {
  background-color: var(--cascader-active-background-color, var(--select-item-active-bg, #f5f5f5));
  color: var(--cascader-active-color, var(--select-item-active-color, #292d32));
  text-decoration: none;
}
.so-cascader-active.so-cascader-node {
  background-color: var(--cascader-active-background-color, var(--select-item-active-bg, #f5f5f5));
  color: var(--cascader-active-color, var(--select-item-active-color, #292d32));
}
div.so-cascader-filter {
  display: block;
  min-width: 100%;
  width: auto;
}
div.so-cascader-filter-list {
  overflow: auto;
}
div.so-cascader-filter-list-separator {
  margin: 0 4px;
}
div.so-cascader-filter-list-content {
  display: inline-block;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
div.so-cascader-filter-list-content.so-cascader-disabled {
  color: var(--gray-400, #ced4da);
  cursor: not-allowed;
}
div.so-cascader-filter-list .so-cascader-node {
  cursor: pointer;
}
div.so-cascader-filter:not(.so-cascader-leaf-only) .so-cascader-filter-list-content:not(.so-cascader-disabled):hover {
  color: var(--primary-color, #3399ff);
}
.so-cascader-popover .so-cascader-result {
  max-height: 112px;
  max-width: 300px;
  padding: 14px 14px 8px 14px;
}
.so-cascader-popover .so-cascader-result .so-cascader-item {
  max-width: none;
}
.so-cascader-rtl {
  direction: rtl;
  text-align: start;
}
.so-input.so-input-small .so-cascader-result {
  padding-top: 2px;
}
.so-input.so-input-small .so-cascader-result .so-input-placeholder,
.so-input.so-input-small .so-cascader-result .so-cascader-item,
.so-input.so-input-small .so-cascader-result .so-cascader-input {
  margin-bottom: 2px;
  font-size: var(--font-size-small, 12px);
}
.so-input.so-input-large .so-cascader-result {
  padding-top: 8px;
}
.so-input.so-input-large .so-cascader-result .so-input-placeholder,
.so-input.so-input-large .so-cascader-result .so-cascader-item,
.so-input.so-input-large .so-cascader-result .so-cascader-input {
  margin-bottom: 8px;
  font-size: var(--font-size-large, 18px);
}
.so-cascader-result.so-cascader-large .so-cascader-item {
  font-size: var(--font-size-large, 18px);
}
.so-cascader-result.so-cascader-small .so-cascader-item {
  font-size: var(--font-size-small, 12px);
}
.so-cascader-title-box .so-cascader-title-box-title-ltr,
.so-input-title-box.so-cascader-title-box .so-cascader-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-cascader-small .so-cascader-title-box .so-cascader-title-box-title-ltr,
.so-cascader-small .so-input-title-box.so-cascader-title-box .so-cascader-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-cascader-large .so-cascader-title-box .so-cascader-title-box-title-ltr,
.so-cascader-large .so-input-title-box.so-cascader-title-box .so-cascader-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-cascader-title-box .so-cascader-title-box-title-rtl,
.so-input-title-box.so-cascader-title-box .so-cascader-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-cascader-small .so-cascader-title-box .so-cascader-title-box-title-rtl,
.so-cascader-small .so-input-title-box.so-cascader-title-box .so-cascader-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-cascader-large .so-cascader-title-box .so-cascader-title-box-title-rtl,
.so-cascader-large .so-input-title-box.so-cascader-title-box .so-cascader-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-cascader-title-box .so-cascader-title-box-title-compressed.so-cascader-title-box-title-ltr,
.so-cascader-title-box .so-cascader-compressed.so-cascader-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-cascader-small .so-cascader-title-box .so-cascader-title-box-title-compressed.so-cascader-title-box-title-ltr,
.so-cascader-small .so-cascader-title-box .so-cascader-compressed.so-cascader-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-cascader-large .so-cascader-title-box .so-cascader-title-box-title-compressed.so-cascader-title-box-title-ltr,
.so-cascader-large .so-cascader-title-box .so-cascader-compressed.so-cascader-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-cascader-title-box .so-cascader-title-box-title-compressed.so-cascader-title-box-title-rtl,
.so-cascader-title-box .so-cascader-compressed.so-cascader-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-cascader-small .so-cascader-title-box .so-cascader-title-box-title-compressed.so-cascader-title-box-title-rtl,
.so-cascader-small .so-cascader-title-box .so-cascader-compressed.so-cascader-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-cascader-large .so-cascader-title-box .so-cascader-title-box-title-compressed.so-cascader-title-box-title-rtl,
.so-cascader-large .so-cascader-title-box .so-cascader-compressed.so-cascader-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-cascader-title-box > .so-input-title-box-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-cascader-title-box .so-cascader-result .so-input-placeholder,
.so-cascader-title-box .so-cascader-result .so-cascader-item,
.so-cascader-title-box .so-cascader-result .so-cascader-input {
  margin-bottom: 4px;
}
.so-cascader-small .so-cascader-title-box .so-cascader-result .so-input-placeholder,
.so-cascader-small .so-cascader-title-box .so-cascader-result .so-cascader-item,
.so-cascader-small .so-cascader-title-box .so-cascader-result .so-cascader-input {
  margin-bottom: 2px;
}
.so-cascader-large .so-cascader-title-box .so-cascader-result .so-input-placeholder,
.so-cascader-large .so-cascader-title-box .so-cascader-result .so-cascader-item,
.so-cascader-large .so-cascader-title-box .so-cascader-result .so-cascader-input {
  margin-bottom: 4px;
}