UNPKG

leo-design-ui

Version:

React Design Library

1,074 lines (958 loc) 20.7 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; } h6, h5, h4, h3, h2, h1 { 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: 0.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: -0.25em; } sup { top: -0.5em; } a { color: #0d6efd; text-decoration: none; } a:hover { color: rgb(1.5532786885, 76.887295082, 187.9467213115); 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: 0.5rem; padding-bottom: 0.5rem; color: #6c757d; text-align: left; caption-side: bottom; } th { text-align: inherit; } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } 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-enter { opacity: 0; transform: scaleY(0); } .zoom-in-top-enter-active { opacity: 1; transform: scaleY(1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: center top; } .zoom-in-top-exit { opacity: 1; } .zoom-in-top-exit-active { opacity: 0; transform: scaleY(0); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: center top; } .zoom-in-left-enter { opacity: 0; transform: scale(0.45, 0.45); } .zoom-in-left-enter-active { opacity: 1; transform: scale(1, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: top left; } .zoom-in-left-exit { opacity: 1; } .zoom-in-left-exit-active { opacity: 0; transform: scale(0.45, 0.45); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: top left; } .zoom-in-right-enter { opacity: 0; transform: scale(0.45, 0.45); } .zoom-in-right-enter-active { opacity: 1; transform: scale(1, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: top right; } .zoom-in-right-exit { opacity: 1; } .zoom-in-right-exit-active { opacity: 0; transform: scale(0.45, 0.45); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: top right; } .zoom-in-bottom-enter { opacity: 0; transform: scaleY(0); } .zoom-in-bottom-enter-active { opacity: 1; transform: scaleY(1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: center bottom; } .zoom-in-bottom-exit { opacity: 1; } .zoom-in-bottom-exit-active { opacity: 0; transform: scaleY(0); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transform-origin: center bottom; } .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; } .btn.disabled, .btn[disabled] { cursor: not-allowed; opacity: 0.65; box-shadow: none; } .btn.disabled > *, .btn[disabled] > * { pointer-events: none; } .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .btn-primary { color: #fff; background: #0d6efd; border-color: #0d6efd; } .btn-primary:hover { color: #fff; background: rgb(50.9364754098, 132.7305327869, 253.3135245902); border-color: rgb(50.9364754098, 132.7305327869, 253.3135245902); } .btn-primary:focus, .btn-primary.focus { outline: 0; color: #fff; background: rgb(50.9364754098, 132.7305327869, 253.3135245902); border-color: rgb(50.9364754098, 132.7305327869, 253.3135245902); } .btn-primary:disabled, .btn-primary.disabled { color: #fff; background: #0d6efd; border-color: #0d6efd; } .btn-success { color: #fff; background: #52c41a; border-color: #52c41a; } .btn-success:hover { color: #fff; background: rgb(97.5, 225.75, 34.5); border-color: rgb(97.5, 225.75, 34.5); } .btn-success:focus, .btn-success.focus { outline: 0; color: #fff; background: rgb(97.5, 225.75, 34.5); border-color: rgb(97.5, 225.75, 34.5); } .btn-success:disabled, .btn-success.disabled { color: #fff; background: #52c41a; border-color: #52c41a; } .btn-danger { color: #fff; background: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background: rgb(225.6487341772, 85.6012658228, 99.0189873418); border-color: rgb(225.6487341772, 85.6012658228, 99.0189873418); } .btn-danger:focus, .btn-danger.focus { outline: 0; color: #fff; background: rgb(225.6487341772, 85.6012658228, 99.0189873418); border-color: rgb(225.6487341772, 85.6012658228, 99.0189873418); } .btn-danger:disabled, .btn-danger.disabled { color: #fff; background: #dc3545; border-color: #dc3545; } .btn-warning { color: #fff; background: #fadb14; border-color: #fadb14; } .btn-warning:hover { color: #fff; background: rgb(250.796875, 224.7375, 57.453125); border-color: rgb(250.796875, 224.7375, 57.453125); } .btn-warning:focus, .btn-warning.focus { outline: 0; color: #fff; background: rgb(250.796875, 224.7375, 57.453125); border-color: rgb(250.796875, 224.7375, 57.453125); } .btn-warning:disabled, .btn-warning.disabled { color: #fff; background: #fadb14; border-color: #fadb14; } .btn-default { color: #212529; background: #fff; border-color: #ced4da; } .btn-default:hover { color: #0d6efd; background: #fff; border-color: #0d6efd; } .btn-default:focus, .btn-default.focus { outline: 0; color: #0d6efd; background: #fff; border-color: #0d6efd; } .btn-default:disabled, .btn-default.disabled { color: #212529; background: #fff; border-color: #ced4da; } .btn-link { font-weight: 400; color: #0d6efd; text-decoration: none; box-shadow: none; } .btn-link:hover { color: rgb(1.5532786885, 76.887295082, 187.9467213115); text-decoration: underline; } .btn-link:focus, .btn-link.focus { text-decoration: underline; box-shadow: none; } .btn-link:disabled, .btn-link.disabled { color: #6c757d; pointer-events: none; } .leo-alert { width: 400px; margin: 10px auto; padding: 0.375rem 1.175rem; box-sizing: border-box; border: 1px solid transparent; border-radius: 0.25rem; } .leo-alert .alert_tit { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; } .leo-alert .alert_tit .alert_icon { font-size: 1rem; margin-right: 8px; margin-top: 5px; } .leo-alert .alert_tit .closable { cursor: pointer; font-weight: normal; font-size: 0.875rem; color: #6c757d; } .leo-alert .alert_tit .closable:hover { color: #343a40; } .leo-alert .alert_tit_and_text { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; margin-bottom: 10px; } .leo-alert .alert_tit_and_text .alert_icon { font-size: 1.5rem; margin-right: 8px; margin-top: 5px; } .leo-alert .alert_tit_and_text .closable { cursor: pointer; font-weight: normal; font-size: 1.25rem; color: #6c757d; } .leo-alert .alert_tit_and_text .closable:hover { color: #343a40; } .leo-alert .alert_tit_center { display: flex; align-items: center; } .leo-alert .description { font-size: 0.875rem; } .leo-alert-primary { background: rgba(85.6, 153.5, 253.6, 0.12); border-color: rgba(85.6, 153.5, 253.6, 0.7); color: #343a40; } .leo-alert-success { background: rgba(127.8648648649, 231.3891891892, 77.0108108108, 0.12); border-color: rgba(127.8648648649, 231.3891891892, 77.0108108108, 0.7); color: #343a40; } .leo-alert-warning { background: rgba(251.5, 229.8, 90.5, 0.12); border-color: rgba(251.5, 229.8, 90.5, 0.7); color: #343a40; } .leo-alert-danger { background: rgba(230.5, 113.6, 124.8, 0.12); border-color: rgba(230.5, 113.6, 124.8, 0.7); color: #343a40; } .leo-alert-info { background: rgba(121.78125, 132.5, 143.21875, 0.12); border-color: rgba(121.78125, 132.5, 143.21875, 0.7); color: #343a40; } .leo-menu { display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; margin-bottom: 30px; 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); } .leo-menu > .menu-item { cursor: pointer; padding: 0.5rem 1rem; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .leo-menu > .menu-item:hover, .leo-menu > .menu-item:focus { text-decoration: none; } .leo-menu > .menu-item:hover { color: #0d6efd; } .leo-menu > .menu-item.is-disabled { color: #6c757d; cursor: default; } .leo-menu > .menu-item.is-active { color: #0d6efd; border-bottom: 2px solid #0d6efd; } .leo-menu .submenu-item { position: relative; } .leo-menu .submenu-item .submenu-title { display: flex; align-items: center; } .leo-menu .submenu-item .arrow-icon { transition: transform 0.25s ease-in-out; margin-left: 3px; } .leo-menu .submenu-item:hover .arrow-icon { transform: rotate(180deg); } .leo-menu .is-vertical .arrow-icon { transform: rotate(0deg) !important; } .leo-menu .is-vertical.is-opened .arrow-icon { transform: rotate(180deg) !important; } .leo-menu .leo-submenu { list-style: none; padding-left: 0; white-space: nowrap; } .leo-menu .leo-submenu .menu-item { padding: 0.5rem 1rem; cursor: pointer; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; color: #212529; } .leo-menu .leo-submenu .menu-item.is-active, .leo-menu .leo-submenu .menu-item:hover { color: #0d6efd !important; } .menu-vertical { flex-direction: column; border-bottom: 0px; margin: 10px 20px; border-right: 1px solid #dee2e6; } .menu-vertical > .menu-item { border-left: 2px solid transparent; } .menu-vertical > .menu-item.is-active { border-bottom: 0px; border-left: 2px solid #0d6efd; } .menu-horizontal > .menu-item { border-bottom: 2px solid transparent; } .menu-horizontal .leo-submenu { position: absolute; background: #fff; z-index: 100; top: calc(100% + 8px); left: 0; border: 1px solid #dee2e6; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } .leo-tabs-wrapper .leo-tabs { display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; margin-bottom: 10px; 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); } .leo-tabs-wrapper .leo-tabs .tab-item { cursor: pointer; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; padding: 0.5rem 1rem; } .leo-tabs-wrapper .leo-tabs .tab-item:hover { color: #0d6efd; } .leo-tabs-wrapper .leo-tabs .tab-item.is-active { color: #0d6efd; border-bottom: 2px solid #0d6efd; } .leo-tabs-wrapper .leo-tabs .tab-item.is-disabled { cursor: default; color: #6c757d; border-bottom: none; } .leo-tabs-wrapper .leo-tab-item-card { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 10px; list-style: none; box-shadow: none; border-bottom: 1px solid #dee2e6; } .leo-tabs-wrapper .leo-tab-item-card .tab-item { position: relative; cursor: pointer; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; padding: 0.5rem 1rem; background-color: #f8f9fa; border: #dee2e6 solid 1px; border-radius: 5px 5px 0 0; border-bottom: none; margin: 0 0.5px; } .leo-tabs-wrapper .leo-tab-item-card .tab-item:hover { color: #0d6efd; } .leo-tabs-wrapper .leo-tab-item-card .tab-item.is-active { color: #0d6efd; background: #fff; } .leo-tabs-wrapper .leo-tab-item-card .tab-item.is-disabled { cursor: default; color: #6c757d; border-bottom: none; } .leo-tabs-wrapper .leo-tab-item-card .tab-item .hide-line { position: absolute; width: 100%; height: 1px; left: 0; bottom: -1px; background-color: #fff; } .leo-tabs-wrapper .tabs-large { font-size: 1.25rem; } .leo-tabs-wrapper .tabs-small { font-size: 0.875rem; } .leo-tabs-wrapper .tabs-middle { font-size: 1rem; } .leo-tabs-wrapper .tabs-top { display: flex; } .leo-tabs-wrapper .tabs-left { display: flex; flex-direction: column; } .leo-tabs-wrapper .tabs-left .tab-item { cursor: pointer; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; padding: 0.5rem 1rem; } .leo-tabs-wrapper .tabs-left .tab-item:hover { color: #0d6efd; } .leo-tabs-wrapper .tabs-left .tab-item.is-active { color: #0d6efd; border-bottom: none; border-left: 2px solid #0d6efd; } .leo-tabs-wrapper .tabs-left .tab-item.is-disabled { cursor: default; color: #6c757d; border-bottom: none; } .leo-tabs-wrapper .leo-tabs-content { margin-left: 10px; } .icon-primary { color: #0d6efd; } .icon-secondary { color: #6c757d; } .icon-success { color: #52c41a; } .icon-info { color: #495057; } .icon-warning { color: #fadb14; } .icon-danger { color: #dc3545; } .icon-light { color: #f8f9fa; } .icon-dark { color: #343a40; } .leo-input-wrapper { display: flex; width: 100%; margin-bottom: 30px; position: relative; } .leo-input-wrapper .icon-wrapper { position: absolute; height: 100%; width: 35px; display: flex; justify-content: center; align-items: center; color: #495057; right: 0; top: 0; opacity: 0.3; } .leo-input-wrapper .icon-wrapper svg { color: #6c757d; } .icon-wrapper + .leo-input-inner { padding-right: 35px; } .leo-input-inner { width: 100%; font-size: 1rem; 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"; padding: 0.375rem 0.75rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .leo-input-inner:hover { border-color: rgb(38.2909836066, 125.1536885246, 253.2090163934); } .leo-input-inner:focus { color: #495057; background-color: #fff; border-color: rgb(38.2909836066, 125.1536885246, 253.2090163934); outline: 0; } .leo-input-inner::placeholder { color: #6c757d; opacity: 0.6; } .leo-input-inner:disabled, .leo-input-inner[readonly] { background-color: #e9ecef; border: none; opacity: 1; } .leo-input-group-prepend, .leo-input-group-append { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0.25rem; } .leo-input-group-append + .btn { padding: 0; border: 0; } .input-group > .leo-input-group-prepend, .input-group.input-group-append > .leo-input-inner { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .leo-input-group-append, .input-group.input-group-prepend > .leo-input-inner { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-size-sm .leo-input-inner { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .input-size-lg .leo-input-inner { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .leo-auto-complete { position: relative; } .leo-auto-complete .leo-suggestion-list { list-style: none; padding-left: 0; white-space: nowrap; position: absolute; background: #fff; z-index: 100; top: calc(100% + 8px); left: 0; border: 1px solid #dee2e6; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); width: 100%; } .leo-auto-complete .leo-suggestion-list .suggstions-loading-icon { display: flex; align-items: center; justify-content: center; min-height: 75px; } .leo-auto-complete .leo-suggestion-list .suggestion-item { padding: 0.5rem 1rem; cursor: pointer; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; color: #212529; } .leo-auto-complete .leo-suggestion-list .suggestion-item.is-active { background: #0d6efd !important; color: #fff !important; } .leo-auto-complete .leo-suggestion-list .suggestion-item:hover { color: #0d6efd !important; } /*# sourceMappingURL=index.css.map */