@import "../../style/themes/default"; @import "../../style/mixins/index"; @tab-prefix-cls: ~"@{ant-prefix}-tabs"; .@{tab-prefix-cls} { box-sizing: border-box; position: relative; overflow: hidden; .clearfix; color: @text-color; &-bar { outline: none; } &-ink-bar { z-index: 1; position: absolute; left: 0; bottom: 1px; box-sizing: border-box; height: 2px; background-color: @primary-color; transition: transform 0.3s @ease-in-out; transform-origin: 0 0; } &-bar { border-bottom: 1px solid @border-color-base; margin-bottom: 16px; } &-nav-container { overflow: hidden; font-size: 14px; line-height: @line-height-base; box-sizing: border-box; position: relative; white-space: nowrap; margin-bottom: -1px; .clearfix; } &-nav-container-scrolling { padding-left: 32px; padding-right: 32px; } &-tab-prev, &-tab-next { user-select: none; z-index: 2; margin-right: -2px; margin-top: 3px; width: 32px; height: 100%; line-height: 32px; cursor: pointer; border: 0; background-color: transparent; position: absolute; text-align: center; color: @text-color-secondary; transition: color 0.3s ease; &:hover { color: @text-color; } &-icon { position: relative; display: inline-block; font-style: normal; font-weight: bold; font-variant: normal; line-height: inherit; vertical-align: baseline; text-align: center; text-transform: none; font-family: sans-serif; .iconfont-size-under-12px(10px); &:before { display: block; font-family: "anticon" !important; } } } &-tab-btn-disabled { cursor: not-allowed; &, &:hover { color: #ccc; } } &-tab-next { right: 2px; &-icon:before { content: "\e61f"; } } &-tab-prev { left: 0; &-icon:before { content: "\e620"; } :root & { filter: none; } } &-nav-wrap { overflow: hidden; margin-bottom: -1px; } &-nav-scroll { overflow: hidden; white-space: nowrap; } &-nav { box-sizing: border-box; padding-left: 0; transition: transform 0.5s @ease-in-out; position: relative; margin: 0; list-style: none; float: left; &:before, &:after { display: table; content: " "; } &:after { clear: both; } .@{tab-prefix-cls}-tab-disabled { pointer-events: none; cursor: default; color: #ccc; } .@{tab-prefix-cls}-tab { display: inline-block; height: 100%; margin-right: 24px; box-sizing: border-box; position: relative; padding: 8px 20px; transition: color 0.3s @ease-in-out; cursor: pointer; text-decoration: none; &:hover { color: tint(@primary-color, 20%); } &:active { color: shade(@primary-color, 5%); } .@{iconfont-css-prefix} { width: 14px; height: 14px; margin-right: 8px; } } .@{tab-prefix-cls}-tab-active { color: @primary-color; } } &-mini &-nav-container { font-size: @font-size-base; } &-mini &-tab { margin-right: 0; padding: 8px 16px; } &:not(&-vertical) { .@{tab-prefix-cls}-content-animated { display: flex; flex-direction: row; will-change: transform; transition: transform 0.3s @ease-in-out; } .@{tab-prefix-cls}-tabpane { flex-shrink: 0; width: 100%; transition: opacity 0.3s; opacity: 1; } .@{tab-prefix-cls}-tabpane-inactive { opacity: 0; height: 0; } } &-vertical { > .@{tab-prefix-cls}-bar { border-bottom: 0; .@{tab-prefix-cls}-tab { float: none; margin-right: 0; margin-bottom: 16px; display: block; padding: 8px 24px; &:last-child { margin-bottom: 0; } } .@{tab-prefix-cls}-nav-scroll { width: auto; } .@{tab-prefix-cls}-nav-container { margin-bottom: 0; } .@{tab-prefix-cls}-nav-wrap { margin-bottom: 0; } .@{tab-prefix-cls}-ink-bar { width: 2px; left: auto; height: auto; top: 0; } } > .@{tab-prefix-cls}-content { overflow: hidden; width: auto; } } &-vertical&-left { > .@{tab-prefix-cls}-bar { float: left; border-right: 1px solid @border-color-split; margin-right: -1px; margin-bottom: 0; .@{tab-prefix-cls}-tab { text-align: right; } .@{tab-prefix-cls}-nav-container { margin-right: -1px; } .@{tab-prefix-cls}-nav-wrap { margin-right: -1px; } .@{tab-prefix-cls}-ink-bar { right: 1px; } } > .@{tab-prefix-cls}-content { padding-left: 24px; border-left: 1px solid @border-color-split; } } &-vertical&-right { > .@{tab-prefix-cls}-bar { float: right; border-left: 1px solid @border-color-split; margin-left: -1px; margin-bottom: 0; .@{tab-prefix-cls}-nav-container { margin-left: -1px; } .@{tab-prefix-cls}-nav-wrap { margin-left: -1px; } .@{tab-prefix-cls}-ink-bar { left: 1px; } } > .@{tab-prefix-cls}-content { padding-right: 24px; border-right: 1px solid @border-color-split; } } &-bottom > &-bar { margin-bottom: 0; margin-top: 16px; } // card style &&-card > &-bar &-nav-container { height: 32px; } &&-card > &-bar &-ink-bar { visibility: hidden; } &&-card > &-bar &-tab { margin: 0; border: 1px solid @border-color-base; border-bottom: 0; border-radius: 6px 6px 0 0; transition: all 0.3s @ease-in-out; background: #f9f9f9; margin-right: 2px; } &&-card > &-bar &-tab { padding: 5px 16px 4px; transition: all 0.3s @ease-in-out; } &&-card > &-bar &-tab-active { background: #fff; transform: translateZ(0); border-color: @border-color-base; color: @primary-color; } &&-card > &-bar &-tab-active { padding-bottom: 5px; transform: translateZ(0); } &&-card > &-bar &-nav-wrap { margin-bottom: 0; } &&-card > &-bar &-tab .@{iconfont-css-prefix}-close { margin-right: 0; color: @text-color-secondary; transition: all 0.3s @ease-in-out; .iconfont-size-under-12px(9px); transform-origin: 100% 50%; width: 0; text-align: right; vertical-align: middle; overflow: hidden; &:hover { color: #404040; font-weight: bold; } } &&-editable-card > &-bar &-tab:not(&-tab-active):hover { padding-left: 8px; padding-right: 8px; } &&-card > &-bar &-tab-active .@{iconfont-css-prefix}-close, &&-card > &-bar &-tab:hover .@{iconfont-css-prefix}-close { width: 16px; transform: translateZ(0); } &-extra-content { float: right; line-height: 32px; .@{tab-prefix-cls}-new-tab { width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; border-radius: 3px; border: 1px solid @border-color-base; font-size: @font-size-base; .iconfont-size-under-12px(10px); color: @text-color-secondary; transition: color 0.3s ease; &:hover { color: #404040; } } } } .no-flex, .@{tab-prefix-cls}-no-animation, .@{tab-prefix-cls}-vertical { .@{tab-prefix-cls}-content { &-animated { transform: none!important; } > .@{tab-prefix-cls}-tabpane-inactive { display: none; } } }