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-borderWidth: $borderWidth !default;
$Tabs-borderRadius: $borderRadius !default; $Tabs-borderRadius: $borderRadius !default;
$Tabs-color: $text-color !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-onDisabled-color: $gray600 !default;
$Tabs-onHover-borderColor: $gray200 !default; $Tabs-onHover-borderColor: $gray200 !default;
$Tabs-onActive-color: $gray700 !default; $Tabs-onActive-color: $gray700 !default;
$Tabs-onActive-borderColor: $gray300 !default; $Tabs-onActive-borderColor: $gray300 !default;
$Tabs-onActive-borderBottomColor: transparent !default;
$Tabs-onActive-borderBottomWidth: initial !default;
$Tabs-onActive-bg: $background !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-bg: $background !default;
$Tabs-content-borderWidth: 0 $Tabs-borderWidth $Tabs-borderWidth !default;
$Tabs-content-padding: $gap-base !default; $Tabs--line-borderColor: $borderColor !default;
$Tabs--card-bg: $background !default; $Tabs--line-onHover-color: $primary !default;
$Tabs--card-borderTopColor: #e2e5ec !default; $Tabs--line-onHover-borderColor: $primary !default;
$Tabs--card-onActive-bg: #eceff8 !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; $Tabs--radio-bg: #eaf6fe !default;
// Nav // Nav

5
scss/components/_nav.scss
View File

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

102
scss/components/_tabs.scss
View File

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

2
scss/themes/dark.scss
View File

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