xy-select/assets/index.css

基于React的下拉列表组件

.xy-select{font-family:Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;color:rgba(0,0,0,0.65);-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;outline:0}.xy-select-single .xy-select-box{position:relative;height:32px;overflow:hidden;cursor:pointer}.xy-select-single .xy-select-box__rendered{height:32px}.xy-select-multiple .xy-select-box{min-height:32px;padding-bottom:3px;cursor:text;zoom:1}.xy-select-multiple .xy-select-box::before,.xy-select-multiple .xy-select-box::after{content:"";display:table}.xy-select-multiple .xy-select-box::after{clear:both}.xy-select-multiple.xy-select ul{min-height:32px;padding-top:3px;zoom:1}.xy-select-multiple .xy-select-box__placeholder{padding:0 10px}.xy-select-multiple .xy-select-search__wrap{padding:0 6px}.xy-select-multiple .xy-select-item{animation:SelectItemIn 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);animation-fill-mode:"forwards"}.xy-select-multiple .xy-select-item.xy-select-item-out{animation:SelectItemOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)}.xy-select-multiple .xy-select-item.xy-select-item-state-exited{display:none}.xy-select-multiple .xy-select-box__arrow{display:none}.xy-select-multiple .xy-select-box__rendered{height:auto;margin-left:3px;margin-right:3px}.xy-select-disabled{color:rgba(0,0,0,0.25)}.xy-select-disabled .xy-select-box{background:#f5f5f5;cursor:not-allowed}.xy-select-visible .xy-select-box__arrow span{transform:rotate(90deg)}.xy-select-single.xy-select-searchMode .xy-select-item{display:block;opacity:1}.xy-select-single.xy-select-searchMode .xy-select-search--inline{display:none}.xy-select-single.xy-select-searchMode.xy-select-visible .xy-select-item{display:block;opacity:0.4}.xy-select-single.xy-select-searchMode.xy-select-visible .xy-select-search--inline{display:block}.xy-select-single.xy-select-searchMode.xy-select-hide-item .xy-select-item{display:block;opacity:0}.xy-select-single.xy-select-searchMode.xy-select-hide-item .xy-select-box__placeholder{display:none}.xy-select-multiple.xy-select-searchMode .xy-select-search--inline{position:static;float:left;width:auto;max-width:100%;padding:0;height:24px;margin-top:3px;line-height:22px}.xy-select-multiple.xy-select-searchMode .xy-select-box__placeholder{position:absolute;top:50%;left:0;right:9px;color:#bfbfbf;line-height:20px;height:20px;max-width:100%;margin-top:-10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;margin-left:6px;user-select:none}.xy-select-multiple.xy-select-searchMode.xy-select-hide-item .xy-select-box__placeholder{display:none}.xy-select-transition{position:absolute;left:-100%;top:-100%;z-index:103;animation:0.3s slideUpOut}.xy-select-transition.xy-select-transition-state-exited{display:none}.xy-select-transition-open{animation:0.3s slideUpIn}@keyframes slideUpIn{0%{transform:scaleY(0.8);transform-origin:0% 0%;opacity:0}100%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes slideUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}100%{transform:scaleY(0.8);transform-origin:0% 0%;opacity:0}}.xy-select-box{position:relative;display:block;box-sizing:border-box;background-color:#fff;border:1px solid #d9d9d9;border-top-width:1.02px;border-radius:4px;outline:none;transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);user-select:none;font-size:14px}.xy-select-search--inline{position:absolute;width:100%;height:100%;z-index:1;top:0;left:0}.xy-select-search__wrap{position:relative;display:inline-block;width:100%;height:100%}.xy-select-search__field{width:100%;height:100%;font-size:100%;line-height:1;background:transparent;border-width:0;border-radius:4px;outline:0;box-sizing:border-box}.xy-select-search__field[disabled]{cursor:text;background:transparent}.xy-select-has-value .xy-select-search__field{display:none}.xy-select-box__rendered{position:relative;display:block;margin-right:11px;margin-left:11px;line-height:30px;font-size:13px}.xy-select-box__rendered>ul{margin:0;padding:0}.xy-select-box__rendered>ul:after{display:block;content:".";clear:both;line-height:0;visibility:hidden}.xy-select-box__rendered>ul>li{height:24px;margin-top:3px;line-height:22px}.xy-select-box__rendered:after{display:block;content:".";clear:both;line-height:0;visibility:hidden}.xy-select-box__placeholder{color:#bfbfbf;text-align:left}.xy-select-box__arrow{display:inline-block;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;position:absolute;top:15%;right:11px;color:rgba(0,0,0,0.35);line-height:1;font-weight:bold;font-size:22px}.xy-select-box__arrow span{display:inline-block;transform:rotate(-90deg);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.xy-select-box:focus,.xy-select-box:hover,.xy-select-visible .xy-select-box{border-color:#40a9ff;border-right-width:1px !important;outline:0;box-shadow:0 0 0 2px rgba(24,144,255,0.2);z-index:1}.xy-select-box-multiple{min-height:32px;padding-bottom:3px;cursor:text;zoom:1}.xy-option{list-style:none;display:block;position:relative;font-size:13px;padding:0 10px;margin:0;line-height:32px;text-align:left;box-sizing:border-box;user-select:none;color:#48576a;cursor:pointer;transition:0.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.xy-option:first-child{border-radius:4px 4px 0 0}.xy-option:last-child{border-radius:0 0 4px 4px}.xy-option:hover{background-color:#e6f7ff}.xy-option-checked:not(.xy-option-disabled){background-color:#e6f7ff;color:#0076e4}.xy-option-focus,.xy-option-focus.xy-option-checked{background-color:#bbe0f1;color:#333333}.xy-option-disabled{color:rgba(0,0,0,0.25);cursor:not-allowed}.xy-option.divided{margin-top:5px;border-top:1px solid #e9eaec}.xy-option.filtered{display:none}.xy-optgroup{display:block;text-align:left;margin:0;user-select:none}.xy-optgroup__title{height:32px;padding:0 12px;color:rgba(0,0,0,0.45);font-size:12px;line-height:32px;margin:0}.xy-optgroup__list{margin:2px 0;padding:0}.xy-optgroup__list>.xy-option{padding-left:20px}.xy-select-dropdown{margin:0;padding:0;color:rgba(0,0,0,0.65);font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";box-sizing:border-box;font-variant:initial;background-color:#fff;border-radius:4px;outline:none;box-shadow:0 2px 8px rgba(0,0,0,0.15);font-size:14px;transform-origin:center top;overflow:hidden}.xy-select-dropdown .xy-empty{padding:10px 0}.xy-select-dropdown__scrollwrap{overflow:auto;height:100%;max-height:250px}.xy-select-dropdown__menu{margin:0;padding-left:0;overflow:auto;list-style:none;outline:none;background-color:#fff}.xy-select-item{float:left;max-width:calc(100% - 22px);padding-right:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.xy-select-item-tag{position:relative;float:left;max-width:99%;margin-right:4px;padding:0 10px;overflow:hidden;cursor:pointer;transition:padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);word-break:break-all;color:#909399;border-radius:4px;box-sizing:border-box;border:1px solid #e2e2e2;margin:2px 0 2px 6px;background-color:#f0f2f5}.xy-select-item-tag:hover{padding:0 20px 0 10px;background-color:#d8dadc}.xy-select-item-tag:hover .xy-select-item__remove{opacity:1}.xy-select-item__content{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.xy-select-item__remove{font-size:12px;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;position:absolute;right:7px;color:rgba(0,0,0,0.25);font-weight:bold;line-height:inherit;cursor:pointer;transition:all 0.3s;display:inline-block;font-size:12px;transition:0.3s cubic-bezier(0.645, 0.045, 0.355, 1);opacity:0}.xy-select-item__remove:hover{color:#000}@keyframes SelectItemIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes SelectItemOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}