UNPKG

acud

Version:

acg react 组件库

658 lines (657 loc) • 22.8 kB
/* color */ /* 默认颜色 */ /* 通用-icon */ /* 标签 */ /* 默认颜色 */ /* 其他颜色 */ /* 通用 */ /* 水平 */ /* 垂直 */ /* 序号水平 */ /* 序号垂直 */ @keyframes acudCheckboxEffect { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } } .acud-select-tree-checkbox { margin: 0; padding: 0; display: flex; position: relative; line-height: 1; top: 0; white-space: nowrap; outline: none; cursor: pointer; } .acud-select-tree-checkbox-wrapper:hover .acud-select-tree-checkbox-inner, .acud-select-tree-checkbox:hover .acud-select-tree-checkbox-inner { border-color: #2468F2; } .acud-select-tree-checkbox:active .acud-select-tree-checkbox-inner { border-color: #144BCC; } .acud-select-tree-checkbox:hover::after, .acud-select-tree-checkbox-wrapper:hover .acud-select-tree-checkbox::after { visibility: visible; } .acud-select-tree-checkbox-inner { position: relative; display: inline-flex; width: 16px; height: 16px; direction: ltr; background-color: #FFFFFF; border: 1px solid #E8E9EB; border-radius: 0px; border-collapse: separate; border-radius: 2px; } .acud-select-tree-checkbox-input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 16px; height: 16px; cursor: pointer; opacity: 0; } .acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner { background-color: #2468F2; border-color: #2468F2; } .acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner .checkbox-check-icon { color: #FFFFFF; width: 14px; height: 14px; } .acud-select-tree-checkbox-checked:hover .acud-select-tree-checkbox-inner { background-color: #528EFF; border-color: #528EFF; } .acud-select-tree-checkbox-checked:hover .acud-select-tree-checkbox-inner .checkbox-check-icon { color: #FFFFFF; width: 14px; height: 14px; } .acud-select-tree-checkbox-checked:active .acud-select-tree-checkbox-inner { background-color: #144BCC; border-color: #144BCC; } .acud-select-tree-checkbox-checked:active .acud-select-tree-checkbox-inner .checkbox-check-icon { color: #FFFFFF; width: 14px; height: 14px; } .acud-select-tree-checkbox.acud-select-tree-checkbox-checked + span { color: #151B26; } .acud-select-tree-checkbox.acud-select-tree-checkbox-checked + span:hover { color: #151B26; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled { cursor: not-allowed; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled.acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner { background-color: #7DADFF; border-color: #7DADFF; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled.acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner .checkbox-check-icon { color: #FFFFFF; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled.acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner::after { border-color: #7DADFF; animation-name: none; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled .acud-select-tree-checkbox-input { cursor: not-allowed; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled .acud-select-tree-checkbox-inner { background-color: #F7F7F9; border-color: #E8E9EB; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled .acud-select-tree-checkbox-inner .checkbox-check-icon { color: #B8BABF; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled + span { color: #B8BABF; cursor: not-allowed; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled + span:hover { color: #B8BABF; } .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled:hover::after, .acud-select-tree-checkbox-wrapper:hover .acud-select-tree-checkbox.acud-select-tree-checkbox-disabled::after { visibility: hidden; } .acud-select-tree-checkbox-wrapper { margin: 0; padding: 0; display: flex; align-items: center; line-height: unset; cursor: pointer; } .acud-select-tree-checkbox-wrapper::after { display: inline-block; width: 0; overflow: hidden; content: "\a0"; } .acud-select-tree-checkbox-wrapper.acud-select-tree-checkbox-wrapper-disabled { cursor: not-allowed; } .acud-select-tree-checkbox-wrapper + .acud-select-tree-checkbox-wrapper { margin-left: 8px; } .acud-select-tree-checkbox + span { padding-right: 8px; padding-left: 8px; color: #151B26; } .acud-select-tree-checkbox + span:hover { color: #151B26; } .acud-select-tree-checkbox-group { margin: 0; padding: 0; display: inline-flex; vertical-align: middle; } .acud-select-tree-checkbox-group-item { margin-right: 16px; } .acud-select-tree-checkbox-group-item:last-child { margin-right: 0; } .acud-select-tree-checkbox-group-item + .acud-select-tree-checkbox-group-item { margin-left: 0; } .acud-select-tree-checkbox-indeterminate .acud-select-tree-checkbox-inner { background-color: #FFFFFF; border-color: #2468F2; } .acud-select-tree-checkbox-indeterminate .acud-select-tree-checkbox-inner::after { position: absolute; display: table; top: 50%; left: 50%; width: 8px; height: 8px; background-color: #2468F2; border: 0; transform: translate(-50%, -50%) scale(1); opacity: 1; content: ' '; } .acud-select-tree-checkbox-indeterminate.acud-select-tree-checkbox-disabled .acud-select-tree-checkbox-inner { background-color: #FFFFFF; border-color: #7DADFF; } .acud-select-tree-checkbox-indeterminate.acud-select-tree-checkbox-disabled .acud-select-tree-checkbox-inner::after { background-color: #7DADFF; } .acud-select-tree-checkbox-indeterminate:active .acud-select-tree-checkbox-inner { background-color: #FFFFFF; border-color: #144BCC; } .acud-select-tree-checkbox-indeterminate:hover .acud-select-tree-checkbox-inner { background-color: #FFFFFF; border-color: #7DADFF; } .acud-select-tree-checkbox-indeterminate:hover .acud-select-tree-checkbox-inner::after { background-color: #7DADFF; } .acud-tree-select { /* 反向过渡,回到初始状态不那么突兀 */ } .acud-tree-select.acud-select-open .acud-select-arrow { transform: rotate(180deg); transition: transform 0.3s; } .acud-tree-select.acud-select-open .acud-select-selection-item, .acud-tree-select.acud-select-open .acud-select-selection-placeholder { transition: none; color: #B8BABF; } .acud-tree-select .acud-select-arrow { transition-delay: 0.01s; transition-duration: 0.3s; } .acud-tree-select-dropdown { padding: 12px; } .acud-tree-select-dropdown-rtl { direction: rtl; } .acud-tree-select-dropdown .acud-select-tree { border-radius: 0; } .acud-tree-select-dropdown .acud-select-tree-list-holder-inner { align-items: stretch; } .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper { flex: auto; } .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected { color: #2468F2; } .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected:hover { color: #528EFF; } .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected:focus, .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected:active { color: #144BCC; } .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[disabled], .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[aria-disabled="true"], .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[disabled]:hover, .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[aria-disabled="true"]:hover, .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[disabled]:focus, .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[aria-disabled="true"]:focus, .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[disabled]:active, .acud-tree-select-dropdown .acud-select-tree-list-holder-inner .acud-select-tree-treenode .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected[aria-disabled="true"]:active { color: #B8BABF; } .acud-tree-select-dropdown .acud-select-tree-select-all { line-height: 22px; padding: 0 0 4px 0; } .acud-select-tree-checkbox-inner::after { top: 43%; left: 24%; width: 4px; height: 8px; position: absolute; display: table; border: 1px solid #FFFFFF; border-top: 0; border-left: 0; transform: rotate(45deg) scale(1) translate(-50%, -50%); opacity: 1; content: " "; } .acud-select-tree-treenode-checkbox-disabled .acud-select-tree-checkbox-inner::after { border: 1px solid #B8BABF; border-top: 0; border-left: 0; } .acud-select-tree .acud-select-tree-checkbox-disabled.acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner::after { border-color: #FFFFFF; } .acud-select-tree .acud-select-tree-checkbox-disabled:not(.acud-select-tree-checkbox-checked) .acud-select-tree-checkbox-inner::after { display: none; } .acud-select-tree-popover-util { margin: -6px 0; } .acud-select-tree-popover-util li { line-height: 32px; margin: 0 -12px; padding: 0 12px; } .acud-select-tree-popover-util li:hover { background: #E6F0FF; cursor: pointer; } .acud-select-tree-popover-util-li-disabled { color: #B8BABF; } .acud-select-tree-popover-util-li-disabled:hover { background: transparent !important; cursor: not-allowed !important; } .acud-select-tree-search-input { margin-bottom: 4px; } .acud-select-tree .acud-select-tree-treenode { display: flex; align-items: flex-start; outline: none; padding: 0 0 4px 0; line-height: 24px; color: #151B26; } .acud-select-tree .acud-select-tree-treenode:hover { color: #151B26; } .acud-select-tree .acud-select-tree-treenode:focus, .acud-select-tree .acud-select-tree-treenode:active { color: #2468F2; } .acud-select-tree .acud-select-tree-treenode[disabled], .acud-select-tree .acud-select-tree-treenode[aria-disabled="true"], .acud-select-tree .acud-select-tree-treenode[disabled]:hover, .acud-select-tree .acud-select-tree-treenode[aria-disabled="true"]:hover, .acud-select-tree .acud-select-tree-treenode[disabled]:focus, .acud-select-tree .acud-select-tree-treenode[aria-disabled="true"]:focus, .acud-select-tree .acud-select-tree-treenode[disabled]:active, .acud-select-tree .acud-select-tree-treenode[aria-disabled="true"]:active { color: #B8BABF; } .acud-select-tree .acud-select-tree-treenode:active { color: #151B26; } .acud-select-tree .acud-select-tree-treenode-disabled .acud-select-tree-node-content-wrapper { color: #B8BABF; cursor: not-allowed; } .acud-select-tree .acud-select-tree-treenode-disabled .acud-select-tree-node-content-wrapper:hover { background: transparent; } .acud-select-tree .acud-select-tree-treenode-disabled .acud-select-tree-node-content-wrapper:active { color: #B8BABF; } .acud-select-tree-indent { align-self: stretch; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .acud-select-tree-indent-unit { display: inline-block; width: 24px; } .acud-select-tree-switcher { position: relative; flex: none; align-self: stretch; width: 16px; margin: 0; line-height: 24px; text-align: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .acud-select-tree-switcher .acud-tree-switcher-icon, .acud-select-tree-switcher .acud-select-tree-switcher-icon { color: #84868C; background-color: transparent; border-color: transparent; display: inline-block; font-size: 10px; line-height: 0; vertical-align: -0.24em; } .acud-select-tree-switcher .acud-tree-switcher-icon:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon:hover { color: #84868C; } .acud-select-tree-switcher .acud-tree-switcher-icon:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon:focus, .acud-select-tree-switcher .acud-tree-switcher-icon:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon:active { color: #84868C; } .acud-select-tree-switcher .acud-tree-switcher-icon[disabled], .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled], .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"], .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"], .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:hover, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:hover, .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:focus, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:focus, .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:active, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:active { color: #B8BABF; } .acud-select-tree-switcher .acud-tree-switcher-icon:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon:hover { background-color: transparent; } .acud-select-tree-switcher .acud-tree-switcher-icon:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon:focus, .acud-select-tree-switcher .acud-tree-switcher-icon:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon:active { background-color: transparent; } .acud-select-tree-switcher .acud-tree-switcher-icon[disabled], .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled], .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"], .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"], .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:hover, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:hover, .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:focus, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:focus, .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:active, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:active { background-color: transparent; } .acud-select-tree-switcher .acud-tree-switcher-icon:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon:hover { border-color: transparent; } .acud-select-tree-switcher .acud-tree-switcher-icon:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon:focus, .acud-select-tree-switcher .acud-tree-switcher-icon:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon:active { border-color: transparent; } .acud-select-tree-switcher .acud-tree-switcher-icon[disabled], .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled], .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"], .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"], .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:hover, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:hover, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:hover, .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:focus, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:focus, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:focus, .acud-select-tree-switcher .acud-tree-switcher-icon[disabled]:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon[disabled]:active, .acud-select-tree-switcher .acud-tree-switcher-icon[aria-disabled="true"]:active, .acud-select-tree-switcher .acud-select-tree-switcher-icon[aria-disabled="true"]:active { border-color: transparent; } .acud-select-tree-switcher .acud-tree-switcher-icon svg, .acud-select-tree-switcher .acud-select-tree-switcher-icon svg { width: 16px!important; transition: transform 0.3s; } .acud-select-tree-switcher-noop { cursor: default; } .acud-select-tree-switcher_close .acud-select-tree-switcher-icon svg { transform: rotate(-90deg); } .acud-select-tree-switcher-leaf-line { position: relative; z-index: 1; display: inline-block; width: 100%; height: 100%; } .acud-select-tree-switcher-leaf-line::before { position: absolute; top: 0; right: 8px; bottom: -4px; margin-left: -1px; border-right: 1px solid #B8BABF; content: ' '; } .acud-select-tree-switcher-leaf-line::after { position: absolute; width: 10px; height: 14px; border-bottom: 1px solid #B8BABF; content: ' '; } .acud-select-tree .acud-select-tree-node-content-wrapper { position: relative; flex: 1; z-index: auto; min-height: 24px; margin: 0 4px; padding: 0 4px; color: inherit; line-height: 24px; background: transparent; cursor: pointer; transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s; } .acud-select-tree .acud-select-tree-node-content-wrapper:hover { background-color: #F7F7F9; border-radius: 2px; } .acud-select-tree .acud-select-tree-node-content-wrapper:active { color: #151B26; } .acud-select-tree .acud-select-tree-node-content-wrapper.acud-select-tree-node-selected, .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-node-highlighttext { background-color: #E6F0FF; border-radius: 2px; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-iconEle { display: inline-block; width: 16px; height: 16px; line-height: 24px; margin-right: 8px; text-align: center; vertical-align: top; color: #84868C; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-iconEle:empty { display: none; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-iconEle .acudicon { vertical-align: -0.2em; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-icon-util > span { color: #84868C; margin-left: 8px; vertical-align: -0.2em; line-height: 0; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-icon-util > span:hover { color: #2468F2; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-icon-util > span:active { color: #144BCC; } .acud-select-tree .acud-select-tree-node-content-wrapper .acud-select-tree-edit-input { margin: 0 -8px; } .acud-select-tree-node-content-wrapper { line-height: 24px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .acud-select-tree-node-content-wrapper .acud-tree-drop-indicator { position: absolute; z-index: 1; height: 1px; background-color: #2468F2; border-radius: 1px; pointer-events: none; } .acud-select-tree-node-content-wrapper .acud-tree-drop-indicator::after { position: absolute; top: -2px; left: -4px; width: 5px; height: 5px; background-color: transparent; border: 1px solid #2468F2; border-radius: 50%; content: ''; } .acud-select-tree-draggable-icon { width: 16px; height: 16px; text-align: center; line-height: 24px; margin: 0 8px; opacity: 0; } .acud-select-tree-treenode:hover .acud-select-tree-draggable-icon { opacity: 0.45; } .acud-select-tree-show-line .acud-select-tree-indent-unit { position: relative; height: 100%; } .acud-select-tree-show-line .acud-select-tree-indent-unit::before { position: absolute; top: 0; right: 16px; bottom: -4px; border-right: 1px solid #B8BABF; content: ''; } .acud-select-tree-show-line .acud-select-tree-indent-unit-end::before { display: none; } .acud-select-tree .acud-select-tree-treenode-leaf-last .acud-select-tree-switcher-leaf-line::before { top: auto !important; bottom: auto !important; height: 14px !important; } .acud-select-tree-checkbox { margin: 2px 0 0 8px; top: 0.1em; } .acud-select-tree-with-title-ellipsis .acud-select-tree-title { flex: 1; overflow: hidden; } .acud-select-tree-with-title-ellipsis .acud-select-tree-title-titleWithOps { display: flex; white-space: nowrap; } .acud-select-tree-with-title-ellipsis .acud-select-tree-title-titleContent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acud-select-tree-with-title-ellipsis .acud-select-tree-node-content-wrapper { display: flex; overflow: hidden; max-width: 100%; } .acud-select-tree-with-title-ellipsis .acud-select-tree-node-content-wrapper .acud-select-tree-edit-input { margin: 0; } .acud-tree-select-dropdown-rtl .acud-select-tree .acud-select-tree-switcher_close .acud-select-tree-switcher-icon svg { transform: rotate(90deg); } .acud-tree-select-dropdown-rtl .acud-select-tree .acud-select-tree-switcher-loading-icon { transform: scaleY(-1); } .acud-select-tree-checkbox-inner::after { opacity: 0; } .acud-select-tree-checkbox-checked .acud-select-tree-checkbox-inner::after { opacity: 1; } .acud-select-tree-list .acud-select-tree-node-content-wrapper { white-space: nowrap; }