test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

antd 主题下的 tabs 垂直效果模拟 (#1422)

Browse Source
This commit is contained in:
吴多益 2021-01-22 14:13:42 +08:00 committed by GitHub
parent 98667870fb
commit 20ac23f130
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_properties.scss
View File

@ -1186,6 +1186,14 @@
--Tabs-onActive-color: #{$gray700};
--Tabs-onDisabled-color: #{$gray600};
--Tabs-onHover-borderColor: #{$gray200};
--Tabs--vertical-bg: var(--Table-thead-bg);
--Tabs--vertical-width: #{px2rem(140px)};
--Tabs--vertical-onActive-color: var(--primary);
--Tabs--vertical-onActive-border: var(--primary);
--Tabs--vertical-onActive-bg: var(--Tabs--vertical-bg);
--Tabs--vertical-onActive-borderWidth: 0 0 0 #{px2rem(4px)};
--Tabs--vertical-onActive-container-borderRight: none;
--Tabs--vertical-onActive-container-bg: var(--Tabs--vertical-bg);
--TagControl-sugBtn-bg: var(--Button--default-bg);
--TagControl-sugBtn-border: var(--Button--default-border);

12
scss/components/_tabs.scss
View File

@ -272,9 +272,10 @@
border-radius: 0;
> .#{$ns}Tabs-links {
width: px2rem(140px);
background: var(--Table-thead-bg);
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 {
@ -284,7 +285,7 @@
> a:first-child {
border-color: transparent;
border-radius: 0;
border-width: 0 0 0 px2rem(4px);
border-width: var(--Tabs--vertical-onActive-borderWidth);
margin: 0;
&:hover,
@ -298,8 +299,9 @@
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: var(--primary);
border-color: var(--primary);
color: var(--Tabs--vertical-onActive-color);
background: var(--Tabs--vertical-onActive-bg);
border-color: var(--Tabs--vertical-onActive-border);
}
}
}

5
scss/themes/_antd-variables.scss
View File

@ -149,10 +149,13 @@ $Button-onDisabled-color: rgba(0, 0, 0, 0.25);
--Transfer-title-bg: #f0f2f5;
// Tabs
--Tabs-linkFontSize: #{px2rem(14px)};
--Tabs--card-onActive-borderColor: var(--white);
--Tabs--card-bg: var(--Table-thead-bg);
--Tabs--radio-bg: var(--white);
--Tabs-onActive-borderColor: #{darken($borderColor, 5%)};
--Tabs--vertical-onActive-bg: #e7f7ff;
--Tabs--vertical-onActive-borderWidth: 0 3px 0 0;
--Tabs--vertical-onActive-container-bg: #fff;
--Tabs--vertical-onActive-container-borderRight: 1px solid #f0f0f0;
$Table-strip-bg: transparent;
--Table-strip-bg: transparent;