.#{$ns}Tabs { &-linksContainer { position: relative; &-arrow { height: 100%; display: flex; align-items: center; top: 0; cursor: pointer; position: absolute; .iconfont { font-size: var(--Remark-icon-fontSize); } &:hover { color: var(--icon-onHover-color); } } &-arrow--left { left: 4px; } &-arrow--right { right: 4px; } &-arrow--disabled { .iconfont { cursor: not-allowed; color: var(--Number-handler-onDisabled-color); } &:hover { color: var(--Number-handler-onDisabled-color); } } &-main { overflow-y: auto; scrollbar-width: none; width: 100%; &::-webkit-scrollbar { display: none; } > .#{$ns}Tabs-links { white-space: nowrap; min-width: 100%; display: inline-block; } } } .#{$ns}Tabs-linksContainer--overflow { padding: 0 20px; } &-links { margin: 0; padding: 0; border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); list-style: none; user-select: none; @include clearfix(); > .#{$ns}Tabs-link { margin-bottom: calc(var(--Tabs-borderWidth) * -1); display: inline-block; position: relative; > a:first-child { font-size: var(--Tabs-linkFontSize); outline: none; border: var(--Tabs-borderWidth) solid transparent; border-top-left-radius: var(--Tabs-borderRadius); border-top-right-radius: var(--Tabs-borderRadius); color: var(--Tabs-color); margin: var(--Tabs-linkMargin); padding: var(--Tabs-linkPadding); text-decoration: none; cursor: pointer; display: block; } > .#{$ns}Combo-toolbarBtn { position: absolute; right: -10px; top: -10px; z-index: 10; display: none; } &:hover > .#{$ns}Combo-toolbarBtn { display: block; } &:hover > a:first-child, > a:first-child:focus { border-color: var(--Tabs-onHover-borderColor); text-decoration: none; } &.disabled, &.is-disabled { cursor: not-allowed; > a:first-child { color: var(--Tabs-onDisabled-color); background: transparent; border-color: transparent; pointer-events: none; } } &.active > a:first-child, &.is-active > a:first-child { color: var(--Tabs-onActive-color); background: var(--Tabs-onActive-bg); border-color: var(--Tabs-onActive-borderColor); border-bottom-color: transparent; } } } &-content { background: var(--Tabs-content-bg); border-style: solid; border-width: 0 var(--Tabs-borderWidth) var(--Tabs-borderWidth); border-color: var(--Tabs-borderColor); } &-pane { display: none; padding: var(--gap-base); opacity: 0; transition: opacity var(--animation-duration) linear; &.is-active { display: block; } &.in { opacity: 1; } } &--line { > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-arrow { top: -4px; } > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { border-bottom-color: var(--Tabs--line-borderColor); > li { > a:first-child { border-width: 0 0 var(--Tabs--line-borderWidth) 0; padding: var(--Tabs--line-linkPadding); margin: var(--Tabs--line-linkMargin); &:hover, &:focus { color: var(--primary); background: transparent; border-color: transparent; } } &:last-child { > a { margin: 0; } } &.is-active { > a:first-child, > a:first-child:hover, > a:first-child:focus { border-color: var(--Tabs--line-onHover-borderColor); color: var(--Tabs--line-onHover-color); background: transparent; } } } } > .#{$ns}Tabs-content { border-width: 0; padding: var(--Tabs--line-content-padding); background: var(--Tabs--line-content-bg); } } &--card { > .#{$ns}Tabs-linksContainer { background: var(--Tabs--card-bg); } > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { padding: var(--Tabs--card-padding); background: var(--Tabs--card-bg); border-top: px2rem(1px) solid var(--Tabs--card-borderTopColor); > li { &.is-active { > a:first-child, > a:first-child:hover, > a:first-child:focus { border-color: var(--Tabs--card-onActive-borderColor); color: var(--primary); border-bottom-color: var(--Tabs--card-onActive-bg); background: var(--Tabs--card-onActive-bg); } } > a:first-child { padding: var(--Tabs--card-linkPadding); margin: var(--Tabs--card-linkMargin); &:hover, &:focus { color: #666; background: var(--Tabs--card-onActive-bg); border-bottom-color: transparent; } } } } > .#{$ns}Tabs-content { border-width: 0; } } &--radio { > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-arrow { top: -4px; } > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { border: 0; margin-bottom: px2rem(10px); > li { margin: 0; > a:first-child { border-width: px2rem(1px); border-color: var(--Tabs-borderColor); font-size: var(--fontSizeSm); text-align: center; margin: 0; padding: 0 px2rem(10px); min-width: 68px; height: px2rem(30px); line-height: px2rem(30px); border-radius: 0; background: var(--Tabs--radio-bg); &:hover, &:focus { color: var(--primary); } } &.is-active { > a:first-child, > a:first-child:hover, > a:first-child:focus { color: var(--Tabs--radio-bg); background: var(--primary); border-color: var(--primary); position: relative; z-index: 1; } } } > li + li { margin-left: -1px; } } > .#{$ns}Tabs-content { border-top: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); } } // todo 第一个选中,有一像素的空隙待修复。 // 不带眼镜应该看不出来。 &--tiled { > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { width: 100%; display: flex; flex-direction: row; padding-left: var(--Tabs-borderWidth); border-bottom: 0; > li { flex-grow: 1; text-align: center; margin: 0 0 0 calc(var(--Tabs-borderWidth) * -1); > a:first-child { margin: 0; border-radius: 0; border-style: solid; border-color: var(--Tabs-borderColor); border-width: var(--Tabs-borderWidth); &:hover, &:focus { position: relative; z-index: 1; border-color: var(--Tabs-onActive-borderColor); color: var(--primary); } } &.is-active { > a:first-child, > a:first-child:hover, > a:first-child:focus { cursor: default; color: var(--primary); border-color: var(--Tabs-borderColor); border-top-color: var(--primary); border-bottom-color: transparent; } } } } } &--vertical { display: flex; min-height: px2rem(200px); border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); border-radius: 0; > .#{$ns}Tabs-links { width: var(--Tabs--vertical-width); background: var(--Tabs--vertical-onActive-container-bg); border: none; border-right: var(--Tabs--vertical-onActive-container-borderRight); padding-bottom: px2rem(60px); > li { margin: 0 0 0 -1px; display: block; > a:first-child { border-color: transparent; border-radius: 0; border-width: var(--Tabs--vertical-onActive-borderWidth); margin: 0; &:hover, &:focus { color: var(--primary); border-color: transparent; } } &.is-active { > a:first-child, > a:first-child:hover, > a:first-child:focus { color: var(--Tabs--vertical-onActive-color); background: var(--Tabs--vertical-onActive-bg); border-color: var(--Tabs--vertical-onActive-border); } } } } > .#{$ns}Tabs-content { border: none; flex-grow: 1; > .#{$ns}Tabs-pane { height: 100%; } } } &--chrome { > .#{$ns}Tabs-links { background: var(--Tabs--chrome-bg); border-bottom: 0; padding: 0 px2rem(10px); padding-top: px2rem(8px); display: flex; > li { position: relative; margin-bottom: 0; white-space: nowrap; min-width: 0; max-width: px2rem(250px); padding: px2rem(7px) px2rem(20px) px2rem(6px); cursor: pointer; flex: 1; > a:first-child { background: none; border: none; position: relative; z-index: 5; overflow: hidden; padding: 0; } &.is-active { > a:first-child, > a:first-child:hover, > a:first-child:focus { background: none; border: none; } &:after { display: none; } } &:after { content: ''; width: 1px; height: calc(100% - var(--Tabs--chrome-radius-size) * 2); position: absolute; right: -2px; background: var(--Tabs--chrome-right-boder-color); top: var(--Tabs--chrome-radius-size) } &:hover { .chrome-tab-background { z-index: 3; display: block; background-color: var(--Tabs--chrome-onHover-bg); } .chrome-tab-background > svg { fill: var(--Tabs--chrome-onHover-bg); } &:after { display: none; } } &.is-active { .chrome-tab-background { display: block; background-color: var(--Tabs-onActive-bg); } .chrome-tab-background > svg { fill: var(--Tabs-onActive-bg); } } } } .chrome-tab-background { display: none; position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: var(--Tabs--chrome-radius-size) var(--Tabs--chrome-radius-size) 0 0; > svg { width: var(--Tabs--chrome-radius-size); height: var(--Tabs--chrome-radius-size); bottom: 0; position: absolute; } > .chrome-tab-background--right { right: calc(var(--Tabs--chrome-radius-size) * -1); } > .chrome-tab-background--left { left: calc(var(--Tabs--chrome-radius-size) * -1); } } } &-toolbar { display: inline-block; float: right; padding-top: var(--gap-xs); } }