adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 14.8 kB
CSS
.adui-tree-select{position:relative;z-index:1;display:inline-block;min-width:150px;color:var(--transparent-gray-900);font-size:13px;line-height:1.5;vertical-align:top}.adui-tree-select-wrapper{position:relative;display:inline-block}.adui-tree-select-wrapper-maxTag .adui-tree-select-maxPlaceholder::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.adui-tree-select-wrapper-maxTag .adui-tree-select-maxPlaceholder>svg{position:relative;top:2px;z-index:1}.adui-tree-select-selector{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;padding:1px 30px 1px 4px;min-height:30px;border-radius:4px;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:var(--motion-duration-base) var(--ease-in-out) background-color,var(--motion-duration-base) var(--ease-in-out) box-shadow}.adui-tree-select-arrow{position:absolute;top:50%;margin-top:-9px;right:9px;line-height:0}.adui-tree-select-icon{position:absolute;top:6px;right:8px;fill:var(--transparent-gray-700);transition:all var(--motion-duration-base) var(--ease-in-out)}.adui-tree-select-dropdown{position:absolute;top:-9999px;left:-9999px;padding:4px 0;font-size:13px;color:var(--transparent-gray-900);z-index:var(--z-index-dropdown);background-color:#fff;border-radius:6px;overflow:hidden;box-shadow:var(--box-shadow-elevation-2)}.adui-tree-select-dropdown-hidden{display:none}.adui-tree-select-dropdown-single .adui-tree-select-tree-node-content-wrapper{padding-right:0}.adui-tree-select-dropdown-single .adui-tree-select-selector{position:relative;height:30px;background-color:#fff;cursor:pointer;box-shadow:0 3px 2px 0 rgba(0,0,0,.03),0 0 0 1px var(--transparent-gray-400)}.adui-tree-select-dropdown-single .adui-tree-select-selector:hover{background-color:var(--transparent-gray-100);box-shadow:0 3px 2px 0 rgba(0,0,0,.03),0 0 0 1px var(--transparent-gray-500)}.adui-tree-select-dropdown-single .adui-tree-select-selector:active{background-color:var(--transparent-gray-200);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px var(--transparent-gray-500)}.adui-tree-select-dropdown-multiple .adui-tree-select-tree-switcher+.adui-tree-select-tree-node-content-wrapper{padding-left:4px;padding-right:0;min-width:0;max-width:100%;overflow:initial;text-overflow:initial;white-space:initial;cursor:initial}.adui-tree-select-dropdown-single-level .adui-tree-select-tree-switcher-noop{width:0}.adui-tree-select-tree-indent{align-self:stretch;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.adui-tree-select-tree-indent-unit{display:inline-block;width:16px}.adui-tree-select-tree-switcher{flex:none;align-self:stretch;width:18px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.adui-tree-select-tree-switcher-noop{cursor:default}.adui-tree-select-tree-switcher-icon{position:relative;vertical-align:calc(-0.125em - (18px - var(--font-size-medium))/2);z-index:3;fill:var(--transparent-gray-600);transition:all var(--motion-duration-base) var(--ease-in-out)}.adui-tree-select-tree-switcher_open>.adui-tree-select-tree-switcher-icon{transform:rotate(90deg)}.adui-tree-select-tree-switcher:not(.adui-tree-select-tree-switcher-noop)::after{content:"";position:absolute;top:0;left:0;z-index:2;width:100%;height:100%}.adui-tree-select-tree-treenode{position:relative;display:flex;padding:0 12px;line-height:32px;white-space:nowrap;border-radius:2px;transition:background-color var(--motion-duration-base) var(--ease-in-out)}.adui-tree-select-tree-treenode-all-inner{display:flex;align-items:center;justify-content:space-between;color:var(--transparent-gray-700);cursor:pointer}.adui-tree-select-tree-treenode-all .adui-tree-select-tree-switcher{width:0}.adui-tree-select-tree-treenode-disabled{cursor:not-allowed;color:var(--transparent-gray-700)}.adui-tree-select-tree-treenode-disabled>*,.adui-tree-select-tree-treenode-disabled .adui-tree-select-tree-title{cursor:not-allowed}.adui-tree-select-tree-treenode:not(.adui-tree-select-tree-treenode-disabled):hover{background-color:var(--transparent-gray-200)}.adui-tree-select-tree-treenode:not(.adui-tree-select-tree-treenode-disabled):active{background-color:var(--transparent-gray-300)}.adui-tree-select-tree-node-content-wrapper{flex:1;padding-left:4px;padding-right:16px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.adui-tree-select-tree-checkbox{position:absolute;z-index:2;top:8px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:0;background-color:var(--transparent-gray-50);border-radius:2px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--transparent-gray-400);transition:background-color var(--motion-duration-fast) var(--ease-in-out),box-shadow var(--motion-duration-fast) var(--ease-in-out)}.adui-tree-select-tree-checkbox svg{fill:#fff;opacity:0;transform:scale(0.6) rotate(10deg);transition:transform var(--motion-duration-base) var(--ease-in-out)}.adui-tree-select-tree-checkbox:not(.adui-tree-select-tree-checkbox-disabled){cursor:pointer}.adui-tree-select-tree-checkbox:not(.adui-tree-select-tree-checkbox-disabled):not(.adui-tree-select-tree-checkbox-checked):not(.adui-tree-select-tree-checkbox-indeterminate):hover{background-color:var(--transparent-gray-100);box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--transparent-gray-600)}.adui-tree-select-tree-checkbox:not(.adui-tree-select-tree-checkbox-disabled):not(.adui-tree-select-tree-checkbox-checked):not(.adui-tree-select-tree-checkbox-indeterminate):active{background-color:var(--transparent-gray-300);box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--transparent-gray-600)}.adui-tree-select-tree-checkbox:not(.adui-tree-select-tree-checkbox-disabled).adui-tree-select-tree-checkbox-checked,.adui-tree-select-tree-checkbox:not(.adui-tree-select-tree-checkbox-disabled).adui-tree-select-tree-checkbox-indeterminate{background-color:var(--primary-color);box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.15),0 0 0 1px var(--primary-color)}.adui-tree-select-tree-checkbox-checked svg,.adui-tree-select-tree-checkbox-indeterminate svg{opacity:1;transform:scale(1) rotate(0deg)}.adui-tree-select-tree-checkbox-indeterminate .adui-tree-select-tree-checkbox-indeterminateSvg{display:block}.adui-tree-select-tree-checkbox-indeterminate .adui-tree-select-tree-checkbox-checkedSvg{display:none}.adui-tree-select-tree-checkbox-indeterminateSvg{display:none}.adui-tree-select-tree-checkbox-disabled{cursor:not-allowed;background-color:rgba(0,0,0,.03);box-shadow:0 0 0 1px rgba(0,0,0,.08)}.adui-tree-select-tree-checkbox-disabled+span{color:var(--transparent-gray-700);cursor:not-allowed}.adui-tree-select-tree-checkbox-disabled.adui-tree-select-tree-checkbox-checked svg{fill:var(--transparent-gray-600)}.adui-tree-select-tree-list-scrollbar{width:14px }.adui-tree-select-tree-list-scrollbar-thumb{margin-top:4px;left:6px ;width:6px ;background-color:rgba(0,0,0,.15) }.adui-tree-select-tree-list-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4) }.adui-tree-select-selection-overflow{position:relative;display:flex;flex:auto;flex-wrap:wrap;max-width:100%}.adui-tree-select-selection-overflow-item{flex:none;max-width:100%}.adui-tree-select-selection-overflow-item+.adui-tree-select-selection-overflow-item .adui-tree-select-selection-search{margin-left:0}.adui-tree-select-selection-placeholder{position:absolute;top:50%;right:30px;left:8px;transform:translateY(-50%);transition:all .3s;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:20px;color:var(--transparent-gray-700)}.adui-tree-select-selection-search{position:relative;max-width:100%;min-width:6px;margin-top:2px;margin-bottom:2px;margin-left:4px}.adui-tree-select-selection-search-input{margin:0;padding:0;min-width:6px;width:100%;height:24px;font-size:13px;line-height:15px;background-color:rgba(0,0,0,0);border:none;outline:none;cursor:auto;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.adui-tree-select-selection-search-input::-webkit-search-decoration,.adui-tree-select-selection-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.adui-tree-select-selection-search-mirror{position:absolute;top:0;left:0;height:24px;z-index:999;white-space:pre;visibility:hidden}.adui-tree-select-selection-item{flex:none;position:relative;display:flex;align-items:center;max-width:100%;margin-top:3px;margin-right:4px;margin-bottom:3px;padding:0 4px;height:22px;border-radius:4px;box-shadow:0 0 0 1px rgba(163,163,163,.25);cursor:default;transition:font-size var(--motion-duration-base),line-height var(--motion-duration-base),height var(--motion-duration-base);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.adui-tree-select-selection-item .adui-tree-select-pop-trigger-placeholder{display:none}.adui-tree-select-selection-item-content{font-size:13px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#1f1f1f}.adui-tree-select-selection-item-remove{flex:none;display:flex;align-items:center;margin-left:2px}.adui-tree-select-pop-trigger{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adui-tree-select-pop-trigger-placeholder{position:absolute;z-index:2;top:0;left:0;width:100%;height:100%}.adui-tree-select-max-popover-item{position:relative;display:flex;align-items:center;justify-content:space-between;padding-left:8px;padding-right:4px;height:30px;border-radius:4px}.adui-tree-select-max-popover-item::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--transparent-gray-800);border-radius:4px;transform:scale(0.92);transition:all var(--ease-in-out) var(--motion-duration-base)}.adui-tree-select-max-popover-item:hover::after{opacity:.1;transform:scale(1)}.adui-tree-select-max-popover-item svg{z-index:1;cursor:pointer;opacity:.6}.adui-tree-select-max-popover-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adui-tree-select-max-popover-item .adui-tree-select-pop-trigger-placeholder{display:none}.adui-tree-select-max-popover-item-wrapper{padding:4px;min-width:100px;max-width:200px;max-height:190px;overflow-y:auto}.adui-tree-select-max-popover-item-wrapper::-webkit-scrollbar{width:14px;height:14px}.adui-tree-select-max-popover-item-wrapper::-webkit-scrollbar-thumb{min-width:14px;min-height:14px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:4px solid rgba(0,0,0,0);border-radius:14px}.adui-tree-select-max-popover-item-wrapper::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4)}.adui-tree-select-max-popover-item-wrapper::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.65)}.adui-tree-select-single .adui-tree-select-selector::before{content:" ";opacity:0;width:0;line-height:0}.adui-tree-select-single .adui-tree-select-selection-search{display:none}.adui-tree-select-single .adui-tree-select-selection-placeholder{color:var(--transparent-gray-900)}.adui-tree-select-single .adui-tree-select-selection-item{box-shadow:none;cursor:pointer}.adui-tree-select-show-search.adui-tree-select-multiple:not(.adui-tree-select-disabled) .adui-tree-select-selector{cursor:text}.adui-tree-select-empty{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-medium);line-height:32px;color:rgba(0,0,0,.36);cursor:not-allowed}.adui-tree-select-disabled{color:rgba(0,0,0,.25)}.adui-tree-select-disabled .adui-tree-select-selector{background:#f5f5f5;cursor:not-allowed}.adui-tree-select-disabled .adui-tree-select-selector:hover{box-shadow:0 0 0 1px var(--transparent-gray-400)}.adui-tree-select-disabled .adui-tree-select-arrow{z-index:1}.adui-tree-select-disabled .adui-tree-select-selection:hover,.adui-tree-select-disabled .adui-tree-select-selection:focus,.adui-tree-select-disabled .adui-tree-select-selection:active{box-shadow:none }.adui-tree-select-disabled .adui-tree-select-selection-item,.adui-tree-select-disabled .adui-tree-select-selection-search-input{cursor:not-allowed}.adui-tree-select_resultHidden .adui-tree-select-selection-search{margin-left:4px ;width:calc(100% - 10px) }.adui-tree-select_resultHidden .adui-tree-select-selection-search-input{width:100%;opacity:1 }.adui-tree-select_resultHidden .adui-tree-select-selection-overflow-item-suffix{width:100%}.adui-tree-select_resultHidden .adui-tree-select-selection-item,.adui-tree-select_resultHidden .adui-tree-select-selection-placeholder{display:none}.adui-tree-select-resultRender .adui-tree-select-selector>.adui-tree-select-selection-item{all:initial}.adui-tree-select:hover+.adui-tree-select-icon,.adui-tree-select-focused+.adui-tree-select-icon{fill:var(--transparent-gray-800)}.adui-tree-select-normal .adui-tree-select-selector{box-shadow:0 0 0 1px var(--transparent-gray-400)}.adui-tree-select-normal .adui-tree-select-selector:hover{box-shadow:0 0 0 1px var(--transparent-gray-600)}.adui-tree-select-normal.adui-tree-select-focused .adui-tree-select-selector{box-shadow:0 0 0 1px var(--primary-color),0 0 0 4px rgba(255,255,255,.75),0 0 0 4px var(--primary-color)}.adui-tree-select-primary .adui-tree-select-selector{box-shadow:0 0 0 1px var(--primary-color)}.adui-tree-select-primary .adui-tree-select-selector:hover{box-shadow:0 0 0 1px var(--primary-color)}.adui-tree-select-primary.adui-tree-select-focused .adui-tree-select-selector{box-shadow:0 0 0 1px var(--primary-color),0 0 0 4px rgba(255,255,255,.7),0 0 0 4px var(--primary-color)}.adui-tree-select-success .adui-tree-select-selector{box-shadow:0 0 0 1px var(--ad-green)}.adui-tree-select-success .adui-tree-select-selector:hover{box-shadow:0 0 0 1px var(--ad-green)}.adui-tree-select-success.adui-tree-select-focused .adui-tree-select-selector{box-shadow:0 0 0 1px var(--ad-green),0 0 0 4px rgba(255,255,255,.7),0 0 0 4px var(--ad-green)}.adui-tree-select-warning .adui-tree-select-selector{box-shadow:0 0 0 1px var(--ad-orange)}.adui-tree-select-warning .adui-tree-select-selector:hover{box-shadow:0 0 0 1px var(--ad-orange)}.adui-tree-select-warning.adui-tree-select-focused .adui-tree-select-selector{box-shadow:0 0 0 1px var(--ad-orange),0 0 0 4px rgba(255,255,255,.7),0 0 0 4px var(--ad-orange)}.adui-tree-select-danger .adui-tree-select-selector{box-shadow:0 0 0 1px var(--ad-red)}.adui-tree-select-danger .adui-tree-select-selector:hover{box-shadow:0 0 0 1px var(--ad-red)}.adui-tree-select-danger.adui-tree-select-focused .adui-tree-select-selector{box-shadow:0 0 0 1px var(--ad-red),0 0 0 4px rgba(255,255,255,.7),0 0 0 4px var(--ad-red)}