UNPKG

wetrade-design

Version:

一款多语言支持Vue3的UI框架

1,156 lines (1,155 loc) 40.8 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ /** gray-sp */ /** blue-sp */ /** green-sp */ /** red-sp */ /** orange-sp */ /** 品牌橙 */ /** 日落黄 */ /** 柠檬黄 */ /** 新生绿 */ /** 绿色 */ /** 碧涛青 */ /** 海蔚蓝 */ /** 品牌蓝色 */ /** 宝石蓝 */ /** 星空紫 */ /** 罗兰紫 */ /** 青春紫 */ /** 品红 */ /** 红色 */ /** 灰色 */ /** 保留ant色板 */ /** 绿色 */ /** 品牌蓝 */ .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-tab { padding: 1px 0; font-size: 12px; } .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 10px; width: 16px; height: 16px; } .wd-tabs.wd-tabs-extra-small > .wd-tabs-nav .wd-tabs-ink-bar { height: 1px !important; } .wd-tabs.wd-tabs-extra-small:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::before, .wd-tabs.wd-tabs-extra-small:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::after { top: 2px; height: 16px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-tab { padding: 1px 5px; font-size: 12px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-left: 10px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-extra-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 12px; width: 20px; height: 20px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-tab { padding: 1px 0; font-size: 12px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn { color: #fff; } .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-extra-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 10px; width: 16px; height: 16px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-card .wd-tabs-nav .wd-tabs-tab { padding: 1px 5px; font-size: 12px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-card .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-extra-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-extra-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 12px; width: 20px; height: 20px; } .wd-tabs.wd-tabs-extra-small.wd-tabs-left .wd-tabs-nav .wd-tabs-tab, .wd-tabs.wd-tabs-extra-small.wd-tabs-right .wd-tabs-nav .wd-tabs-tab, .wd-tabs.wd-tabs-extra-small.wd-tabs-left .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs.wd-tabs-extra-small.wd-tabs-right .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin: 2px; } .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-tab { padding: 3px 0; font-size: 12px; } .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 12px; width: 18px; height: 18px; } .wd-tabs.wd-tabs-small > .wd-tabs-nav .wd-tabs-ink-bar { height: 1px !important; } .wd-tabs.wd-tabs-small:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::before, .wd-tabs.wd-tabs-small:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::after { top: 3px; height: 18px; } .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-tab { padding: 3px 7px; font-size: 12px; } .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-left: 12px; } .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-small.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 14px; width: 24px; height: 24px; } .wd-tabs.wd-tabs-small.wd-tabs-text .wd-tabs-nav .wd-tabs-tab { padding: 3px 0; font-size: 12px; } .wd-tabs.wd-tabs-small.wd-tabs-text .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-small.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 10px; width: 18px; height: 18px; } .wd-tabs.wd-tabs-small.wd-tabs-card .wd-tabs-nav .wd-tabs-tab { padding: 1px 5px; font-size: 12px; } .wd-tabs.wd-tabs-small.wd-tabs-card .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs.wd-tabs-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-small.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 14px; width: 24px; height: 24px; } .wd-tabs.wd-tabs-small.wd-tabs-left .wd-tabs-nav .wd-tabs-tab, .wd-tabs.wd-tabs-small.wd-tabs-right .wd-tabs-nav .wd-tabs-tab, .wd-tabs.wd-tabs-small.wd-tabs-left .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs.wd-tabs-small.wd-tabs-right .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin: 2px; } .wd-tabs.wd-tabs-big > .wd-tabs-nav .wd-tabs-tab { padding: 5px 0; font-size: 15px; } .wd-tabs.wd-tabs-big > .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-big > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-big > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-big > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-big > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 14px; width: 20px; height: 20px; } .wd-tabs.wd-tabs-big:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::before, .wd-tabs.wd-tabs-big:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::after { top: 6px; height: 20px; } .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-tab { padding: 5px 11px; font-size: 15px; } .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-left: 14px; } .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-big.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 20px; width: 32px; height: 32px; } .wd-tabs.wd-tabs-big.wd-tabs-text .wd-tabs-nav .wd-tabs-tab { padding: 5px 0; font-size: 15px; } .wd-tabs.wd-tabs-big.wd-tabs-text .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-big.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-big.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-big.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-big.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 12px; width: 20px; height: 20px; } .wd-tabs.wd-tabs-big.wd-tabs-card .wd-tabs-nav .wd-tabs-tab { padding: 5px 11px; font-size: 15px; } .wd-tabs.wd-tabs-big.wd-tabs-card .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-big.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-big.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-big.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-big.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 20px; width: 32px; height: 32px; } .wd-tabs.wd-tabs-large > .wd-tabs-nav .wd-tabs-tab { padding: 11px 0; font-size: 15px; } .wd-tabs.wd-tabs-large > .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-large > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-large > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-large > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-large > .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 14px; width: 20px; height: 20px; } .wd-tabs.wd-tabs-large:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::before, .wd-tabs.wd-tabs-large:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::after { top: 12px; height: 20px; } .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-tab { padding: 11px 15px; font-size: 15px; } .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-left: 16px; } .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-large.wd-tabs-button .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 24px; width: 44px; height: 44px; } .wd-tabs.wd-tabs-large.wd-tabs-text .wd-tabs-nav .wd-tabs-tab { padding: 11px 0; font-size: 15px; } .wd-tabs.wd-tabs-large.wd-tabs-text .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-large.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-large.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-large.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-large.wd-tabs-text .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 12px; width: 20px; height: 20px; } .wd-tabs.wd-tabs-large.wd-tabs-card .wd-tabs-nav .wd-tabs-tab { padding: 11px 15px; font-size: 15px; } .wd-tabs.wd-tabs-large.wd-tabs-card .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-btn { line-height: 22px; } .wd-tabs.wd-tabs-large.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs.wd-tabs-large.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-add, .wd-tabs.wd-tabs-large.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-more, .wd-tabs.wd-tabs-large.wd-tabs-card .wd-tabs-nav .wd-tabs-nav-add-wrapper .wd-tabs-nav-more { font-size: 24px; width: 44px; height: 44px; } .wd-tabs-rtl { direction: rtl; } .wd-tabs-rtl .wd-tabs-nav .wd-tabs-tab { margin: 0 0 0 32px; } .wd-tabs-rtl .wd-tabs-nav .wd-tabs-tab:last-of-type { margin-left: 0; } .wd-tabs-rtl .wd-tabs-nav .wd-tabs-tab .wdicon { margin-right: 0; margin-left: 12px; } .wd-tabs-rtl .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-remove { margin-right: 8px; margin-left: -4px; } .wd-tabs-rtl .wd-tabs-nav .wd-tabs-tab .wd-tabs-tab-remove .wdicon { margin: 0; } .wd-tabs-rtl.wd-tabs-left > .wd-tabs-nav { order: 1; } .wd-tabs-rtl.wd-tabs-left > .wd-tabs-content-holder { order: 0; } .wd-tabs-rtl.wd-tabs-right > .wd-tabs-nav { order: 0; } .wd-tabs-rtl.wd-tabs-right > .wd-tabs-content-holder { order: 1; } .wd-tabs-rtl.wd-tabs-card.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-rtl.wd-tabs-card.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-rtl.wd-tabs-card.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-rtl.wd-tabs-card.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-right: 2px; margin-left: 0; } .wd-tabs-rtl.wd-tabs-card.wd-tabs-top > .wd-tabs-nav .wd-tabs-nav-add, .wd-tabs-rtl.wd-tabs-card.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-nav-add, .wd-tabs-rtl.wd-tabs-card.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-nav-add, .wd-tabs-rtl.wd-tabs-card.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-nav-add { margin-right: 2px; margin-left: 0; } .wd-tabs-dropdown-rtl { direction: rtl; } .wd-tabs-dropdown-rtl .wd-tabs-dropdown-menu-item { text-align: right; } .wd-tabs-top, .wd-tabs-bottom { flex-direction: column; } .wd-tabs-top > .wd-tabs-nav, .wd-tabs-bottom > .wd-tabs-nav, .wd-tabs-top > div > .wd-tabs-nav, .wd-tabs-bottom > div > .wd-tabs-nav { margin: 0; } .wd-tabs-top > .wd-tabs-nav::before, .wd-tabs-bottom > .wd-tabs-nav::before, .wd-tabs-top > div > .wd-tabs-nav::before, .wd-tabs-bottom > div > .wd-tabs-nav::before { position: absolute; right: 0; left: 0; border-bottom: 1px solid #EDEFF3; content: ''; } .wd-tabs-top > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-ink-bar { height: 2px; } .wd-tabs-top > .wd-tabs-nav .wd-tabs-ink-bar-animated, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-ink-bar-animated, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-ink-bar-animated, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-ink-bar-animated { transition: width 0.3s, left 0.3s, right 0.3s; } .wd-tabs-top > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-top > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-nav-wrap::after { top: 0; bottom: 0; width: 20px; } .wd-tabs-top > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-nav-wrap::after { right: -20px; box-shadow: -20px 0px 10px 0px rgba(0, 0, 0, 0.5); } .wd-tabs-top > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-left::before, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-left::before, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-left::before, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-left::before { opacity: 1; } .wd-tabs-top > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-right::after, .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-right::after, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-right::after, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-right::after { opacity: 1; } .wd-tabs-top > .wd-tabs-nav::before, .wd-tabs-top > div > .wd-tabs-nav::before { bottom: 0; } .wd-tabs-top > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-top > div > .wd-tabs-nav .wd-tabs-ink-bar { bottom: 0; } .wd-tabs-bottom > .wd-tabs-nav, .wd-tabs-bottom > div > .wd-tabs-nav { order: 1; margin-top: 16px; margin-bottom: 0; } .wd-tabs-bottom > .wd-tabs-nav::before, .wd-tabs-bottom > div > .wd-tabs-nav::before { top: 0; } .wd-tabs-bottom > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-ink-bar { top: 0; } .wd-tabs-bottom > .wd-tabs-content-holder, .wd-tabs-bottom > div > .wd-tabs-content-holder { order: 0; } .wd-tabs-left > .wd-tabs-nav, .wd-tabs-right > .wd-tabs-nav, .wd-tabs-left > div > .wd-tabs-nav, .wd-tabs-right > div > .wd-tabs-nav { flex-direction: column; min-width: 50px; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-right > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab { padding: 1px 8px; text-align: center; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-tab-last, .wd-tabs-right > .wd-tabs-nav .wd-tabs-tab-last, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab-last, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab-last { margin: 0 0 16px; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-right > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin: 16px 0 0 0; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap { flex-direction: column; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap::after { right: 0; left: 0; height: 20px; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap::before { top: 20px; box-shadow: -20px 0px 10px 0px rgba(0, 0, 0, 0.5); } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap::after { bottom: -20px; box-shadow: -20px 0px 10px 0px rgba(0, 0, 0, 0.5); } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-top::before, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-top::before, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-top::before, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-top::before { opacity: 1; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-bottom::after, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-bottom::after, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-bottom::after, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-wrap.wd-tabs-nav-wrap-ping-bottom::after { opacity: 1; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-tab-active > div, .wd-tabs-right > .wd-tabs-nav .wd-tabs-tab-active > div, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab-active > div, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab-active > div { color: #2469F2; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-right > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-ink-bar { width: 2px; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-ink-bar-animated, .wd-tabs-right > .wd-tabs-nav .wd-tabs-ink-bar-animated, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-ink-bar-animated, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-ink-bar-animated { transition: height 0.3s, top 0.3s; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-list, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-list, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-list, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-list, .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-operations, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-operations, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-operations, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-operations { flex: 1 0 auto; flex-direction: column; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add { margin-top: 10px !important; margin-left: 0 !important; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add, .wd-tabs-left > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs-right > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add { margin-left: 0 !important; } .wd-tabs-left > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-left > div > .wd-tabs-nav .wd-tabs-ink-bar { right: 0; } .wd-tabs-left > .wd-tabs-content-holder, .wd-tabs-left > div > .wd-tabs-content-holder { margin-left: -1px; border-left: 1px solid #EBEDF2; } .wd-tabs-left > .wd-tabs-content-holder > .wd-tabs-content > .wd-tabs-tabpane, .wd-tabs-left > div > .wd-tabs-content-holder > .wd-tabs-content > .wd-tabs-tabpane { padding-left: 24px; } .wd-tabs-right > .wd-tabs-nav, .wd-tabs-right > div > .wd-tabs-nav { order: 1; } .wd-tabs-right > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-right > div > .wd-tabs-nav .wd-tabs-ink-bar { left: 0; } .wd-tabs-right > .wd-tabs-content-holder, .wd-tabs-right > div > .wd-tabs-content-holder { order: 0; margin-right: -1px; border-right: 1px solid #EBEDF2; } .wd-tabs-right > .wd-tabs-content-holder > .wd-tabs-content > .wd-tabs-tabpane, .wd-tabs-right > div > .wd-tabs-content-holder > .wd-tabs-content > .wd-tabs-tabpane { padding-right: 24px; } .wd-tabs-dropdown { box-sizing: border-box; margin: 0; padding: 0; color: #1E1E29; font-size: 14px; font-variant: tabular-nums; line-height: 18px; list-style: none; font-feature-settings: 'tnum'; position: absolute; top: -9999px; left: -9999px; z-index: 2000; display: block; box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.6), 0px 6px 28px 0px rgba(0, 0, 0, 0.3), 0px 6px 12px 0px rgba(0, 0, 0, 0.24) !important; border-radius: 8px; } .wd-tabs-dropdown .wd-scrollbar { border-radius: 8px; } .wd-tabs-dropdown-hidden { display: none; } .wd-tabs-dropdown .wd-menu { margin: 0; padding: 4px; text-align: left; list-style-type: none; background-color: #FBFCFD; background-clip: padding-box; border-radius: 8px; border: none; outline: none; } .wd-tabs-dropdown .wd-menu .wd-menu-item { display: flex; align-items: center; min-width: 110px; max-width: 172px; margin: 0; padding: 5px 8px; overflow: hidden; color: #1E1E29; font-weight: normal; font-size: 12px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; border-radius: 6px; margin-bottom: 4px; height: 28px; } .wd-tabs-dropdown .wd-menu .wd-menu-item:last-child { margin-bottom: 0; } .wd-tabs-dropdown .wd-menu .wd-menu-item > span { flex: 1; white-space: nowrap; } .wd-tabs-dropdown .wd-menu .wd-menu-item .wd-tabs-dropdown-menu-item-remove { display: none; } .wd-tabs-dropdown .wd-menu .wd-menu-item:hover { background: rgba(129, 135, 153, 0.1); } .wd-tabs-dropdown .wd-menu .wd-menu-item-disabled, .wd-tabs-dropdown .wd-menu .wd-menu-item-disabled:hover { color: #C7CBD6; background: transparent; cursor: not-allowed; } .wd-tabs-dropdown .wd-menu .wd-menu-item:not(:last-child) { margin-bottom: 4px; } .wd-tabs-dropdown.ellipsis .wd-menu .wd-menu-item .wd-menu-title-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab { margin: 0; background: #fafafa; border: 1px solid #EBEDF2; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 5px 9px; font-size: 12px; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab-active, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab-active { background: #ECF3FD; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn { color: #fff; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab-btn, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab-disabled, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab-disabled { background-color: #FBFCFD; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab-disabled .wd-tabs-tab-btn, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab-disabled .wd-tabs-tab-btn { color: #C7CBD6; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover { background: #F5F6F8; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn { color: #1E1E29; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn::before, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn::before { display: none; } .wd-tabs-card > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-card > div > .wd-tabs-nav .wd-tabs-ink-bar { visibility: hidden; } .wd-tabs-card.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-card.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-card.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-card.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-left: 2px; } .wd-tabs-card.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-card.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 6px 6px 0 0; } .wd-tabs-card.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab-active, .wd-tabs-card.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab-active { border-bottom-color: #fff; } .wd-tabs-card.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-card.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 0 0 6px 6px; } .wd-tabs-card.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-tab-active, .wd-tabs-card.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-tab-active { border-top-color: #fff; } .wd-tabs-card.wd-tabs-left > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-card.wd-tabs-right > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-card.wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-card.wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-top: 2px; } .wd-tabs-card.wd-tabs-left > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-card.wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 6px 0 0 6px; } .wd-tabs-card.wd-tabs-left > .wd-tabs-nav .wd-tabs-tab-active, .wd-tabs-card.wd-tabs-left > div > .wd-tabs-nav .wd-tabs-tab-active { border-right-color: #fff; } .wd-tabs-card.wd-tabs-right > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-card.wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 0 6px 6px 0; } .wd-tabs-card.wd-tabs-right > .wd-tabs-nav .wd-tabs-tab-active, .wd-tabs-card.wd-tabs-right > div > .wd-tabs-nav .wd-tabs-tab-active { border-left-color: #fff; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab { margin: 0; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #FBFCFD; color: #656B80; padding: 5px 9px; font-size: 12px; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab-active, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab-active { background: #ECF3FD; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn { color: #fff; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab-btn, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab-disabled, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab-disabled { background-color: #FBFCFD; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab-disabled .wd-tabs-tab-btn, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab-disabled .wd-tabs-tab-btn { color: #C7CBD6; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover { background: #F5F6F8; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn { color: #1E1E29; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn::before, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn::before { display: none; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-tab + .wd-tabs-tab { margin-left: 12px; } .wd-tabs-button > .wd-tabs-nav .wd-btn.wd-tabs-nav-more, .wd-tabs-button > div > .wd-tabs-nav .wd-btn.wd-tabs-nav-more, .wd-tabs-button > .wd-tabs-nav .wd-btn.wd-tabs-nav-add, .wd-tabs-button > div > .wd-tabs-nav .wd-btn.wd-tabs-nav-add { width: 28px; height: 28px; font-size: 16px; } .wd-tabs-button > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-button > div > .wd-tabs-nav .wd-tabs-ink-bar { visibility: hidden; } .wd-tabs-button > .wd-tabs-nav::before, .wd-tabs-button > div > .wd-tabs-nav::before { display: none; } .wd-tabs-button.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-button.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 4px; } .wd-tabs-button.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab:first-of-type, .wd-tabs-button.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab:first-of-type { margin-left: 0; } .wd-tabs-button.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-button.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 6px; } .wd-tabs-button.wd-tabs-left > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-button.wd-tabs-right > .wd-tabs-nav .wd-tabs-tab { justify-content: center; border-radius: 6px; } .wd-tabs-button.wd-tabs-left > .wd-tabs-content-holder, .wd-tabs-button.wd-tabs-right > .wd-tabs-content-holder { border-left: 0; border-right: 0; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-tab { margin: 0; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); color: #656B80; margin-left: 24px; padding: 5px 0; font-size: 12px; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-tab-active .wd-tabs-tab-btn { color: #1E1E29; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-tab-btn, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-tab-btn { line-height: 18px; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-tab-disabled .wd-tabs-tab-btn, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-tab-disabled .wd-tabs-tab-btn { color: #C7CBD6; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn { color: #0F3CB7; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn::before, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn::before { display: none; } .wd-tabs-text > .wd-tabs-nav .wd-btn.wd-tabs-nav-more, .wd-tabs-text > div > .wd-tabs-nav .wd-btn.wd-tabs-nav-more, .wd-tabs-text > .wd-tabs-nav .wd-btn.wd-tabs-nav-add, .wd-tabs-text > div > .wd-tabs-nav .wd-btn.wd-tabs-nav-add { width: 20px; height: 20px; font-size: 12px; } .wd-tabs-text > .wd-tabs-nav .wd-tabs-ink-bar, .wd-tabs-text > div > .wd-tabs-nav .wd-tabs-ink-bar { visibility: hidden; } .wd-tabs-text > .wd-tabs-nav::before, .wd-tabs-text > div > .wd-tabs-nav::before { display: none; } .wd-tabs-text.wd-tabs-top > .wd-tabs-nav .wd-tabs-tab:first-of-type, .wd-tabs-text.wd-tabs-top > div > .wd-tabs-nav .wd-tabs-tab:first-of-type { margin-left: 0; } .wd-tabs-text.wd-tabs-bottom > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-text.wd-tabs-bottom > div > .wd-tabs-nav .wd-tabs-tab { border-radius: 6px; } .wd-tabs-text.wd-tabs-left > .wd-tabs-nav .wd-tabs-tab, .wd-tabs-text.wd-tabs-right > .wd-tabs-nav .wd-tabs-tab { justify-content: center; border-radius: 6px; } .wd-tabs-text.wd-tabs-left > .wd-tabs-content-holder, .wd-tabs-text.wd-tabs-right > .wd-tabs-content-holder { border-left: 0; border-right: 0; } .wd-tabs { box-sizing: border-box; margin: 0; padding: 0; color: #1E1E29; font-size: 14px; font-variant: tabular-nums; line-height: 18px; list-style: none; font-feature-settings: 'tnum'; display: flex; overflow: hidden; } .wd-tabs > .wd-tabs-nav, .wd-tabs > div > .wd-tabs-nav { position: relative; display: flex; flex: none; align-items: center; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-wrap, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-wrap { position: relative; display: inline-block; display: flex; flex: auto; align-self: stretch; overflow: hidden; white-space: nowrap; transform: translate(0); } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-wrap::before, .wd-tabs > .wd-tabs-nav .wd-tabs-nav-wrap::after, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-wrap::after { position: absolute; z-index: 1; opacity: 0; transition: opacity 0.3s; content: ''; pointer-events: none; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-list, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-list { position: relative; display: flex; transition: transform 0.3s; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add-wrapper, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-list .wd-tabs-nav-add-wrapper { display: flex; align-items: center; justify-content: center; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-operations, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-operations { display: flex; align-self: stretch; align-items: center; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-operations-hidden, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-operations-hidden { position: absolute; visibility: hidden; pointer-events: none; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-operations .wd-tabs-nav-add { margin-left: 10px; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-more, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-more { margin-left: 0; position: relative; padding: 0 8px; border: none; width: 20px; height: 20px; font-size: 12px; cursor: pointer; border-radius: 4px; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-more span[role='img'], .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-more span[role='img'] { margin-right: 0; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-add, .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-add { padding: 0 8px; outline: none; cursor: pointer; border: none; width: 20px; height: 20px; font-size: 12px; border-radius: 4px; } .wd-tabs > .wd-tabs-nav .wd-tabs-nav-add span[role='img'], .wd-tabs > div > .wd-tabs-nav .wd-tabs-nav-add span[role='img'] { margin-right: 0; } .wd-tabs:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::before, .wd-tabs:not(.wd-tabs-button):not(.wd-tabs-card) .wd-tabs-nav-wrap::after { top: 4px; height: 20px; } .wd-tabs-extra-content { flex: none; } .wd-tabs-centered > .wd-tabs-nav .wd-tabs-nav-wrap:not([class*='wd-tabs-nav-wrap-ping']), .wd-tabs-centered > div > .wd-tabs-nav .wd-tabs-nav-wrap:not([class*='wd-tabs-nav-wrap-ping']) { justify-content: center; } .wd-tabs-ink-bar { position: absolute; background: #2469F2; pointer-events: none; } .wd-tabs-tab { position: relative; display: inline-flex; align-items: center; padding: 5px 0; font-size: 12px; background: transparent; border: 0; outline: none; cursor: pointer; } .wd-tabs-tab-btn:focus, .wd-tabs-tab-remove:focus, .wd-tabs-tab-btn:active, .wd-tabs-tab-remove:active { color: #144bcc; } .wd-tabs-tab-btn { position: relative; outline: none; line-height: 18px; color: #656B80; } .wd-tabs-tab-btn::before { display: none; position: absolute; top: 0; right: -8px; bottom: 0; left: -8px; z-index: -1; background-color: #FBFCFD; border-radius: 4px; opacity: 1; transition: background-color, opacity 0.2s cubic-bezier(0, 0, 1, 1); content: ''; } .wd-tabs-tab-btn:hover { border-radius: 4px; } .wd-tabs-tab-remove { flex: none; margin-right: -4px; margin-left: 8px; color: #575E73; font-size: 12px; background: transparent; border: none; outline: none; cursor: pointer; transition: all 0.3s; } .wd-tabs-tab-remove:hover { color: #1E1E29; } .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn { color: #2469F2; } .wd-tabs-tab:not(.wd-tabs-tab-active):not(.wd-tabs-tab-disabled):hover .wd-tabs-tab-btn svg { color: #2469F2; } .wd-tabs-tab.wd-tabs-tab-active .wd-tabs-tab-btn { color: #1E1E29; font-weight: 600; } .wd-tabs-tab.wd-tabs-tab-active .wd-tabs-tab-btn svg { color: #2469F2; } .wd-tabs-tab.wd-tabs-tab-active .wd-tabs-tab-btn::before { display: none; } .wd-tabs-tab.wd-tabs-tab-disabled { cursor: not-allowed; } .wd-tabs-tab.wd-tabs-tab-disabled .wd-tabs-tab-btn { color: #C7CBD6; } .wd-tabs-tab.wd-tabs-tab-disabled .wd-tabs-tab-btn:focus, .wd-tabs-tab.wd-tabs-tab-disabled .wd-tabs-tab-remove:focus, .wd-tabs-tab.wd-tabs-tab-disabled .wd-tabs-tab-btn:active, .wd-tabs-tab.wd-tabs-tab-disabled .wd-tabs-tab-remove:active { color: #C7CBD6; } .wd-tabs-tab .wd-tabs-tab-remove .wdicon { margin: 0; } .wd-tabs-tab .wdicon { margin-right: 12px; } .wd-tabs-tab + .wd-tabs-tab { margin: 0 0 0 32px; } .wd-tabs-content { display: flex; width: 100%; } .wd-tabs-content-holder { flex: auto; min-width: 0; min-height: 0; } .wd-tabs-content-animated { transition: margin 0.3s; } .wd-tabs-tabpane { flex: none; width: 100%; outline: none; }