Commit 6e4005111db58ca10f10e9aa4bca4aec57363736
1 parent
c7cfeb54
perf: tabs optimization
Showing
2 changed files
with
13 additions
and
19 deletions
src/layouts/default/multitabs/index.less
| ... | ... | @@ -7,19 +7,6 @@ |
| 7 | 7 | height: @multiple-height; |
| 8 | 8 | } |
| 9 | 9 | |
| 10 | - // .ant-tabs:not(.ant-tabs-card) { | |
| 11 | - // .ant-tabs-nav-container { | |
| 12 | - // height: @multiple-height; | |
| 13 | - // background: @white; | |
| 14 | - // } | |
| 15 | - | |
| 16 | - // .ant-tabs-tab { | |
| 17 | - // font-size: 14px; | |
| 18 | - // line-height: 1.5515; | |
| 19 | - // background: @white; | |
| 20 | - // } | |
| 21 | - // } | |
| 22 | - | |
| 23 | 10 | .ant-tabs.ant-tabs-card { |
| 24 | 11 | .ant-tabs-card-bar { |
| 25 | 12 | height: @multiple-height; |
| ... | ... | @@ -39,14 +26,21 @@ |
| 39 | 26 | line-height: calc(@multiple-height - 2px); |
| 40 | 27 | color: @text-color-call-out; |
| 41 | 28 | background: @white; |
| 42 | - border: 1px solid @border-color-shallow-dark; | |
| 43 | - border-radius: 4px 4px 0 0; | |
| 29 | + border: 1px solid darken(@border-color-light, 6%); | |
| 30 | + border-radius: 2px 2px 0 0; | |
| 44 | 31 | transition: none; |
| 45 | 32 | |
| 46 | 33 | .ant-tabs-close-x { |
| 34 | + // display: none; | |
| 47 | 35 | color: inherit; |
| 48 | 36 | } |
| 49 | 37 | |
| 38 | + &:hover { | |
| 39 | + .ant-tabs-close-x { | |
| 40 | + display: block; | |
| 41 | + } | |
| 42 | + } | |
| 43 | + | |
| 50 | 44 | > div { |
| 51 | 45 | display: flex; |
| 52 | 46 | justify-content: center; |
| ... | ... | @@ -72,7 +66,7 @@ |
| 72 | 66 | |
| 73 | 67 | &:hover::before { |
| 74 | 68 | transform: scaleX(1); |
| 75 | - transition: transform 0.4s ease; | |
| 69 | + transition: transform 0.3s ease; | |
| 76 | 70 | transform-origin: bottom left; |
| 77 | 71 | } |
| 78 | 72 | } |
| ... | ... | @@ -80,14 +74,13 @@ |
| 80 | 74 | .ant-tabs-tab-active { |
| 81 | 75 | height: calc(@multiple-height - 3px); |
| 82 | 76 | color: @white; |
| 83 | - // background: @primary-color; | |
| 84 | 77 | background: linear-gradient( |
| 85 | 78 | 118deg, |
| 86 | - rgba(@primary-color, 0.8), | |
| 79 | + rgba(@primary-color, 0.7), | |
| 87 | 80 | rgba(@primary-color, 1) |
| 88 | 81 | ) !important; |
| 89 | 82 | border: 0; |
| 90 | - box-shadow: 0 0 6px 1px rgba(@primary-color, 0.4); | |
| 83 | + box-shadow: 0 0 6px 1px rgba(@primary-color, 0.7); | |
| 91 | 84 | |
| 92 | 85 | &::before { |
| 93 | 86 | display: none; | ... | ... |
src/layouts/default/multitabs/index.tsx