From 63575ff8e04403e47bc2c19a158bb1c351dee12d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E4=B8=B9?= <365533093@qq.com> Date: Wed, 30 Mar 2022 11:07:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86tabs=E7=9A=84toolbar=E6=94=B9=E6=88=90?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=8F=B3=E4=BE=A7=E5=B1=95=E7=A4=BA=20(#3895?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 剔除多余注释 * fix: 右键菜单支持多主题配置 * style: 将tabs的toolbar改成默认右侧展示 --- scss/components/_tabs.scss | 67 ++++++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 25 deletions(-) diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss index cde22e492..9e9cca414 100644 --- a/scss/components/_tabs.scss +++ b/scss/components/_tabs.scss @@ -53,7 +53,7 @@ // &--overflow { // flex: 1; - + // .#{$ns}Tabs-links { // max-width: 0; // } @@ -104,14 +104,14 @@ &::-webkit-scrollbar { display: none; } - + .#{$ns}Tabs-links { // position: relative; min-width: 100%; max-width: 0; height: 100%; overflow-x: hidden; - + .#{$ns}Tabs-links-drag { position: absolute; height: 100%; @@ -236,13 +236,14 @@ &--line { > .#{$ns}Tabs-linksContainer-wrapper { - border-bottom: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color); + border-bottom: var(--Tabs-borderWidth) solid + var(--Tabs--simple-split-color); &--toolbar { .#{$ns}Tabs-link { padding-top: 10px; } - + .#{$ns}Tabs-addable { padding: 0; } @@ -258,7 +259,10 @@ } > .#{$ns}Tabs-linksWrapper > .#{$ns}Tabs-links, - > .#{$ns}Tabs-linksContainer-wrapper > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { + > .#{$ns}Tabs-linksContainer-wrapper + > .#{$ns}Tabs-linksContainer + > .#{$ns}Tabs-linksContainer-main + > .#{$ns}Tabs-links { border-bottom-color: var(--Tabs--line-borderColor); > li { @@ -290,8 +294,6 @@ } } - - &:last-child { > a { margin: 0; @@ -484,7 +486,10 @@ border-color: var(--Tabs--simple-split-color); } - &.#{$ns}Tabs-linksContainer--overflow > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links > .#{$ns}Tabs-link { + &.#{$ns}Tabs-linksContainer--overflow + > .#{$ns}Tabs-linksContainer-main + > .#{$ns}Tabs-links + > .#{$ns}Tabs-link { &:first-of-type { border-left-width: 0; } @@ -505,7 +510,10 @@ } } - > .#{$ns}Tabs-linksContainer-wrapper > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { + > .#{$ns}Tabs-linksContainer-wrapper + > .#{$ns}Tabs-linksContainer + > .#{$ns}Tabs-linksContainer-main + > .#{$ns}Tabs-links { width: 100%; display: flex; flex-direction: row; @@ -674,7 +682,7 @@ &.is-active > a:first-child, > a:first-child:hover, > a:first-child:focus { - color: var(--Tabs--sidebar-iconColor) + color: var(--Tabs--sidebar-iconColor); } } } @@ -746,7 +754,7 @@ position: absolute; right: -2px; background: var(--Tabs--chrome-right-boder-color); - top: var(--Tabs--chrome-radius-size) + top: var(--Tabs--chrome-radius-size); } &:hover { @@ -787,7 +795,8 @@ width: 100%; height: 100%; pointer-events: none; - border-radius: var(--Tabs--chrome-radius-size) var(--Tabs--chrome-radius-size) 0 0; + 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); @@ -818,12 +827,12 @@ > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links { border: none; - + & > li { position: relative; border: none; padding: var(--Tabs--simple-split-size); - + &::after { content: ''; position: absolute; @@ -834,16 +843,16 @@ transform: translateY(-50%); background-color: var(--Tabs--simple-split-color); } - + & > .#{$ns}Tabs-link-close { padding-top: var(--Tabs--simple-split-width); cursor: pointer; } - + &:last-of-type::after { content: none; } - + &.is-active, &:not(.is-disabled):hover { > a:first-child, @@ -857,10 +866,10 @@ &:not(.is-disabled):hover .#{$ns}Tabs-link-close { fill: var(--primary); } - + & > a:first-child { padding: 0; - + &, &:hover, &:focus { @@ -880,7 +889,8 @@ &--strong { & > .#{$ns}Tabs-linksContainer-wrapper { align-items: stretch; - border-bottom: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color); + border-bottom: var(--Tabs-borderWidth) solid + var(--Tabs--simple-split-color); .#{$ns}Tabs-addable { width: var(--Tabs--strong-add-size); @@ -907,15 +917,18 @@ > .#{$ns}Tabs-linksContainer { margin-bottom: calc(var(--Tabs-borderWidth) * -1); - &.#{$ns}Tabs-linksContainer--overflow > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links > .#{$ns}Tabs-link { + &.#{$ns}Tabs-linksContainer--overflow + > .#{$ns}Tabs-linksContainer-main + > .#{$ns}Tabs-links + > .#{$ns}Tabs-link { &:first-of-type { border-left-width: 0; - border-top-left-radius:0; + border-top-left-radius: 0; } &:last-of-type { border-right-width: 0; - border-top-right-radius:0; + border-top-right-radius: 0; } } @@ -941,7 +954,9 @@ } } - > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links > .#{$ns}Tabs-link { + > .#{$ns}Tabs-linksContainer-main + > .#{$ns}Tabs-links + > .#{$ns}Tabs-link { margin-right: var(--Tabs--card-arrow-gap); padding: var(--Tabs--card-arrow-gap) var(--Tabs--card-add-gap); background: var(--Tabs-onActive-bg); @@ -989,9 +1004,11 @@ // display: inline-block; // float: right; // padding-top: var(--gap-xs); + flex: 1 1 auto; // 撑开剩余空间 margin-left: var(--gap-base); display: flex; flex-direction: row; align-items: center; + justify-content: flex-end; // 默认居右展示 } }