UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

1,270 lines (1,269 loc) 36.9 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ .c7n-btn-raised .c7n-ripple { background-color: rgba(0, 0, 0, 0.1); } .c7n-btn-raised.c7n-btn-primary .c7n-ripple, .c7n-btn-raised.c7n-btn-dashed .c7n-ripple, .c7n-btn-raised.c7n-btn-danger .c7n-ripple { background-color: rgba(255, 255, 255, 0.3); } .c7n-btn-raised-loading .c7n-ripple-wrapper { background-color: rgba(255, 255, 255, 0.15); } .c7n-btn-raised.ripple-primary .c7n-ripple { background-color: rgba(51, 103, 214, 0.1); } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-nav-container { -ms-flex-item-align: end; align-self: flex-end; height: 0.4rem; } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-ink-bar { display: none; } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab { margin: 0; margin-right: 0.02rem; padding: 0 0.16rem; line-height: 0.38rem; background: rgba(0, 0, 0, 0.04); border: 0.01rem solid #e8e8e8; border-bottom: 0; border-radius: 0.02rem 0.02rem 0 0; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab-active { color: #3f51b5; background: #fff; border-color: #e8e8e8; } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab-inactive { padding: 0; } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-nav-wrap { margin-bottom: 0; } .c7n-tabs-nav-scroll { scroll-behavior: smooth; -ms-overflow-style: none; /* IE 10+ */ scrollbar-width: none; /* Firefox */ } .c7n-tabs-nav-scroll::-webkit-scrollbar { display: none; /* Chrome Safari */ } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab .icon-close { width: 0.16rem; height: 0.13rem; margin-right: -0.05rem; margin-left: 0.03rem; overflow: hidden; color: rgba(0, 0, 0, 0.45); font-size: 0.12rem; vertical-align: middle; -webkit-transition: all 0.3s; transition: all 0.3s; } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab .icon-close:hover { color: rgba(0, 0, 0, 0.85); } .c7n-tabs.c7n-tabs-card .c7n-tabs-content > .c7n-tabs-tabpane, .c7n-tabs.c7n-tabs-editable-card .c7n-tabs-content > .c7n-tabs-tabpane { -webkit-transition: none !important; transition: none !important; } .c7n-tabs.c7n-tabs-card .c7n-tabs-content > .c7n-tabs-tabpane-inactive, .c7n-tabs.c7n-tabs-editable-card .c7n-tabs-content > .c7n-tabs-tabpane-inactive { overflow: hidden; } .c7n-tabs.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab:hover .icon-close { opacity: 1; } .c7n-tabs-extra-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 0.4rem; } .c7n-tabs-extra-content .c7n-tabs-extra-bar { display: -webkit-box; display: -ms-flexbox; display: flex; } .c7n-tabs-extra-content .c7n-tabs-more-tab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-width: 40px; background: #fff; border-left: 0.01rem solid #e8e8e8; outline: none; cursor: pointer; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-extra-content .c7n-tabs-more-tab:hover { color: #3f51b5; } .c7n-tabs-extra-content .c7n-tabs-new-tab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 40px; background: rgba(0, 0, 0, 0.04); border: 0.01rem solid #e8e8e8; border-bottom: none; border-radius: 0.02rem; outline: none; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .c7n-tabs-extra-content .c7n-tabs-new-tab:hover { color: #3f51b5; } .c7n-tabs-extra-vertical-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: auto; } .c7n-tabs-nav-add { position: absolute; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 40px; height: inherit; margin-right: 0.02rem; line-height: 0.38rem; background: rgba(0, 0, 0, 0.04); border: 0.01rem solid #e8e8e8; border-radius: 0.02rem 0.02rem 0 0; outline: none; cursor: pointer; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-nav-add:hover { color: #3f51b5; } .c7n-tabs-nav-add-fixed { position: relative; text-align: center; } .c7n-tabs-nav-vertical-add { width: 100%; height: 0.2rem; padding: 0 0.16rem; line-height: 0.1rem; border-right: none; border-bottom: 0.01rem solid #e8e8e8; } .c7n-tabs-more-vertical-tab { height: 0.2rem; margin-bottom: 5px; border-top: 0.01rem solid #e8e8e8; border-right: none; border-bottom: 0.01rem solid #e8e8e8; border-left: none; } .c7n-tabs-vertical.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-nav-container { height: auto; } .c7n-tabs-vertical.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab { margin-bottom: 0.08rem; border-bottom: 0.01rem solid #e8e8e8; } .c7n-tabs-vertical.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab-active { padding-bottom: 0.04rem; } .c7n-tabs-vertical.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab:last-child { margin-bottom: 0.08rem; } .c7n-tabs-vertical.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-new-tab { width: 90%; } .c7n-tabs-vertical.c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-extra-content { width: 100%; } .c7n-tabs-vertical.c7n-tabs-card.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-nav-wrap { margin-right: 0; } .c7n-tabs-vertical.c7n-tabs-card.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-tab { margin-right: 0.01rem; border-right: 0; border-radius: 0.02rem 0 0 0.02rem; } .c7n-tabs-vertical.c7n-tabs-card.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-tab-active { margin-right: -0.01rem; padding-right: 0.18rem; } .c7n-tabs-vertical.c7n-tabs-card.c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-nav-wrap { margin-left: 0; } .c7n-tabs-vertical.c7n-tabs-card.c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-tab { margin-left: 0.01rem; border-left: 0; border-radius: 0 0.02rem 0.02rem 0; } .c7n-tabs-vertical.c7n-tabs-card.c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-tab-active { margin-left: -0.01rem; padding-left: 0.18rem; } .c7n-tabs.c7n-tabs-card.c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-nav-container { -ms-flex-item-align: start; align-self: flex-start; } .c7n-tabs.c7n-tabs-card.c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-tab { border-top: 0; border-bottom: 0.01rem solid #e8e8e8; border-radius: 0 0 0.02rem 0.02rem; } .c7n-tabs.c7n-tabs-card.c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-tab-active { color: #3f51b5; } .c7n-tabs-customization-group { min-height: 0.01rem; margin-bottom: 0.06rem; } .c7n-tabs-customization-group-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; padding: 0.03rem 0 0.03rem; outline: none; } .c7n-tabs-customization-group-item-hover-button { visibility: hidden; -webkit-transition: none; transition: none; } .c7n-tabs-customization-group-item-hover-button .icon { -webkit-transition: none; transition: none; } .c7n-tabs-customization-group-item-hover .c7n-tabs-customization-group-item-hover-button { visibility: visible; } .c7n-tabs-customization-group-item-hover::before { position: absolute; top: 0; right: -100%; bottom: 0; left: -100%; display: block; background-color: rgba(0, 0, 0, 0.04); content: ""; } .c7n-tabs-customization-group-item-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 0.32rem; min-height: 0.24rem; margin: 0; padding: 0.04rem 0; color: inherit; line-height: 0.24rem; background: transparent; border-radius: 0.02rem 0 0 0.02rem; } .c7n-tabs-customization-group-item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c7n-tabs-customization-group-item-title-text { overflow: hidden; text-overflow: ellipsis; } .c7n-tabs-customization-group-item-title-default { display: inline-block; margin-left: 0.16rem; padding: 0 0.04rem; line-height: 1.5; border: 0.01rem solid #e0e0e0; border-radius: 0.02rem; } .c7n-tabs-customization-group-item-switcher { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 0.22rem; height: 0.32rem; margin: 0; padding: 0.05rem 0; line-height: 1; text-align: center; vertical-align: top; cursor: pointer; } .c7n-tabs-customization-group-item-switcher-icon { font-size: 0.18rem; line-height: 0.22rem; } .c7n-tabs-customization-group-item-switcher-icon-close { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .c7n-tabs-customization-group-item-switcher-noop { cursor: default; } .c7n-tabs-customization-group-item-drag-icon { color: rgba(0, 0, 0, 0.45); } .c7n-tabs-customization-group-item-dragging { background-color: #fff; -webkit-box-shadow: 0 0.05rem 0.05rem -0.03rem rgba(0, 0, 0, 0.2), 0 0.08rem 0.1rem 0.01rem rgba(0, 0, 0, 0.14), 0 0.03rem 0.14rem 0.02rem rgba(0, 0, 0, 0.12); box-shadow: 0 0.05rem 0.05rem -0.03rem rgba(0, 0, 0, 0.2), 0 0.08rem 0.1rem 0.01rem rgba(0, 0, 0, 0.14), 0 0.03rem 0.14rem 0.02rem rgba(0, 0, 0, 0.12); } .c7n-tabs-customization-group-header { display: inline-block; margin-bottom: 0.1rem; color: rgba(0, 0, 0, 0.45); font-size: 0.12rem; } .c7n-tabs-customization-panel-content { padding: 0.16rem 0.2rem; } .c7n-tabs { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; overflow: hidden; zoom: 1; } .c7n-tabs::before, .c7n-tabs::after { display: table; white-space: initial; content: ' '; } .c7n-tabs::after { clear: both; height: 0; font-size: 0; visibility: hidden; } .c7n-tabs-second-level .c7n-tabs-bar-inner { height: 0.32rem; } .c7n-tabs-second-tab { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0; padding: 0.03rem 0.08rem; color: rgba(0, 0, 0, 0.45); font-weight: 400; font-size: 0.12rem; white-space: nowrap; cursor: pointer; } .c7n-tabs-ink-bar { position: absolute; bottom: 0.01rem; left: 0; z-index: 1; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; height: 0.02rem; background-color: #3f51b5; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .c7n-tabs-bar { margin: 0 0 0.16rem 0; padding: 0; border-bottom: 0.01rem solid #e8e8e8; outline: none; -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-bar-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c7n-tabs-bar-divider { width: 0.01rem; height: 0.12rem; margin: auto 0.15rem; background-color: rgba(0, 0, 0, 0.25); } .c7n-tabs-bar:hover .c7n-tabs-hover-button { opacity: 1; } .c7n-tabs-hover-button { opacity: 0; } .c7n-tabs-bar-with-groups { padding: 0; } .c7n-tabs-bar-with-groups .c7n-tabs-ink-bar { display: block; } .c7n-tabs-bar-with-groups .c7n-tabs-nav .c7n-tabs-tab { padding: 0.08rem 0; } .c7n-tabs-group { margin: 0; padding: 0.02rem; background-color: rgba(0, 0, 0, 0.05); } .c7n-tabs-group-item { position: relative; display: inline-block; padding: 0.03rem 0.08rem; color: rgba(0, 0, 0, 0.45); font-weight: 400; font-size: 0.14rem; white-space: nowrap; cursor: pointer; } .c7n-tabs-group-item-selected { color: rgba(0, 0, 0, 0.8); font-weight: 600; background-color: #fff; border-radius: 2px; -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15); } .c7n-tabs-group-item-disabled { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; } .c7n-tabs-group-item .c7n-badge { margin: 0; vertical-align: baseline; } .c7n-tabs-group-item .c7n-tabs-invalid-badge > .c7n-scroll-number-custom-component { top: -0.02rem; right: 0; } .c7n-tabs-group-item:last-child .c7n-tabs-invalid-badge > .c7n-scroll-number-custom-component { right: -0.02rem; } .c7n-tabs-nav-container { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-item-align: stretch; align-self: stretch; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: -0.01rem; overflow: hidden; font-size: 0.13rem; line-height: 1.5; white-space: nowrap; -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); zoom: 1; } .c7n-tabs-nav-container::before, .c7n-tabs-nav-container::after { display: table; white-space: initial; content: ' '; } .c7n-tabs-nav-container::after { clear: both; height: 0; font-size: 0; visibility: hidden; } .c7n-tabs-nav-container-scrolling { padding-right: 0.32rem; padding-left: 0.32rem; } .c7n-tabs-bottom .c7n-tabs-bar { border-top: 0.01rem solid #e8e8e8; border-bottom: none; } .c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-ink-bar { top: 0.01rem; bottom: auto; } .c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-nav-container { margin-top: -0.01rem; margin-bottom: 0; } .c7n-tabs-tab-prev, .c7n-tabs-tab-next { position: absolute; z-index: 2; width: 0; height: 100%; color: rgba(0, 0, 0, 0.45); text-align: center; background-color: transparent; border: 0; cursor: pointer; opacity: 0; -webkit-transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .c7n-tabs-tab-prev.c7n-tabs-tab-arrow-show, .c7n-tabs-tab-next.c7n-tabs-tab-arrow-show { width: 0.32rem; height: 100%; opacity: 1; pointer-events: auto; } .c7n-tabs-tab-prev:hover, .c7n-tabs-tab-next:hover { color: #000000; } .c7n-tabs-tab-prev-icon, .c7n-tabs-tab-next-icon { position: absolute; top: 50%; left: 50%; width: 0.18rem; height: 0.18rem; line-height: inherit; text-align: center; vertical-align: baseline; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 0.18rem; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; vertical-align: middle; background-image: none; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: inherit; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .c7n-tabs-tab-prev-icon:before, .c7n-tabs-tab-next-icon:before { line-height: 1; } .c7n-tabs-tab-btn-disabled { cursor: not-allowed; } .c7n-tabs-tab-btn-disabled, .c7n-tabs-tab-btn-disabled:hover { color: rgba(0, 0, 0, 0.25); } .c7n-tabs-tab-next { right: 0.02rem; } .c7n-tabs-tab-next-icon::before { content: '\e409'; } .c7n-tabs-tab-prev { left: 0; } .c7n-tabs-tab-prev-icon::before { content: '\e408'; } :root .c7n-tabs-tab-prev { -webkit-filter: none; filter: none; } .c7n-tabs-nav-wrap { margin-bottom: -0.01rem; overflow: hidden; } .c7n-tabs-nav-scroll { overflow: auto; white-space: nowrap; } .c7n-tabs-nav, .c7n-tabs-second-nav { position: relative; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-left: 0; list-style: none; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-nav::before, .c7n-tabs-second-nav::before, .c7n-tabs-nav::after, .c7n-tabs-second-nav::after { display: table; content: ' '; } .c7n-tabs-nav::after, .c7n-tabs-second-nav::after { clear: both; } .c7n-tabs-nav .c7n-tabs-tab, .c7n-tabs-second-nav .c7n-tabs-tab { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 0.32rem 0 0; padding: 0.08rem 0; color: rgba(0, 0, 0, 0.87); text-decoration: none; cursor: pointer; -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-nav .c7n-tabs-tab .c7n-ripple, .c7n-tabs-second-nav .c7n-tabs-tab .c7n-ripple { background-color: rgba(0, 0, 0, 0.2); } .c7n-tabs-nav .c7n-tabs-tab:last-child, .c7n-tabs-second-nav .c7n-tabs-tab:last-child { margin-right: 0; } .c7n-tabs-nav .c7n-tabs-tab .icon, .c7n-tabs-second-nav .c7n-tabs-tab .icon { margin-right: 0.08rem; } .c7n-tabs-nav .c7n-tabs-tab-count, .c7n-tabs-second-nav .c7n-tabs-tab-count { margin-left: 0.05rem; color: rgba(0, 0, 0, 0.65); -webkit-transition: inherit; transition: inherit; } .c7n-tabs-nav .c7n-tabs-second-tab-active, .c7n-tabs-second-nav .c7n-tabs-second-tab-active { color: rgba(0, 0, 0, 0.8); font-weight: 600; background-color: #fff; border-radius: 2px; -webkit-box-shadow: 0 0 2px 0 #d5d5d5; box-shadow: 0 0 2px 0 #d5d5d5; } .c7n-tabs-nav .c7n-tabs-tab-active, .c7n-tabs-second-nav .c7n-tabs-tab-active, .c7n-tabs-nav .c7n-tabs-tab-active .c7n-tabs-tab-count, .c7n-tabs-second-nav .c7n-tabs-tab-active .c7n-tabs-tab-count { color: #3f51b5; font-weight: 500; } .c7n-tabs-nav .c7n-tabs-tab-disabled, .c7n-tabs-second-nav .c7n-tabs-tab-disabled, .c7n-tabs-nav .c7n-tabs-second-tab-disabled, .c7n-tabs-second-nav .c7n-tabs-second-tab-disabled, .c7n-tabs-nav .c7n-tabs-tab-disabled .c7n-tabs-tab-count, .c7n-tabs-second-nav .c7n-tabs-tab-disabled .c7n-tabs-tab-count { color: rgba(0, 0, 0, 0.25); cursor: default; pointer-events: none; } .c7n-tabs-nav .c7n-tabs-tab:hover, .c7n-tabs-second-nav .c7n-tabs-tab:hover, .c7n-tabs-nav .c7n-tabs-tab:hover .c7n-tabs-tab-count, .c7n-tabs-second-nav .c7n-tabs-tab:hover .c7n-tabs-tab-count { color: #6374c2; } .c7n-tabs-nav .c7n-tabs-tab:active, .c7n-tabs-second-nav .c7n-tabs-tab:active, .c7n-tabs-nav .c7n-tabs-tab:active .c7n-tabs-tab-count, .c7n-tabs-second-nav .c7n-tabs-tab:active .c7n-tabs-tab-count { color: #2b378f; } .c7n-tabs-second-nav { height: auto; margin: 0; padding: 0.02rem; background-color: rgba(0, 0, 0, 0.05); } .c7n-tabs-second-nav > .c7n-tabs-ink-bar-animated { display: none; } .c7n-tabs-large > .c7n-tabs-bar .c7n-tabs-nav-container { font-size: 0.16rem; } .c7n-tabs-large > .c7n-tabs-bar .c7n-tabs-tab { padding: 0.16rem; } .c7n-tabs-small > .c7n-tabs-bar .c7n-tabs-nav-container { font-size: 0.13rem; } .c7n-tabs-small > .c7n-tabs-bar .c7n-tabs-tab { padding: 0.08rem 0.16rem; } .c7n-tabs:not(.c7n-tabs-vertical) > .c7n-tabs-content { width: 100%; } .c7n-tabs:not(.c7n-tabs-vertical) > .c7n-tabs-content > .c7n-tabs-tabpane { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; opacity: 1; -webkit-transition: opacity 0.45s; transition: opacity 0.45s; } .c7n-tabs:not(.c7n-tabs-vertical) > .c7n-tabs-content > .c7n-tabs-tabpane-inactive { height: 0; padding: 0 !important; opacity: 0; pointer-events: none; } .c7n-tabs:not(.c7n-tabs-vertical) > .c7n-tabs-content-animated { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); will-change: margin-left; } .c7n-tabs-horizontal > .c7n-tabs-bar .c7n-tabs-tab, .c7n-tabs-horizontal > .c7n-tabs-bar .c7n-tabs-nav-wrap, .c7n-tabs-horizontal > .c7n-tabs-bar .c7n-tabs-nav-scroll, .c7n-tabs-horizontal > .c7n-tabs-bar .c7n-tabs-nav { height: 100%; } .c7n-tabs-vertical > .c7n-tabs-bar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; border-bottom: 0; } .c7n-tabs-vertical > .c7n-tabs-bar-tab-prev, .c7n-tabs-vertical > .c7n-tabs-bar-tab-next { width: 0.32rem; height: 0; -webkit-transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-vertical > .c7n-tabs-bar-tab-prev.c7n-tabs-tab-arrow-show, .c7n-tabs-vertical > .c7n-tabs-bar-tab-next.c7n-tabs-tab-arrow-show { width: 100%; height: 0.32rem; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-bar-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-tab { display: block; float: none; margin: 0 0 0.16rem 0; padding: 0.08rem 0.24rem; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-tab:last-child { margin-bottom: 0; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-extra-content { text-align: center; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav-scroll { width: auto; height: 100%; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav-container, .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav-wrap { height: 100%; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav-container { margin-bottom: 0; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav-container.c7n-tabs-nav-container-scrolling { padding: 0.32rem 0; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav-wrap { margin-bottom: 0; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-nav { width: 100%; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-ink-bar { top: 0; left: auto; width: 0.02rem; height: auto; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-tab-next { bottom: 0; width: 100%; height: 0.32rem; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-tab-next-icon::before { content: '\e5cf'; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-tab-prev { top: 0; width: 100%; height: 0.32rem; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-tab-prev-icon::before { content: '\e5ce'; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-group-item, .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-second-tab { display: block; } .c7n-tabs-vertical > .c7n-tabs-bar .c7n-tabs-bar-divider { width: 0; } .c7n-tabs-vertical > .c7n-tabs-content { width: auto; margin-top: 0 !important; overflow: hidden; } .c7n-tabs-vertical > .c7n-tabs-bar-with-groups .c7n-tabs-tab { padding: 0.08rem 0.24rem; } .c7n-tabs-vertical.c7n-tabs-left > .c7n-tabs-bar { float: left; margin-right: -0.01rem; margin-bottom: 0; border-right: 0.01rem solid #e8e8e8; } .c7n-tabs-vertical.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-tab { text-align: right; } .c7n-tabs-vertical.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-nav-container { margin-right: -0.01rem; } .c7n-tabs-vertical.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-nav-wrap { margin-right: -0.01rem; } .c7n-tabs-vertical.c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-ink-bar { right: 0.01rem; } .c7n-tabs-vertical.c7n-tabs-left > .c7n-tabs-content { padding-left: 0.24rem; border-left: 0.01rem solid #e8e8e8; } .c7n-tabs-vertical.c7n-tabs-right > .c7n-tabs-bar { float: right; margin-bottom: 0; margin-left: -0.01rem; border-left: 0.01rem solid #e8e8e8; } .c7n-tabs-vertical.c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-nav-container { margin-left: -0.01rem; } .c7n-tabs-vertical.c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-nav-wrap { margin-left: -0.01rem; } .c7n-tabs-vertical.c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-ink-bar { left: 0.01rem; } .c7n-tabs-vertical.c7n-tabs-right > .c7n-tabs-content { padding-right: 0.24rem; border-right: 0.01rem solid #e8e8e8; } .c7n-tabs-bottom > .c7n-tabs-bar { margin-top: 0.16rem; margin-bottom: 0; } .c7n-tabs-dropdown-menu { max-width: none; max-height: 2.5rem; margin-bottom: 0; padding: 0.08rem 0; overflow: auto; list-style: none; outline: none; min-width: 0.8rem; } .c7n-tabs-dropdown-menu-item-group { padding-top: 0.04rem; padding-bottom: 0.04rem; } .c7n-tabs-dropdown-menu-item-group:not(:last-child) { border-bottom: 0.01rem solid #e0e0e0; } .c7n-tabs-dropdown-menu-item-group-list { margin: 0; padding: 0; } .c7n-tabs-dropdown-menu-item-group-list > .c7n-tabs-dropdown-menu-item { padding-left: 0.2rem; } .c7n-tabs-dropdown-menu-item-group-no-title > .c7n-tabs-dropdown-menu-item { padding-left: 0.12rem; } .c7n-tabs-dropdown-menu-item-group-title { height: 0.32rem; padding: 0 0.12rem; color: rgba(0, 0, 0, 0.45); font-size: 0.12rem; line-height: 0.32rem; } .c7n-tabs-dropdown-menu-item { position: relative; display: block; height: auto; padding: 0.04rem 0.12rem; overflow: hidden; color: #000000; font-weight: normal; line-height: 0.2rem; letter-spacing: 0.01em; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; } .c7n-tabs-dropdown-menu-item-disabled { color: rgba(0, 0, 0, 0.54); cursor: not-allowed; } .c7n-tabs-dropdown-menu-item-disabled:hover { color: rgba(0, 0, 0, 0.54); background-color: #fff; cursor: not-allowed; } .c7n-tabs-dropdown-menu-item-selected { background-color: rgba(0, 0, 0, 0.04); } .c7n-tabs-dropdown-menu-item-active { background-color: rgba(140, 158, 255, 0.12); } .c7n-tabs-dropdown-menu-item:hover { background-color: rgba(140, 158, 255, 0.12); } .c7n-tabs-dropdown-menu-item:first-child { border-radius: 0.02rem 0.02rem 0 0; } .c7n-tabs-dropdown-menu-item:last-child { border-radius: 0 0 0.02rem 0.02rem; } .c7n-tabs-dropdown-menu-item-divider { height: 0.01rem; margin: 0.01rem 0; overflow: hidden; line-height: 0; background-color: #e8e8e8; } .c7n-tabs-dropdown-menu-item .c7n-checkbox-wrapper { margin-right: 0.08rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c7n-tabs-dropdown-menu-item-more { text-align: center; } .c7n-tabs-dropdown-menu-submenu { position: relative; display: block; height: auto; padding: 0.04rem 0.12rem; overflow: hidden; color: #000000; font-weight: normal; line-height: 0.2rem; letter-spacing: 0.01em; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; } .c7n-tabs-dropdown-menu-submenu-disabled { color: rgba(0, 0, 0, 0.54); cursor: not-allowed; } .c7n-tabs-dropdown-menu-submenu-disabled:hover { color: rgba(0, 0, 0, 0.54); background-color: #fff; cursor: not-allowed; } .c7n-tabs-dropdown-menu-submenu-selected { background-color: rgba(0, 0, 0, 0.04); } .c7n-tabs-dropdown-menu-submenu-active { background-color: rgba(140, 158, 255, 0.12); } .c7n-tabs-dropdown-menu-submenu-popup { border-radius: 0.02rem; } .c7n-tabs-dropdown-menu-submenu-popup.slide-up-enter.slide-up-enter-active.c7n-tabs-dropdown-menu-submenu-popup-placement-bottomLeft, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-enter.slide-up-enter-active.c7n-tabs-dropdown-menu-submenu-popup-placement-bottomRight, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-appear.slide-up-appear-active.c7n-tabs-dropdown-menu-submenu-popup-placement-bottomLeft, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-appear.slide-up-appear-active.c7n-tabs-dropdown-menu-submenu-popup-placement-bottomRight { -webkit-animation-name: antSlideUpIn; animation-name: antSlideUpIn; } .c7n-tabs-dropdown-menu-submenu-popup.slide-up-enter.slide-up-enter-active.c7n-tabs-dropdown-menu-submenu-popup-placement-topLeft, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-enter.slide-up-enter-active.c7n-tabs-dropdown-menu-submenu-popup-placement-topRight, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-appear.slide-up-appear-active.c7n-tabs-dropdown-menu-submenu-popup-placement-topLeft, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-appear.slide-up-appear-active.c7n-tabs-dropdown-menu-submenu-popup-placement-topRight { -webkit-animation-name: antSlideDownIn; animation-name: antSlideDownIn; } .c7n-tabs-dropdown-menu-submenu-popup.slide-up-leave.slide-up-leave-active.c7n-tabs-dropdown-menu-submenu-popup-placement-bottomLeft, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-leave.slide-up-leave-active.c7n-tabs-dropdown-menu-submenu-popup-placement-bottomRight { -webkit-animation-name: antSlideUpOut; animation-name: antSlideUpOut; } .c7n-tabs-dropdown-menu-submenu-popup.slide-up-leave.slide-up-leave-active.c7n-tabs-dropdown-menu-submenu-popup-placement-topLeft, .c7n-tabs-dropdown-menu-submenu-popup.slide-up-leave.slide-up-leave-active.c7n-tabs-dropdown-menu-submenu-popup-placement-topRight { -webkit-animation-name: antSlideDownOut; animation-name: antSlideDownOut; } .c7n-tabs-dropdown-menu-submenu-popup { position: absolute; z-index: 1050; padding: 0; background-color: #fff; -webkit-box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.12); box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.12); } .c7n-tabs-dropdown-menu-submenu-arrow { font-size: 0.12rem; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; vertical-align: middle; background-image: none; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: inherit; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; line-height: 1.5; } .c7n-tabs-dropdown-menu-submenu-arrow:before { line-height: 1; } .c7n-tabs-dropdown-menu-submenu-arrow::before { content: '\E409'; } .c7n-tabs-dropdown-menu-submenu-hidden { display: none; } .c7n-tabs-dropdown-menu-root { min-width: 1.6rem; } .c7n-tabs-tip { margin: 0 0.05rem; color: rgba(0, 0, 0, 0.25); font-size: 0.12rem; vertical-align: baseline; } .c7n-tabs-invalid-badge { position: static; } .c7n-tabs-invalid-badge > .c7n-scroll-number-custom-component { top: 0.08rem; right: -0.1rem; -webkit-transform: initial; -ms-transform: initial; transform: initial; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .c7n-tabs-invalid-badge > .c7n-scroll-number-custom-component.c7n-badge-zoom-appear, .c7n-tabs-invalid-badge > .c7n-scroll-number-custom-component.c7n-badge-zoom-enter { -webkit-animation: c7nZoomInvalidBadgeIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); animation: c7nZoomInvalidBadgeIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); } .c7n-tabs-invalid-badge > .c7n-scroll-number-custom-component.c7n-badge-zoom-leave { -webkit-animation: c7nZoomInvalidBadgeOut 0.3s cubic-bezier(0.71, -0.46, 0.88, 0.6); animation: c7nZoomInvalidBadgeOut 0.3s cubic-bezier(0.71, -0.46, 0.88, 0.6); } .c7n-tabs-invalid-badge-content { display: inline-block; width: 0.12rem; height: 0.12rem; padding-top: 0.01rem; color: #ffffff; text-align: center; background-color: #d50000; border-radius: 0.014rem; } .c7n-tabs-invalid-badge-content::before { display: inline; font-weight: 600; font-size: 0.12rem; font-style: normal; content: '*'; } .c7n-tabs-top > .c7n-tabs-bar .c7n-tabs-ink-bar-animated, .c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-ink-bar-animated { -webkit-transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-left > .c7n-tabs-bar .c7n-tabs-ink-bar-animated, .c7n-tabs-right > .c7n-tabs-bar .c7n-tabs-ink-bar-animated { -webkit-transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .c7n-tabs-top > .c7n-tabs-bar .c7n-tabs-tab { vertical-align: bottom; } .c7n-tabs-bottom > .c7n-tabs-bar .c7n-tabs-tab { vertical-align: top; } .no-flex > .c7n-tabs-content-animated, .c7n-tabs-no-animation > .c7n-tabs-content-animated, .c7n-tabs-vertical > .c7n-tabs-content-animated { margin-left: 0 !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .no-flex > .c7n-tabs-content > .c7n-tabs-tabpane-inactive, .c7n-tabs-no-animation > .c7n-tabs-content > .c7n-tabs-tabpane-inactive, .c7n-tabs-vertical > .c7n-tabs-content > .c7n-tabs-tabpane-inactive { display: none; } @-webkit-keyframes c7nZoomInvalidBadgeIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes c7nZoomInvalidBadgeIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes c7nZoomInvalidBadgeOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } @keyframes c7nZoomInvalidBadgeOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } }