UNPKG

acud

Version:

acg react 组件库

770 lines (769 loc) • 24.2 kB
/* color */ /* 默认颜色 */ /* 通用-icon */ /* 标签 */ /* 默认颜色 */ /* 其他颜色 */ /* 通用 */ /* 水平 */ /* 垂直 */ /* 序号水平 */ /* 序号垂直 */ .acud-select-single .acud-select-selector { display: flex; } .acud-select-single .acud-select-selector .acud-select-selection-search { position: absolute; top: 0; right: 12px; bottom: 0; left: 12px; display: inline-flex; } .acud-select-single .acud-select-selector .acud-select-selection-search-input { width: 100%; } .acud-select-single .acud-select-selector .acud-select-selection-item, .acud-select-single .acud-select-selector .acud-select-selection-placeholder { padding: 0; line-height: 30px; transition: all 0.3s; } @supports (-moz-appearance: meterbar) { .acud-select-single .acud-select-selector .acud-select-selection-item, .acud-select-single .acud-select-selector .acud-select-selection-placeholder { line-height: 30px; } } .acud-select-single .acud-select-selector .acud-select-selection-item { position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: #151B26; } .acud-select-single .acud-select-selector .acud-select-selection-item:hover { color: #151B26; } .acud-select-single .acud-select-selector .acud-select-selection-placeholder { pointer-events: none; } .acud-select-single .acud-select-selector::after, .acud-select-single .acud-select-selector .acud-select-selection-item::after, .acud-select-single .acud-select-selector .acud-select-selection-placeholder::after { display: inline-block; width: 0; visibility: hidden; content: '\a0'; } .acud-select-single.acud-select-show-arrow .acud-select-selection-search { right: 24px; } .acud-select-single.acud-select-show-arrow .acud-select-selection-item, .acud-select-single.acud-select-show-arrow .acud-select-selection-placeholder { padding-right: 0; } .acud-select-single:not(.acud-select-customize-input) .acud-select-selector { width: 100%; height: 32px; padding: 0 40px 0 12px; } .acud-select-single:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-search-input { height: 30px; } .acud-select-single:not(.acud-select-customize-input) .acud-select-selector::after { line-height: 30px; } .acud-select-single.acud-select-customize-input .acud-select-selector::after { display: none; } .acud-select-single.acud-select-customize-input .acud-select-selector .acud-select-selection-search { position: static; width: 100%; } .acud-select-single.acud-select-customize-input .acud-select-selector .acud-select-selection-placeholder { position: absolute; right: 0; left: 0; padding: 0 12px; } .acud-select-single.acud-select-customize-input .acud-select-selector .acud-select-selection-placeholder::after { display: none; } .acud-select-single.acud-select-lg:not(.acud-select-customize-input) .acud-select-selector { height: 14px; } .acud-select-single.acud-select-lg:not(.acud-select-customize-input) .acud-select-selector::after, .acud-select-single.acud-select-lg:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-item, .acud-select-single.acud-select-lg:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-placeholder { line-height: 12px; } .acud-select-single.acud-select-lg:not(.acud-select-customize-input):not(.acud-select-customize-input) .acud-select-selection-search-input { height: 12px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input) .acud-select-selector { height: 24px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input) .acud-select-selector::after, .acud-select-single.acud-select-sm:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-item, .acud-select-single.acud-select-sm:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-placeholder { line-height: 22px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input):not(.acud-select-customize-input) .acud-select-selection-search-input { height: 22px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input) .acud-select-selection-search { right: 12px; left: 12px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input) .acud-select-selector { padding: 0 12px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input).acud-select-show-arrow .acud-select-selection-search { right: 30px; } .acud-select-single.acud-select-sm:not(.acud-select-customize-input).acud-select-show-arrow .acud-select-selection-item, .acud-select-single.acud-select-sm:not(.acud-select-customize-input).acud-select-show-arrow .acud-select-selection-placeholder { padding-right: 18px; } .acud-select-single.acud-select-lg:not(.acud-select-customize-input) .acud-select-selector { padding: 0 12px; } .acud-select-single.acud-select-disabled .acud-select-selector .acud-select-selection-item { color: #5C5F66; } /** * Do not merge `height` & `line-height` under style with `selection` & `search`, * since chrome may update to redesign with its align logic. */ .acud-select-selection-overflow { position: relative; display: flex; flex: auto; flex-wrap: wrap; max-width: 100%; } .acud-select-selection-overflow-item { flex: none; align-self: center; max-width: 100%; margin-top: 3px; } .acud-select-multiple .acud-select-selector { display: flex; flex-wrap: wrap; align-items: center; padding: 0 12px 3px 3px; } .acud-select-show-search.acud-select-multiple .acud-select-selector { cursor: text; } .acud-select-disabled.acud-select-multiple .acud-select-selector { background: #F7F7F9; cursor: not-allowed; } .acud-select-multiple .acud-select-selector::after { display: inline-block; width: 0; margin: 0 0; line-height: 24px; content: '\a0'; } .acud-select-multiple.acud-select-show-arrow .acud-select-selector, .acud-select-multiple.acud-select-allow-clear .acud-select-selector { padding-right: 28px; } .acud-select-multiple .acud-select-selection-item { position: relative; display: flex; flex: none; box-sizing: border-box; max-width: 100%; height: 24px; margin-top: 0; margin-bottom: 0; line-height: 22px; background-color: #F7F7F9; border: 1px solid transparent; color: #151B26; border-radius: 2px; cursor: default; transition: font-size 0.3s, line-height 0.3s, height 0.3s; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-inline-end: 5px; padding-inline-start: 12px; padding-inline-end: 6px; } .acud-select-multiple .acud-select-selection-item.acud-select-selection-item-disabled { color: #5C5F66; border-color: transparent; background-color: #F7F7F9; cursor: not-allowed; } .acud-select-multiple .acud-select-selection-item.acud-select-selection-item-disabled:hover { color: #5C5F66; border-color: transparent; background-color: #F7F7F9; } .acud-select-multiple .acud-select-selection-item:hover { color: #151B26; border-color: transparent; background-color: #F2F2F4; } .acud-select-disabled.acud-select-multiple .acud-select-selection-item, .acud-select-disabled.acud-select-multiple .acud-select-selection-item:hover { border-color: transparent; color: #5C5F66; background-color: #E8E9EB; cursor: not-allowed; } .acud-select-multiple .acud-select-selection-item-content { display: inline-block; max-width: 95px; margin-right: 6px; overflow: hidden; white-space: pre; text-overflow: ellipsis; } .acud-select-multiple .acud-select-selection-item-remove { display: inline-block; color: #B8BABF; font-weight: bold; font-size: 10px; line-height: inherit; cursor: pointer; color: #84868C; } .acud-select-multiple .acud-select-selection-item-remove > .acudicon { vertical-align: -0.2em; } .acud-select-multiple .acud-select-selection-item-remove:hover { color: #5C5F66; } .acud-select-multiple .acud-select-selection-item-remove:focus, .acud-select-multiple .acud-select-selection-item-remove:active { color: #303540; } .acud-select-multiple .acud-select-selection-item-remove[disabled], .acud-select-multiple .acud-select-selection-item-remove[aria-disabled="true"], .acud-select-multiple .acud-select-selection-item-remove[disabled]:hover, .acud-select-multiple .acud-select-selection-item-remove[aria-disabled="true"]:hover, .acud-select-multiple .acud-select-selection-item-remove[disabled]:focus, .acud-select-multiple .acud-select-selection-item-remove[aria-disabled="true"]:focus, .acud-select-multiple .acud-select-selection-item-remove[disabled]:active, .acud-select-multiple .acud-select-selection-item-remove[aria-disabled="true"]:active { color: #B8BABF; } .acud-select-multiple .acud-select-selection-item-remove[disabled] { cursor: not-allowed; } .acud-select-multiple .acud-select-selection-overflow-item + .acud-select-selection-overflow-item .acud-select-selection-search { margin-inline-start: 0; } .acud-select-multiple .acud-select-selection-search { position: relative; max-width: 100%; margin-top: 0; margin-bottom: 0; margin-inline-start: 7px; } .acud-select-multiple .acud-select-selection-search-input, .acud-select-multiple .acud-select-selection-search-mirror { height: 24px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", Roboto, 'Arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif; line-height: 24px; transition: all 0.3s; } .acud-select-multiple .acud-select-selection-search-input { width: 100%; min-width: 4.1px; } .acud-select-multiple .acud-select-selection-search-mirror { position: absolute; top: 0; left: 0; z-index: 999; white-space: pre; visibility: hidden; } .acud-select-multiple .acud-select-selection-placeholder { position: absolute; top: 50%; right: 5px; left: 12px; transform: translateY(-50%); transition: all 0.3s; } .acud-select-multiple.acud-select-lg .acud-select-selector::after { line-height: 22px; } .acud-select-multiple.acud-select-lg .acud-select-selection-item { height: 22px; line-height: 20px; } .acud-select-multiple.acud-select-lg .acud-select-selection-search { height: 22px; line-height: 22px; } .acud-select-multiple.acud-select-lg .acud-select-selection-search-input, .acud-select-multiple.acud-select-lg .acud-select-selection-search-mirror { height: 22px; line-height: 20px; } .acud-select-multiple.acud-select-sm .acud-select-selector::after { line-height: 22px; } .acud-select-multiple.acud-select-sm .acud-select-selection-item { height: 22px; line-height: 20px; } .acud-select-multiple.acud-select-sm .acud-select-selection-search { height: 22px; line-height: 22px; } .acud-select-multiple.acud-select-sm .acud-select-selection-search-input, .acud-select-multiple.acud-select-sm .acud-select-selection-search-mirror { height: 22px; line-height: 20px; } .acud-select-multiple.acud-select-sm .acud-select-selection-placeholder { left: 12px; } .acud-select-multiple.acud-select-sm .acud-select-selection-search:first-child .acud-select-selection-search-input { margin-left: 3px; } .acud-select-multiple.acud-select-lg .acud-select-selection-item { height: 32px; line-height: 32px; } .acud-select-dropdown-multiple .acud-select-item { padding: 5px 12px; } .acud-select-dropdown-multiple .acud-select-item-checkall { padding: 5px 12px; height: 32px; display: flex; line-height: 22px; cursor: pointer; } .acud-select-dropdown-multiple .acud-select-item-checkall:hover { background-color: #E6F0FF; } .acud-select-dropdown-multiple .acud-select-item-option-content { margin-left: 8px; } .acud-select-dropdown-multiple .acud-select-item-option-grouped { padding-left: 48px; } .acud-select-dropdown-multiple .acud-select-item-group { cursor: pointer; } /* Reset search input style */ .acud-select { margin: 0; padding: 0; position: relative; display: inline-block; cursor: pointer; } .acud-select:not(.acud-select-customize-input) .acud-select-selector { position: relative; font-size: 12px; color: #B8BABF; background-color: #FFFFFF; border-color: #E8E9EB; border-radius: 4px; border-width: 1px; border-style: solid; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); max-height: 59px; overflow-y: auto; } .acud-select:not(.acud-select-customize-input) .acud-select-selector:hover { color: #B8BABF; } .acud-select:not(.acud-select-customize-input) .acud-select-selector:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector:active { color: #B8BABF; } .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled], .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"], .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:hover, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:hover, .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:active, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:active { color: #B8BABF; } .acud-select:not(.acud-select-customize-input) .acud-select-selector:hover { background-color: #FFFFFF; } .acud-select:not(.acud-select-customize-input) .acud-select-selector:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector:active { background-color: #FFFFFF; } .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled], .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"], .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:hover, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:hover, .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:active, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:active { background-color: #F7F7F9; } .acud-select:not(.acud-select-customize-input) .acud-select-selector:hover { border-color: #2468F2; } .acud-select:not(.acud-select-customize-input) .acud-select-selector:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector:active { border-color: #144BCC; } .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled], .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"], .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:hover, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:hover, .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:focus, .acud-select:not(.acud-select-customize-input) .acud-select-selector[disabled]:active, .acud-select:not(.acud-select-customize-input) .acud-select-selector[aria-disabled="true"]:active { border-color: #E8E9EB; } .acud-select:not(.acud-select-customize-input) .acud-select-selector input { cursor: pointer; } .acud-select-show-search.acud-select:not(.acud-select-customize-input) .acud-select-selector { cursor: text; } .acud-select-show-search.acud-select:not(.acud-select-customize-input) .acud-select-selector input { cursor: auto; } .acud-select-disabled.acud-select:not(.acud-select-customize-input) .acud-select-selector { cursor: not-allowed; background-color: #F7F7F9; border-color: #E8E9EB; } .acud-select-multiple.acud-select-disabled.acud-select:not(.acud-select-customize-input) .acud-select-selector { background-color: #F7F7F9; } .acud-select-disabled.acud-select:not(.acud-select-customize-input) .acud-select-selector input { cursor: not-allowed; } .acud-select-disabled:hover.acud-select:not(.acud-select-customize-input) .acud-select-selector { border-color: #E8E9EB; } .acud-select:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-search-input { margin: 0; padding: 0; background: transparent; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .acud-select:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; } .acud-select-open:not(.acud-select-customize-input) .acud-select-selector { border-color: #2468F2; } .acud-select-selection-item { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #B8BABF; } @media all and (-ms-high-contrast: none) { .acud-select-selection-item *::-ms-backdrop, .acud-select-selection-item { flex: auto; } } .acud-select-disabled .acud-select-selection-item { color: #B8BABF; } .acud-select-selection-placeholder { flex: 1; overflow: hidden; color: #B8BABF; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; } @media all and (-ms-high-contrast: none) { .acud-select-selection-placeholder *::-ms-backdrop, .acud-select-selection-placeholder { flex: auto; } } .acud-select-arrow { position: absolute; top: 53%; right: 12px; width: 16px; height: 16px; margin-top: -8px; color: #B8BABF; font-size: 16px; line-height: 1; text-align: center; pointer-events: none; } .acud-select-arrow .acudicon { vertical-align: top; transition: transform 0.3s; } .acud-select-arrow .acudicon > svg { vertical-align: top; } .acud-select-arrow .acudicon:not(.acud-select-suffix) { pointer-events: auto; } .acud-select-disabled .acud-select-arrow { cursor: not-allowed; } .acud-select-clear { position: absolute; top: 50%; right: 32px; z-index: 1; display: inline-flex; width: 12px; height: 12px; border-radius: 6px; margin-top: -6px; font-size: 20px; font-style: normal; line-height: 1; text-align: center; text-transform: none; cursor: pointer; opacity: 0; text-rendering: auto; color: #FFFFFF; background-color: #D4D6D9; border-color: transparent; } .acud-select-clear::before { display: block; } .acud-select:hover .acud-select-clear { opacity: 1; } .acud-select-clear .acudicon-outlined-close { display: inline-flex; width: 12px; height: 12px; padding-left: 2px; padding-top: 2px; } .acud-select-clear:hover { color: #FFFFFF; } .acud-select-clear:focus, .acud-select-clear:active { color: #FFFFFF; } .acud-select-clear[disabled], .acud-select-clear[aria-disabled="true"], .acud-select-clear[disabled]:hover, .acud-select-clear[aria-disabled="true"]:hover, .acud-select-clear[disabled]:focus, .acud-select-clear[aria-disabled="true"]:focus, .acud-select-clear[disabled]:active, .acud-select-clear[aria-disabled="true"]:active { color: #FFFFFF; } .acud-select-clear:hover { background-color: #5C5F66; } .acud-select-clear:focus, .acud-select-clear:active { background-color: #303540; } .acud-select-clear[disabled], .acud-select-clear[aria-disabled="true"], .acud-select-clear[disabled]:hover, .acud-select-clear[aria-disabled="true"]:hover, .acud-select-clear[disabled]:focus, .acud-select-clear[aria-disabled="true"]:focus, .acud-select-clear[disabled]:active, .acud-select-clear[aria-disabled="true"]:active { background-color: #F2F2F4; } .acud-select-clear:hover { border-color: transparent; } .acud-select-clear:focus, .acud-select-clear:active { border-color: transparent; } .acud-select-clear[disabled], .acud-select-clear[aria-disabled="true"], .acud-select-clear[disabled]:hover, .acud-select-clear[aria-disabled="true"]:hover, .acud-select-clear[disabled]:focus, .acud-select-clear[aria-disabled="true"]:focus, .acud-select-clear[disabled]:active, .acud-select-clear[aria-disabled="true"]:active { border-color: transparent; } .acud-select-dropdown { margin: 0; padding: 0; position: absolute; top: -9999px; left: -9999px; z-index: 1050; padding: 4px 0; overflow: hidden; font-size: 12px; font-variant: initial; border-radius: 4px; outline: none; background-color: #FFFFFF; box-shadow: 0px 2px 8px 0px rgba(7, 12, 20, 0.12); } .acud-select-dropdown.slide-up-enter.slide-up-enter-active.acud-select-dropdown-placement-bottomLeft, .acud-select-dropdown.slide-up-appear.slide-up-appear-active.acud-select-dropdown-placement-bottomLeft { animation-name: acudSlideUpIn; } .acud-select-dropdown.slide-up-enter.slide-up-enter-active.acud-select-dropdown-placement-topLeft, .acud-select-dropdown.slide-up-appear.slide-up-appear-active.acud-select-dropdown-placement-topLeft { animation-name: acudSlideDownIn; } .acud-select-dropdown.slide-up-leave.slide-up-leave-active.acud-select-dropdown-placement-bottomLeft { animation-name: acudSlideUpOut; } .acud-select-dropdown.slide-up-leave.slide-up-leave-active.acud-select-dropdown-placement-topLeft { animation-name: acudSlideDownOut; } .acud-select-dropdown-hidden { display: none; } .acud-select-dropdown-empty { color: #B8BABF; } .acud-select-item-empty { color: #B8BABF; position: relative; display: flex; padding: 7px 12px; font-weight: normal; font-size: 12px; line-height: 20px; } .acud-select-item { position: relative; display: flex; min-height: 32px; padding: 5px 12px; color: #151B26; font-weight: normal; font-size: 12px; line-height: 22px; cursor: pointer; transition: background 0.3s ease; } .acud-select-item-group { color: #151B26; font-size: 12px; cursor: default; } .acud-select-item-group:hover { color: #151B26; } .acud-select-item-group:focus, .acud-select-item-group:active { color: #151B26; } .acud-select-item-group[disabled], .acud-select-item-group[aria-disabled="true"], .acud-select-item-group[disabled]:hover, .acud-select-item-group[aria-disabled="true"]:hover, .acud-select-item-group[disabled]:focus, .acud-select-item-group[aria-disabled="true"]:focus, .acud-select-item-group[disabled]:active, .acud-select-item-group[aria-disabled="true"]:active { color: #B8BABF; } .acud-select-item-group-arrow { margin-right: 8px; display: flex; cursor: pointer; } .acud-select-item-group-arrow .acudicon { display: flex; color: #84868C; } .acud-select-item-group-checkbox.acud-checkbox-wrapper { margin-right: 8px; } .acud-select-item-group-keep-expand { cursor: default; color: #B8BABF; } .acud-select-item-group-keep-expand:hover { color: #B8BABF; background-color: #E6F0FF; } .acud-select-item-group:hover { background-color: #E6F0FF; } .acud-select-item-option { display: flex; } .acud-select-item-option .acud-checkbox-wrapper { height: 16px; margin-top: 3px; } .acud-select-item-option-content { flex: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .acud-select-item-option-state { flex: none; } .acud-select-item-option-selected:not(.acud-select-item-option-disabled) { color: #2468F2; background-color: #FFFFFF; border-color: transparent; } .acud-select-item-option-selected:not(.acud-select-item-option-disabled) .acud-select-item-option-state { color: #151B26; } .acud-select-item-option-active:not(.acud-select-item-option-disabled) { background-color: #E6F0FF; } .acud-select-item-option-disabled { color: #B8BABF; cursor: not-allowed; } .acud-select-item-option-grouped { padding-left: 48px; } .acud-select-item-option-grouped-keep-expand { padding-left: 24px; } .acud-select-lg { font-size: 14px; } .acud-select-borderless .acud-select-selector { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } .acud-select-search-highlight { color: #2468F2; } .acud-select-dropdown-multiple .acud-select-item-option-selected:not(.acud-select-item-option-disabled) { color: inherit; }