p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

优化 tabs 样式

This commit is contained in:
liaoxuezhi 2019-09-25 17:06:08 +08:00
parent 748316ca94
commit 8edab335f6
5 changed files with 95 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
scss/_variables.scss
View File

@ -360,21 +360,33 @@ $Tabs-borderColor: $borderColor !default;
$Tabs-borderWidth: $borderWidth !default;
$Tabs-borderRadius: $borderRadius !default;
$Tabs-color: $text-color !default;
$Tabs-link-padding: $gap-sm $gap-base !default;
$Tabs-link-margin: 0 !default;
$Tabs-onDisabled-color: $gray600 !default;
$Tabs-onHover-borderColor: $gray200 !default;
$Tabs-onActive-color: $gray700 !default;
$Tabs-onActive-borderColor: $gray300 !default;
$Tabs-onActive-borderBottomColor: transparent !default;
$Tabs-onActive-borderBottomWidth: initial !default;
$Tabs-onActive-bg: $background !default;
$Tabs-linkPadding: $gap-sm $gap-base !default;
$Tabs-linkMargin: 0 px2rem(3px) 0 0 !default;
$Tabs-content-bg: $background !default;
$Tabs-content-borderWidth: 0 $Tabs-borderWidth $Tabs-borderWidth !default;
$Tabs-content-padding: $gap-base !default;
$Tabs--card-bg: $background !default;
$Tabs--card-borderTopColor: #e2e5ec !default;
$Tabs--card-onActive-bg: #eceff8 !default;
$Tabs--line-borderColor: $borderColor !default;
$Tabs--line-onHover-color: $primary !default;
$Tabs--line-onHover-borderColor: $primary !default;
$Tabs--line-borderWidth: px2rem(2px) !default;
$Tabs--line-linkPadding: 10px 0 !default;
$Tabs--line-linkMargin: 0 40px 0 0 !default;
$Tabs--line-content-bg: transparent !default;
$Tabs--line-content-padding: 20px 0 !default;;
$Tabs--card-padding: px2rem(6px) 0 0 px2rem(10px);
$Tabs--card-bg: darken($body-bg, 5%) !default;
$Tabs--card-borderTopColor: $borderColor !default;
$Tabs--card-onActive-borderColor: $borderColor !default;
$Tabs--card-onActive-bg: $background !default;
$Tabs--card-linkPadding: px2rem(10px) px2rem(10px) !default;
$Tabs--card-linkMargin: 0 10px 0 0 !default;
$Tabs--radio-bg: #eaf6fe !default;
// Nav

5
scss/components/_nav.scss
View File

@ -11,7 +11,7 @@
display: inline-block;
> a {
font-size: $Nav-item-fontSize;
font-size: $Tabs-linkFontSize;
display: block;
outline: none;
border: $Tabs-borderWidth solid transparent;
@ -43,8 +43,7 @@
color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor;
border-bottom-color: $Tabs-onActive-borderBottomColor;
border-bottom-width: $Tabs-onActive-borderBottomWidth;
border-bottom-color: $Tabs-content-bg;
}
}

102
scss/components/_tabs.scss
View File

@ -22,9 +22,8 @@
border-top-left-radius: $Tabs-borderRadius;
border-top-right-radius: $Tabs-borderRadius;
color: $Tabs-color;
margin-right: px2rem(2px);
padding: $Tabs-link-padding;
margin: $Tabs-link-margin;
margin: $Tabs-linkMargin;
padding: $Tabs-linkPadding;
text-decoration: none;
cursor: pointer;
display: block;
@ -68,9 +67,9 @@
&-content {
background-color: $Tabs-content-bg;
padding: $Tabs-content-padding;
padding: $gap-base;
border-style: solid;
border-width: $Tabs-content-borderWidth;
border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
border-color: $Tabs-borderColor;
}
@ -90,33 +89,44 @@
&--line {
> .#{$ns}Tabs-links {
border-bottom-color: #e2e5ec;
border-bottom-color: $Tabs--line-borderColor;
> li {
> a:first-child {
border-width: 0 0 $Tabs--line-borderWidth 0;
padding: $Tabs--line-linkPadding;
margin: $Tabs--line-linkMargin;
&:hover,
&:focus {
color: #666;
background-color: transparent;
border-color: transparent;
}
}
&.is-active {
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
border-color: $primary;
color: $primary;
border-color: $Tabs--line-onHover-borderColor;
color: $Tabs--line-onHover-color;
background-color: transparent;
}
}
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: #666;
background-color: transparent;
border-color: transparent;
border-style: solid;
border-width: 0 0 px2rem(2px) 0;
}
}
}
> .#{$ns}Tabs-content {
border-width: 0;
padding: $Tabs--line-content-padding;
background-color: $Tabs--line-content-bg;
}
}
&--card {
> .#{$ns}Tabs-links {
padding: $Tabs--card-padding;
background-color: $Tabs--card-bg;
border-top: px2rem(1px) solid $Tabs--card-borderTopColor;
@ -125,20 +135,30 @@
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
border-color: $Tabs--card-onActive-borderColor;
color: $primary;
border-bottom-color: $Tabs--card-onActive-bg;
background-color: $Tabs--card-onActive-bg;
margin-left: px2rem(1px);
}
}
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: #666;
background-color: transparent;
> a:first-child {
padding: $Tabs--card-linkPadding;
margin: $Tabs--card-linkMargin;
&:hover,
&:focus {
color: #666;
background-color: $Tabs--card-onActive-bg;
border-bottom-color: transparent;
}
}
}
}
> .#{$ns}Tabs-content {
border-width: 0;
}
}
&--radio {
@ -147,36 +167,50 @@
margin-bottom: px2rem(10px);
> li {
margin: 0;
> a:first-child {
border-width: px2rem(1px);
border-color: $Tabs-borderColor;
font-size: $fontSizeSm;
text-align: center;
margin-right: 0;
padding: 0 px2rem(20px);
margin: 0;
padding: 0 px2rem(10px);
min-width: 68px;
height: px2rem(30px);
line-height: px2rem(30px);
border-radius: 0;
}
&.is-active {
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: #fff;
color: $Tabs--radio-bg;
background-color: $primary;
margin-left: px2rem(1px);
border-color: $primary;
position: relative;
z-index: 1;
}
}
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: $primary;
background-color: $Tabs--radio-bg;
> a:first-child {
background: $Tabs--radio-bg;
&:hover,
&:focus {
color: $primary;
}
}
}
> li + li {
margin-left: -1px;
}
}
> .#{$ns}Tabs-content {
border-top: $Tabs-borderWidth solid $Tabs-borderColor;
}
}
}
}

13
scss/themes/cxd.scss
View File

@ -335,17 +335,8 @@ $Wizard-badge-marginRight: px2rem(6px);
// Tabs
$Tabs-linkFontSize: px2rem(14px);
$Tabs-color: $text-color;
$Tabs-onActive-color: $info;
$Tabs-onActive-borderColor: transparent;
$Tabs-onHover-borderColor: transparent;
$Tabs-onActive-borderBottomColor: $info;
$Tabs-onActive-borderBottomWidth: px2rem(2px);
$Tabs-content-borderWidth: 0;
$Tabs-borderRadius: 0;
$Tabs-content-padding: px2rem(10px) 0 0;
$Tabs-link-padding: px2rem(10px) 0;
$Tabs-link-margin: 0 px2rem(40px) 0 0;
$Tabs--card-onActive-borderColor: $white;
$Tabs--radio-bg: $white;
// Pagination

2
scss/themes/dark.scss
View File

@ -113,6 +113,8 @@ $Tabs-onActive-borderColor: $borderColor;
$Tabs-onActive-color: lighten($text-color, 10%);
$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;
$Tabs--radio-bg: $Panel-bg;
$Tooltip--attr-color: $text-color;
$TransferSelect--table-heading-bg: $background;
$Wizard-steps-bg: $background-head;