UNPKG

rui-react

Version:
917 lines (796 loc) 24.9 kB
*, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } hr { margin: 1rem 0; color: inherit; background-color: currentColor; border: 0; opacity: 0.25; } hr:not([size]) { height: 1px; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title], abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; text-decoration-skip-ink: none; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul { padding-left: 2rem; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small { font-size: 0.875em; } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a { color: #0d6efd; text-decoration: none; } a:hover { color: #024dbc; text-decoration: underline; } a:not([href]), a:not([href]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em; } pre code { font-size: inherit; color: inherit; word-break: normal; } code { font-size: 0.875em; color: #d63384; word-wrap: break-word; } a > code { color: inherit; } figure { margin: 0 0 1rem; } img { vertical-align: middle; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: .5rem; padding-bottom: .5rem; color: #6c757d; text-align: left; caption-side: bottom; } th { text-align: inherit; } label { display: inline-block; margin-bottom: .5rem; } button { border-radius: 0; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } select { word-wrap: normal; } [list]::-webkit-calendar-picker-indicator { display: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: textfield; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } mark { padding: 0.2em; background-color: #fcf8e3; } progress { vertical-align: baseline; } ::-webkit-datetime-edit { overflow: visible; line-height: 0; } [type="search"] { outline-offset: -2px; -webkit-appearance: textfield; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-color-swatch-wrapper { padding: 0; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } main { display: block; } [hidden] { display: none !important; } .zoom-in-top-appear { opacity: 0; transform: scaleY(0); } .zoom-in-top-appear-active { opacity: 1; transform: scaleY(1); transform-origin: center top; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-top-enter { opacity: 0; transform: scaleY(0); } .zoom-in-top-enter-active { opacity: 1; transform: scaleY(1); transform-origin: center top; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-top-exit { opacity: 1; } .zoom-in-top-exit-active { opacity: 0; transform: scaleY(0); transform-origin: center top; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-bottom-appear { opacity: 0; transform: scaleY(0); } .zoom-in-bottom-appear-active { opacity: 1; transform: scaleY(1); transform-origin: center bottom; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-bottom-enter { opacity: 0; transform: scaleY(0); } .zoom-in-bottom-enter-active { opacity: 1; transform: scaleY(1); transform-origin: center bottom; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-bottom-exit { opacity: 1; } .zoom-in-bottom-exit-active { opacity: 0; transform: scaleY(0); transform-origin: center bottom; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-left-appear { opacity: 0; transform: scale(0.45, 0.45); } .zoom-in-left-appear-active { opacity: 1; transform: scale(1, 1); transform-origin: top left; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-left-enter { opacity: 0; transform: scale(0.45, 0.45); } .zoom-in-left-enter-active { opacity: 1; transform: scale(1, 1); transform-origin: top left; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-left-exit { opacity: 1; } .zoom-in-left-exit-active { opacity: 0; transform: scale(0.45, 0.45); transform-origin: top left; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-right-appear { opacity: 0; transform: scale(0.45, 0.45); } .zoom-in-right-appear-active { opacity: 1; transform: scale(1, 1); transform-origin: top right; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-right-enter { opacity: 0; transform: scale(0.45, 0.45); } .zoom-in-right-enter-active { opacity: 1; transform: scale(1, 1); transform-origin: top right; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .zoom-in-right-exit { opacity: 1; } .zoom-in-right-exit-active { opacity: 0; transform: scale(0.45, 0.45); transform-origin: top right; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; } .rui-btn { position: relative; display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; white-space: nowrap; text-align: center; vertical-align: middle; background-image: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .rui-btn[aria-disabled='true'], .rui-btn[disabled] { cursor: not-allowed; opacity: 0.65; box-shadow: none; } .rui-btn[aria-disabled='true'] > *, .rui-btn[disabled] > * { pointer-events: none; } .rui-btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .rui-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .rui-btn-default { color: #212529; background: #fff; border-color: #ced4da; } .rui-btn-default:hover { color: #0d6efd; background: #fff; border-color: #0d6efd; } .rui-btn-default:disabled, .rui-btn-default.disabled { color: #212529; background: #fff; border-color: #ced4da; } .rui-btn-primary { color: #fff; background: #0d6efd; border-color: #0d6efd; } .rui-btn-primary:hover { color: #fff; background: #3385fd; border-color: #408cfd; } .rui-btn-primary:disabled, .rui-btn-primary.disabled { color: #fff; background: #0d6efd; border-color: #0d6efd; } .rui-btn-danger { color: #fff; background: #dc3545; border-color: #dc3545; } .rui-btn-danger:hover { color: #fff; background: #e25663; border-color: #e4606d; } .rui-btn-danger:disabled, .rui-btn-danger.disabled { color: #fff; background: #dc3545; border-color: #dc3545; } .rui-btn-link { font-weight: 400; color: #0d6efd; background-color: #fff; text-decoration: none; box-shadow: none; } .rui-btn-link:hover { color: #024dbc; text-decoration: underline; } .rui-btn-link:focus, .rui-btn-link.focus { text-decoration: underline; box-shadow: none; } .rui-btn-link:disabled, .rui-btn-link[aria-disabled] { cursor: not-allowed; color: #6c757d; text-decoration: none; } .rui-alert { width: 100%; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; display: flex; align-items: flex-start; } .rui-alert-title { overflow-wrap: break-word; overflow: hidden; } .rui-alert-description { font-size: 0.875rem; } .rui-alert-success { color: #fff; background: #52c41a; border-color: #44a216; } .rui-alert-default { color: #fff; background: #0d6efd; border-color: #025ce2; } .rui-alert-warning { color: #fff; background: #fadb14; border-color: #e3c505; } .rui-alert-danger { color: #fff; background: #dc3545; border-color: #c82333; } .rui-alert-close { margin-left: auto; color: inherit; cursor: pointer; } .rui-menu { display: flex; flex-wrap: wrap; list-style: none; border-bottom: 1px solid #dee2e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); padding-left: 0; margin-bottom: 2rem; } .rui-menu-item { cursor: pointer; padding: 0.5rem 1rem; border-bottom: 2px solid transparent; transition: color 0.15s ease-in-out, border 0.15s ease-in-out, background-color 0.15s ease-in-out; } .rui-menu-item-active { color: #0d6efd; border-bottom: 2px solid #0d6efd; } .rui-menu-item:hover { border-bottom: 2px solid #0d6efd; } .rui-menu-item-disabled, .rui-menu-item-disabled:hover { cursor: not-allowed; border-bottom: none; color: #6c757d; } .rui-submenu-arrowIcon { margin-left: 0.5rem; transition: transform .25s ease-in-out; } .rui-submenu-arrowIcon-up { transform: rotateX(180deg); } .rui-menu-vertical { flex-direction: column; border-bottom: 0; border-right: 1px solid #dee2e6; } .rui-menu-vertical > .rui-menu-item { border-left: 2px solid transparent; border-bottom: none; } .rui-menu-vertical > .rui-menu-item-active, .rui-menu-vertical > .rui-menu-item:hover { border-left: 2px solid #0d6efd; } .rui-menu-vertical > .rui-menu-item-active .rui-submenu { color: initial; } .rui-menu-vertical > .rui-menu-item-active .rui-submenu-title { color: #0d6efd; } .rui-menu-vertical > .rui-menu-item-disabled, .rui-menu-vertical > .rui-menu-item-disabled:hover { border-left: 2px solid transparent; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item { padding: 0; border-left: 2px solid transparent; border-radius: 0.2rem; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu-title { padding: 0.5rem 1rem; border-radius: 0.2rem; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu-title:hover { background: #e9ecef; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu { padding-left: 0; background: #f8f9fa; border-radius: 0.2rem; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu > .rui-menu-item { list-style: none; border-bottom: none; padding-left: 2rem; border-radius: 0.2rem; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu > .rui-menu-item:hover { background: #e9ecef; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu > .rui-menu-item-active, .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu > .rui-menu-item-active:hover { background: #ecf3ff; } .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu > .rui-menu-item-disabled, .rui-menu-vertical .rui-menu-item-submenu.rui-menu-item .rui-submenu > .rui-menu-item-disabled:hover { background: none; } .rui-menu-horizontal .rui-menu-item-submenu { position: relative; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item { border-bottom: 2px solid transparent; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item:hover, .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item-active { color: initial; border-bottom: 2px solid #0d6efd; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item-active .rui-submenu-title { color: #0d6efd; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu { position: absolute; padding-left: 0; white-space: nowrap; top: calc(100% + 0.5rem); left: 0; z-index: 3; list-style: none; border: 1px solid #dee2e6; border-radius: 0.2rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background: #fff; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu .rui-menu-item { border-bottom: none; border-radius: 0.2rem; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu .rui-menu-item:hover { background: #e9ecef; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu .rui-menu-item-active, .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu .rui-menu-item-active:hover { background: #ecf3ff; } .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu .rui-menu-item-disabled, .rui-menu-horizontal .rui-menu-item-submenu.rui-menu-item .rui-submenu .rui-menu-item-disabled:hover { background: none; } .rui-tabs-nav { border-bottom: 1px solid #dee2e6; } .rui-tabs-nav-item { background: #fff; padding: 0.5rem 1rem; } .rui-tabs-nav-item-active { color: #0d6efd; } .rui-tabs-nav-item[disabled] { cursor: not-allowed; } .rui-tabs-nav-line .rui-tabs-nav-item { border: none; } .rui-tabs-nav-line .rui-tabs-nav-item-active { border-bottom: 2px solid #0d6efd; } .rui-tabs-nav-card .rui-tabs-nav-item { margin-bottom: -1px; border: 1px solid transparent; border-bottom: 1px solid #dee2e6; } .rui-tabs-nav-card .rui-tabs-nav-item-active { border: 1px solid #dee2e6; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom: 1px solid transparent; } .rui-tabs-content { margin-top: 1rem; } .rui-icon { fill: currentColor; } .rui-icon-primary { color: #0d6efd; } .rui-icon-secondary { color: #6c757d; } .rui-icon-success { color: #52c41a; } .rui-icon-info { color: #17a2b8; } .rui-icon-warning { color: #fadb14; } .rui-icon-danger { color: #dc3545; } .rui-icon-light { color: #f8f9fa; } .rui-icon-dark { color: #343a40; } .rui-input { border: none; color: #212529; padding: 0; width: 100%; } .rui-input:focus { outline: none; } .rui-input:disabled { cursor: not-allowed; } .rui-input::placeholder { color: #6c757d; } .rui-input-wrapper > .rui-input-addon { color: #495057; background: #e9ecef; border: 1px solid #ced4da; border-radius: 0.25rem; display: inline-block; line-height: 1.5; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; } .rui-input-wrapper > .rui-input-addon.rui-input-prepend { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .rui-input-wrapper > .rui-input-addon.rui-input-append { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .rui-input-wrapper > .rui-input-affix-wrapper { border: 1px solid #ced4da; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0 #fff; color: #495057; transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out; line-height: 1.5; display: inline-flex; flex: 1; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; } .rui-input-wrapper > .rui-input-affix-wrapper:hover { border-color: #8bbafe; } .rui-input-wrapper > .rui-input-affix-wrapper:focus-within { border-color: #8bbafe; box-shadow: inset 0 0 0 0 #fff, 0 0 0 0.2rem rgba(13, 110, 253, 0.25); position: relative; z-index: 1; } .rui-input-wrapper > .rui-input-affix-wrapper[aria-disabled='true'] { background: #e9ecef; transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out; border-color: #ced4da; box-shadow: none; } .rui-input-wrapper > .rui-input-affix-wrapper[aria-disabled='true']:hover { border-color: #ced4da; } .rui-input-wrapper > .rui-input-affix-wrapper.rui-input-has-prepend { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rui-input-wrapper > .rui-input-affix-wrapper.rui-input-has-append { border-top-right-radius: 0; border-bottom-right-radius: 0; } .rui-input-wrapper-lg > .rui-input-affix-wrapper, .rui-input-wrapper-lg > .rui-input-addon { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .rui-input-wrapper-sm > .rui-input-affix-wrapper, .rui-input-wrapper-sm > .rui-input-addon { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .rui-input-wrapper { display: inline-flex; width: 100%; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.5; font-size: 1rem; } .rui-input-prefix { margin-right: 0.75rem; } .rui-input-suffix { margin-left: 0.75rem; } .rui-autoComplete-wrapper { position: relative; } .rui-autoComplete-wrapper .rui-autoComplete-list { background: #fff; width: 100%; max-height: 16rem; min-height: 0; overflow-y: auto; position: absolute; z-index: 3; top: calc(.3rem + 100%); left: 0; list-style: none; margin-bottom: 0; font-size: 1rem; border: 1px solid #ced4da; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); border-radius: 0.25rem; padding: 0; color: #495057; transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1); } .rui-autoComplete-wrapper .rui-autoComplete-list .rui-autoComplete-item { border: 1px solid transparent; padding: 0.375rem 0.75rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .rui-autoComplete-wrapper .rui-autoComplete-list .rui-autoComplete-item:hover, .rui-autoComplete-wrapper .rui-autoComplete-list .rui-autoComplete-item-candidate { background: #e9ecef; } .rui-autoComplete-wrapper .rui-autoComplete-list .rui-autoComplete-item:first-of-type { margin-top: 0.375rem; } .rui-autoComplete-wrapper .rui-autoComplete-list .rui-autoComplete-item:last-of-type { margin-bottom: 0.375rem; } .rui-autoComplete-wrapper .rui-autoComplete-list-lg { font-size: 1.25rem; border-radius: 0.3rem; } .rui-autoComplete-wrapper .rui-autoComplete-list-lg .rui-autoComplete-item { padding: 0.5rem 1rem; } .rui-autoComplete-wrapper .rui-autoComplete-list-sm { font-size: 0.875rem; border-radius: 0.2rem; } .rui-autoComplete-wrapper .rui-autoComplete-list-sm .rui-autoComplete-item { padding: 0.25rem 0.5rem; } .rui-autoComplete-wrapper .rui-autoComplete-list > .rui-autoComplete-loadingIcon { margin: 1rem auto; text-align: center; color: #adb5bd; } .rui-upload .rui-upload-fileList { list-style: none; padding-left: 0; margin-bottom: 0; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item { position: relative; margin-top: 0.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info { margin-right: 2rem; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info-status > .rui-icon { margin: 0 0.5rem; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info-name { cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info-name.uploadFile-success { color: #52c41a; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info-name.uploadFile-ready { color: #0d6efd; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info-name.uploadFile-uploading { color: #0d6efd; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-info-name.uploadFile-error { color: #dc3545; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-action { position: absolute; top: 0; right: 0; cursor: pointer; opacity: 0; transition: opacity 250ms ease-in-out; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-action > .rui-icon { margin-right: 0.5rem; color: #6c757d; } .rui-upload .rui-upload-fileList .rui-upload-fileList-item-action > .rui-icon:hover { color: #343a40; transition: color 250ms ease-in-out; } .rui-upload li.rui-upload-fileList-item:hover { background-color: #e9ecef; border-radius: 0.25rem; } .rui-upload li.rui-upload-fileList-item:hover .rui-upload-fileList-item-action { opacity: 1; } .rui-upload .rui-upload-dragger { background: #f8f9fa; border: 1px dashed #dee2e6; border-radius: 4px; cursor: pointer; } .rui-upload .rui-upload-dragger.isDragOver { border-color: #0d6efd; background: rgba(13, 110, 253, 0.1); } .rui-upload .rui-upload-dragger:hover { border-color: #0d6efd; } .rui-progress { display: flex; align-items: center; } .rui-progress-outer { flex: 1; border-radius: 0.25rem; background: #e9ecef; position: relative; } .rui-progress-inner { position: absolute; top: 0; left: 0; transition: width 0.6s ease; border-radius: 0.25rem; height: 100%; } .rui-progress-primary .rui-progress-inner { background: #0d6efd; } .rui-progress-secondary .rui-progress-inner { background: #6c757d; } .rui-progress-success .rui-progress-inner { background: #52c41a; } .rui-progress-info .rui-progress-inner { background: #17a2b8; } .rui-progress-warning .rui-progress-inner { background: #fadb14; } .rui-progress-danger .rui-progress-inner { background: #dc3545; } .rui-progress-light .rui-progress-inner { background: #f8f9fa; } .rui-progress-dark .rui-progress-inner { background: #343a40; } .rui-progress-text { display: inline-block; font-size: 0.75rem; width: 3em; margin-left: 10px; } .rui-progress-status-success .rui-progress-inner { background: #52c41a; } .rui-progress-status-exception .rui-progress-inner { background: #dc3545; }