test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

将tabs的toolbar改成默认右侧展示 (#3895)

Browse Source 
* docs: 剔除多余注释

* fix: 右键菜单支持多主题配置

* style: 将tabs的toolbar改成默认右侧展示
This commit is contained in:
刘丹 2022-03-30 11:07:27 +08:00 committed by GitHub
parent 2dcd67cca3
commit 63575ff8e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
scss/components/_tabs.scss
View File

@ -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; // 默认居右展示
}
}