| 提交 | 用户 | age | ||
| 2f6253 | 1 | @import (reference) '../../../design/index.less'; |
| 27e50b | 2 | @prefix-cls: ~'@{namespace}-multiple-tabs'; |
| 2f6253 | 3 | |
| 27e50b | 4 | .@{prefix-cls} { |
| 439291 | 5 | z-index: 10; |
| cedba3 | 6 | height: @multiple-height + 2; |
| V | 7 | line-height: @multiple-height + 2; |
| 439291 | 8 | background: @white; |
| cedba3 | 9 | box-shadow: 0 1px 2px 0 rgba(29, 35, 41, 0.05); |
| 439291 | 10 | |
| 2f6253 | 11 | .ant-tabs-small { |
| 陈 | 12 | height: @multiple-height; |
| 13 | } | |
| 14 | ||
| 15 | .ant-tabs.ant-tabs-card { | |
| 16 | .ant-tabs-card-bar { | |
| 17 | height: @multiple-height; | |
| 18 | margin: 0; | |
| 19 | background: @white; | |
| 20 | border: 0; | |
| 770283 | 21 | box-shadow: none; |
| 2f6253 | 22 | |
| 陈 | 23 | .ant-tabs-nav-container { |
| 24 | height: @multiple-height; | |
| 25 | padding-top: 2px; | |
| 26 | } | |
| 27 | ||
| 28 | .ant-tabs-tab { | |
| 29 | height: calc(@multiple-height - 2px); | |
| a1ffb6 | 30 | padding-right: 12px; |
| 2f6253 | 31 | line-height: calc(@multiple-height - 2px); |
| 陈 | 32 | color: @text-color-call-out; |
| 33 | background: @white; | |
| 27e50b | 34 | border: 1px solid darken(@border-color-light, 6%); |
| 2f6253 | 35 | transition: none; |
| 27e50b | 36 | |
| V | 37 | &:not(.ant-tabs-tab-active)::before { |
| 38 | position: absolute; | |
| 39 | top: -1px; | |
| 40 | left: 50%; | |
| 41 | width: 100%; | |
| 42 | height: 2px; | |
| 43 | background-color: @primary-color; | |
| 44 | content: ''; | |
| 45 | opacity: 0; | |
| 46 | transform: translate(-50%, 0) scaleX(0); | |
| 47 | transform-origin: center; | |
| 48 | transition: none; | |
| 49 | } | |
| 2f6253 | 50 | |
| cedba3 | 51 | &:hover { |
| V | 52 | .ant-tabs-close-x { |
| 53 | opacity: 1; | |
| 27e50b | 54 | } |
| V | 55 | |
| 56 | &:not(.ant-tabs-tab-active)::before { | |
| 57 | opacity: 1; | |
| 58 | transform: translate(-50%, 0) scaleX(1); | |
| 59 | transition: all 0.3s ease-in-out; | |
| cedba3 | 60 | } |
| V | 61 | } |
| 62 | ||
| 2f6253 | 63 | .ant-tabs-close-x { |
| cedba3 | 64 | width: 8px; |
| 770283 | 65 | height: 12px; |
| V | 66 | font-size: 12px; |
| 2f6253 | 67 | color: inherit; |
| cedba3 | 68 | opacity: 0; |
| 770283 | 69 | transition: none; |
| V | 70 | |
| 71 | &:hover { | |
| 72 | svg { | |
| 27e50b | 73 | width: 0.8em; |
| 770283 | 74 | } |
| 6e4005 | 75 | } |
| 2f6253 | 76 | } |
| 陈 | 77 | |
| 70fba7 | 78 | > div { |
| V | 79 | display: flex; |
| 80 | justify-content: center; | |
| 81 | align-items: center; | |
| 82 | } | |
| 83 | ||
| 2f6253 | 84 | svg { |
| 陈 | 85 | fill: @text-color-base; |
| 86 | } | |
| 87 | } | |
| 88 | ||
| 89 | .ant-tabs-tab-active { | |
| cedba3 | 90 | position: relative; |
| V | 91 | padding-left: 26px; |
| 2f6253 | 92 | color: @white; |
| 770283 | 93 | background: fade(@primary-color, 100%); |
| 2f6253 | 94 | border: 0; |
| 27e50b | 95 | transition: none; |
| 2f6253 | 96 | |
| 陈 | 97 | &::before { |
| cedba3 | 98 | position: absolute; |
| V | 99 | top: calc(50% - 3px); |
| 100 | left: 8px; | |
| 101 | width: 6px; | |
| 102 | height: 6px; | |
| 103 | background: #fff; | |
| 104 | border-radius: 50%; | |
| 105 | content: ''; | |
| 106 | transition: none; | |
| 107 | } | |
| 108 | ||
| 109 | .ant-tabs-close-x { | |
| 110 | opacity: 1; | |
| 6e03e0 | 111 | } |
| V | 112 | |
| 2f6253 | 113 | svg { |
| 770283 | 114 | width: 0.7em; |
| 439291 | 115 | fill: @white; |
| 2f6253 | 116 | } |
| 陈 | 117 | } |
| 118 | } | |
| 119 | ||
| 120 | .ant-tabs-nav > div:nth-child(1) { | |
| 27e50b | 121 | padding: 0 6px; |
| cedba3 | 122 | |
| V | 123 | .ant-tabs-tab { |
| 124 | margin-right: 3px !important; | |
| 125 | } | |
| 2f6253 | 126 | } |
| 陈 | 127 | } |
| 128 | ||
| 129 | .ant-tabs-tab:not(.ant-tabs-tab-active) { | |
| 130 | .anticon-close { | |
| 131 | font-size: 12px; | |
| 132 | ||
| 133 | svg { | |
| 770283 | 134 | width: 0.6em; |
| 2f6253 | 135 | } |
| 陈 | 136 | } |
| 137 | } | |
| 138 | ||
| 7bfe5f | 139 | .ant-tabs-extra-content { |
| V | 140 | margin-top: 2px; |
| 141 | line-height: @multiple-height !important; | |
| 142 | } | |
| 770283 | 143 | |
| 7bfe5f | 144 | .ant-dropdown-trigger { |
| V | 145 | display: inline-flex; |
| 146 | } | |
| 349d19 | 147 | |
| 27e50b | 148 | &--hide-close { |
| V | 149 | .ant-tabs-close-x { |
| 150 | opacity: 0 !important; | |
| 2f6253 | 151 | } |
| 陈 | 152 | } |
| 153 | ||
| 27e50b | 154 | &-content { |
| V | 155 | &__extra { |
| 156 | display: inline-block; | |
| 157 | width: @multiple-height; | |
| 158 | height: @multiple-height; | |
| 159 | line-height: @multiple-height; | |
| 160 | color: #999; | |
| 161 | text-align: center; | |
| 162 | cursor: pointer; | |
| 163 | border-left: 1px solid #eee; | |
| 164 | ||
| 165 | &:hover { | |
| 166 | color: @text-color-base; | |
| 167 | } | |
| 168 | ||
| 169 | span[role='img'] { | |
| 170 | transform: rotate(90deg); | |
| 171 | } | |
| 172 | } | |
| 173 | ||
| 174 | &__info { | |
| 175 | display: inline-block; | |
| 176 | width: 100%; | |
| 177 | height: @multiple-height - 2; | |
| 178 | padding-left: 0; | |
| 179 | margin-left: -10px; | |
| 180 | font-size: 12px; | |
| 181 | cursor: pointer; | |
| 182 | user-select: none; | |
| 183 | } | |
| 2f6253 | 184 | } |
| 陈 | 185 | } |
