UNPKG

chowa

Version:

UI component library based on React

465 lines (444 loc) 19.6 kB
/** * @license chowa v1.1.3 * * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn). * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ @keyframes cw-slide-down { 0% { max-height: 0; } 100% { max-height: 666px; } } .cw-slide-down-enter { animation-name: cw-slide-down; } .cw-slide-down-leave { animation-name: cw-slide-down; animation-direction: reverse; } .cw-slide-down-appear { animation-duration: 0.2s; animation-timing-function: ease-in; transform-origin: top; overflow-y: hidden; } .cw-zoom-appear { animation-timing-function: ease-in-out; animation-duration: 0.2s; } @keyframes cw-zoom-horizontal { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } } .cw-zoom-left-enter { transform-origin: right; animation-name: cw-zoom-horizontal; } .cw-zoom-left-leave { transform-origin: right; animation-name: cw-zoom-horizontal; animation-direction: reverse; } .cw-zoom-right-enter { transform-origin: left; animation-name: cw-zoom-horizontal; } .cw-zoom-right-leave { transform-origin: left; animation-name: cw-zoom-horizontal; animation-direction: reverse; } .cw-menu { display: flex; margin: 0; list-style: none; border-radius: 0; user-select: none; overflow: hidden; } .cw-menu-item, .cw-menu-submenu-trigger { margin: 0; box-sizing: border-box; transition: all 0.2s ease-in; white-space: nowrap; font-size: 14px; } .cw-menu-item-inner a { margin: 0; padding: 0; display: block; text-decoration: none; transition: all 0.2s ease-in; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-menu-group { margin: 0; padding: 0; box-sizing: border-box; } .cw-menu-group-title { margin: 0; box-sizing: border-box; font-size: 12px; line-height: 28px; height: 28px; } .cw-menu-submenu-collapse, .cw-menu-group-inner { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } .cw-menu-horizontal { flex-direction: row; height: 58px; line-height: 58px; font-size: 14px; flex-wrap: nowrap; padding: 0; } .cw-menu-horizontal .cw-menu-item, .cw-menu-horizontal .cw-menu-submenu-trigger { height: 100%; padding: 0 18px; position: relative; } .cw-menu-horizontal .cw-menu-submenu-trigger, .cw-menu-horizontal .cw-menu-item-inner { transition: all 0.2s ease-in; cursor: pointer; box-sizing: border-box; } .cw-menu-horizontal .cw-menu-submenu-trigger .cw-icon, .cw-menu-horizontal .cw-menu-item-inner .cw-icon { margin-right: 4px; } .cw-menu-horizontal .cw-menu-item-inner { padding: 0; margin: 0; } .cw-menu-horizontal.cw-menu-light { background-color: #fff; } .cw-menu-horizontal.cw-menu-light .cw-menu-item:before, .cw-menu-horizontal.cw-menu-light .cw-menu-submenu-trigger:before { content: ''; margin: 0; padding: 0; display: block; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; transition: all 0.2s ease-in; background-color: #7774e7; } .cw-menu-horizontal.cw-menu-light .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-light .cw-menu-item-inner a, .cw-menu-horizontal.cw-menu-light .cw-menu-submenu-trigger { color: #616a6e; } .cw-menu-horizontal.cw-menu-light .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover, .cw-menu-horizontal.cw-menu-light .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover a, .cw-menu-horizontal.cw-menu-light .cw-menu-submenu-active:not(.cw-menu-disabled) { color: #7774e7; } .cw-menu-horizontal.cw-menu-light .cw-menu-active:not(.cw-menu-disabled):before { left: 0; right: 0; } .cw-menu-horizontal.cw-menu-light .cw-menu-active, .cw-menu-horizontal.cw-menu-light .cw-menu-active .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-light .cw-menu-active .cw-menu-item-inner a { color: #7774e7; } .cw-menu-horizontal.cw-menu-light .cw-menu-disabled, .cw-menu-horizontal.cw-menu-light .cw-menu-disabled .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-light .cw-menu-disabled .cw-menu-item-inner a { color: #888da8; } .cw-menu-horizontal.cw-menu-dark { background-color: #001529; } .cw-menu-horizontal.cw-menu-dark .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-dark .cw-menu-item-inner a, .cw-menu-horizontal.cw-menu-dark .cw-menu-submenu-trigger { color: #fff; } .cw-menu-horizontal.cw-menu-dark .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover, .cw-menu-horizontal.cw-menu-dark .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover a, .cw-menu-horizontal.cw-menu-dark .cw-menu-submenu-active:not(.cw-menu-disabled) { color: #7774e7; } .cw-menu-horizontal.cw-menu-dark .cw-menu-active:not(.cw-menu-disabled) { background-color: #000810; } .cw-menu-horizontal.cw-menu-dark .cw-menu-active, .cw-menu-horizontal.cw-menu-dark .cw-menu-active .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-dark .cw-menu-active .cw-menu-item-inner a { color: #7774e7; } .cw-menu-horizontal.cw-menu-dark .cw-menu-disabled, .cw-menu-horizontal.cw-menu-dark .cw-menu-disabled .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-dark .cw-menu-disabled .cw-menu-item-inner a { color: #7f7e7e; } .cw-menu-horizontal.cw-menu-primary { background-color: #7774e7; } .cw-menu-horizontal.cw-menu-primary .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-primary .cw-menu-item-inner a, .cw-menu-horizontal.cw-menu-primary .cw-menu-submenu-trigger { color: #f2f2f2; } .cw-menu-horizontal.cw-menu-primary .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover, .cw-menu-horizontal.cw-menu-primary .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover a, .cw-menu-horizontal.cw-menu-primary .cw-menu-submenu-active:not(.cw-menu-disabled) { color: #fff; } .cw-menu-horizontal.cw-menu-primary .cw-menu-active:not(.cw-menu-disabled) { background-color: #625ee3; } .cw-menu-horizontal.cw-menu-primary .cw-menu-active, .cw-menu-horizontal.cw-menu-primary .cw-menu-active .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-primary .cw-menu-active .cw-menu-item-inner a { color: #fff; } .cw-menu-horizontal.cw-menu-primary .cw-menu-disabled, .cw-menu-horizontal.cw-menu-primary .cw-menu-disabled .cw-menu-item-inner, .cw-menu-horizontal.cw-menu-primary .cw-menu-disabled .cw-menu-item-inner a { color: #cdc7c7; } .cw-menu-vertical { flex-direction: column; transition: all 0.2s ease-in; overflow: hidden; width: 100%; padding: 12px 0; } .cw-menu-vertical .cw-menu-item, .cw-menu-vertical .cw-menu-submenu-trigger { height: 42px; line-height: 42px; padding: 0 26px; } .cw-menu-vertical .cw-menu-item-inner, .cw-menu-vertical .cw-menu-submenu-trigger { transition: all 0.2s ease-in; cursor: pointer; } .cw-menu-vertical .cw-menu-item-inner, .cw-menu-vertical .cw-menu-submenu-title { margin: 0; padding: 0; box-sizing: border-box; } .cw-menu-vertical .cw-menu-item-inner .cw-icon, .cw-menu-vertical .cw-menu-submenu-title .cw-icon { margin-right: 6px; } .cw-menu-vertical .cw-menu-submenu-trigger { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .cw-menu-vertical .cw-menu-submenu-title { line-height: 42px; height: 42px; flex: auto; } .cw-menu-vertical .cw-menu-submenu-arrow { flex: none; margin: 0; padding: 0; margin-left: 6px; transition: transform 0.2s ease-in; } .cw-menu-vertical .cw-menu-submenu-arrow-active { transform: rotate(-180deg); } .cw-menu-vertical .cw-menu-group-title { padding: 0 16px; } .cw-menu-vertical.cw-menu-collapse { width: 58px; } .cw-menu-vertical.cw-menu-collapse .cw-menu-item, .cw-menu-vertical.cw-menu-collapse .cw-menu-submenu-trigger { display: block; padding: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-menu-vertical.cw-menu-collapse .cw-menu-item-inner .cw-icon, .cw-menu-vertical.cw-menu-collapse .cw-menu-submenu-title .cw-icon { margin-right: 0; } .cw-menu-vertical.cw-menu-light { background-color: #fff; } .cw-menu-vertical.cw-menu-light .cw-menu-item-inner, .cw-menu-vertical.cw-menu-light .cw-menu-item-inner a, .cw-menu-vertical.cw-menu-light .cw-menu-submenu-trigger { color: #616a6e; } .cw-menu-vertical.cw-menu-light .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover, .cw-menu-vertical.cw-menu-light .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover a, .cw-menu-vertical.cw-menu-light .cw-menu-submenu-trigger:not(.cw-menu-disabled):hover { color: #7774e7; } .cw-menu-vertical.cw-menu-light .cw-menu-active:not(.cw-menu-disabled) { background-color: #f7f6fe; color: #7774e7; } .cw-menu-vertical.cw-menu-light .cw-menu-active:not(.cw-menu-disabled) .cw-menu-item-inner, .cw-menu-vertical.cw-menu-light .cw-menu-active:not(.cw-menu-disabled) .cw-menu-item-inner a, .cw-menu-vertical.cw-menu-light .cw-menu-active:not(.cw-menu-disabled) .cw-menu-submenu-trigger { color: #7774e7; } .cw-menu-vertical.cw-menu-light .cw-menu-submenu-active { background-color: #fff; } .cw-menu-vertical.cw-menu-light .cw-menu-group-title { color: #a5a9be; } .cw-menu-vertical.cw-menu-light .cw-menu-disabled, .cw-menu-vertical.cw-menu-light .cw-menu-disabled .cw-menu-item-inner, .cw-menu-vertical.cw-menu-light .cw-menu-disabled .cw-menu-item-inner a { color: #888da8; } .cw-menu-vertical.cw-menu-dark { background-color: #001529; } .cw-menu-vertical.cw-menu-dark .cw-menu-item-inner, .cw-menu-vertical.cw-menu-dark .cw-menu-item-inner a, .cw-menu-vertical.cw-menu-dark .cw-menu-submenu-trigger { color: #cdc7c7; } .cw-menu-vertical.cw-menu-dark .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover, .cw-menu-vertical.cw-menu-dark .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover a, .cw-menu-vertical.cw-menu-dark .cw-menu-submenu-trigger:not(.cw-menu-disabled):hover { color: #fff; } .cw-menu-vertical.cw-menu-dark .cw-menu-active:not(.cw-menu-disabled) { background-color: #7774e7; color: #fff; } .cw-menu-vertical.cw-menu-dark .cw-menu-active:not(.cw-menu-disabled) .cw-menu-item-inner, .cw-menu-vertical.cw-menu-dark .cw-menu-active:not(.cw-menu-disabled) .cw-menu-item-inner a, .cw-menu-vertical.cw-menu-dark .cw-menu-active:not(.cw-menu-disabled) .cw-menu-submenu-trigger { color: #fff; } .cw-menu-vertical.cw-menu-dark .cw-menu-submenu-active { background-color: #000810; } .cw-menu-vertical.cw-menu-dark .cw-menu-group-title { color: #989898; } .cw-menu-vertical.cw-menu-dark .cw-menu-disabled, .cw-menu-vertical.cw-menu-dark .cw-menu-disabled .cw-menu-item-inner, .cw-menu-vertical.cw-menu-dark .cw-menu-disabled .cw-menu-item-inner a { color: #7f7e7e; } .cw-menu-vertical.cw-menu-primary { background-color: #7774e7; } .cw-menu-vertical.cw-menu-primary .cw-menu-item-inner, .cw-menu-vertical.cw-menu-primary .cw-menu-item-inner a, .cw-menu-vertical.cw-menu-primary .cw-menu-submenu-trigger { color: #fff; } .cw-menu-vertical.cw-menu-primary .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover, .cw-menu-vertical.cw-menu-primary .cw-menu-item:not(.cw-menu-disabled) .cw-menu-item-inner:hover a, .cw-menu-vertical.cw-menu-primary .cw-menu-submenu-trigger:not(.cw-menu-disabled):hover { color: #fff; } .cw-menu-vertical.cw-menu-primary .cw-menu-active:not(.cw-menu-disabled) { background-color: #a29fef; color: #fff; } .cw-menu-vertical.cw-menu-primary .cw-menu-active:not(.cw-menu-disabled) .cw-menu-item-inner, .cw-menu-vertical.cw-menu-primary .cw-menu-active:not(.cw-menu-disabled) .cw-menu-item-inner a, .cw-menu-vertical.cw-menu-primary .cw-menu-active:not(.cw-menu-disabled) .cw-menu-submenu-trigger { color: #fff; } .cw-menu-vertical.cw-menu-primary .cw-menu-submenu-active { background-color: #625ee3; } .cw-menu-vertical.cw-menu-primary .cw-menu-group-title { color: #e5e2e2; } .cw-menu-vertical.cw-menu-primary .cw-menu-disabled, .cw-menu-vertical.cw-menu-primary .cw-menu-disabled .cw-menu-item-inner, .cw-menu-vertical.cw-menu-primary .cw-menu-disabled .cw-menu-item-inner a { color: #cdc7c7; } .cw-menu-overlay-submenu { margin: 0; padding: 12px 0; box-sizing: border-box; list-style: none; font-size: 14px; line-height: 34px; min-width: 160px; } .cw-menu-overlay-submenu .cw-menu-submenu-related { margin: 0; padding: 0; box-sizing: border-box; position: relative; } .cw-menu-overlay-submenu .cw-menu-item, .cw-menu-overlay-submenu .cw-menu-submenu-related-trigger { margin: 0; padding: 0 18px; box-sizing: border-box; } .cw-menu-overlay-submenu .cw-menu-item-inner, .cw-menu-overlay-submenu .cw-menu-submenu-related-trigger { transition: all 0.2s ease-in; cursor: pointer; } .cw-menu-overlay-submenu .cw-menu-item-inner .cw-icon, .cw-menu-overlay-submenu .cw-menu-submenu-related-trigger .cw-icon { margin-right: 6px; } .cw-menu-overlay-submenu .cw-menu-submenu-related-trigger { display: flex; align-items: center; justify-content: space-between; } .cw-menu-overlay-submenu .cw-menu-submenu-title { flex: auto; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-menu-overlay-submenu .cw-menu-submenu-arrow { flex: none; margin: 0 0 0 8px; padding: 0; box-sizing: border-box; } .cw-menu-overlay-submenu .cw-menu-submenu-related-inner { position: absolute; top: 0; left: 100%; min-width: 100%; margin: 0 0 0 2px; padding: 0; box-sizing: border-box; } .cw-menu-overlay-submenu .cw-menu-group-title { padding: 0 8px; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light { background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-radius: 3px; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-item-inner a, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-submenu-related-trigger { color: #616a6e; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-item:not(.cw-menu-disabled):hover .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-item:not(.cw-menu-disabled):hover .cw-menu-item-inner a, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-submenu-related-trigger:not(.cw-menu-disabled):hover { color: #7774e7; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-submenu-related-active { color: #7774e7; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-active, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-active .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-active .cw-menu-item-inner a { color: #7774e7; background-color: #f7f6fe; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-disabled, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-disabled .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-disabled .cw-menu-item-inner a { color: #888da8; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-light .cw-menu-group-title { color: #a5a9be; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark { background-color: #001529; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-radius: 3px; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-item-inner a, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-submenu-related-trigger { color: #cdc7c7; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-item:not(.cw-menu-disabled):hover .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-item:not(.cw-menu-disabled):hover .cw-menu-item-inner a, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-submenu-related-trigger:not(.cw-menu-disabled):hover { color: #fff; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-submenu-related-active { color: #fff; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-active, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-active .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-active .cw-menu-item-inner a { color: #fff; background-color: #7774e7; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-disabled, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-disabled .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-disabled .cw-menu-item-inner a { color: #7f7e7e; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-dark .cw-menu-group-title { color: #989898; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary { background-color: rgba(119, 116, 231, 0.65); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-radius: 3px; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-item-inner a, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-submenu-related-trigger { color: #fff; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-item:not(.cw-menu-disabled):hover .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-item:not(.cw-menu-disabled):hover .cw-menu-item-inner a, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-submenu-related-trigger:not(.cw-menu-disabled):hover { color: #fff; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-submenu-related-active { color: #fff; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-active, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-active .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-active .cw-menu-item-inner a { color: #fff; background-color: #7774e7; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-disabled, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-disabled .cw-menu-item-inner, .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-disabled .cw-menu-item-inner a { color: #7f7e7e; } .cw-menu-overlay-submenu.cw-menu-overlay-submenu-primary .cw-menu-group-title { color: #989898; } .cw-menu-disabled { cursor: not-allowed; } .cw-menu-disabled .cw-menu-item-inner { cursor: not-allowed; }