amis/scss/components/_tabs.scss
2019-10-29 12:37:20 +08:00

270 lines
7.4 KiB
SCSS

.#{$ns}Tabs {
&-links {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
padding-left: 0;
margin-bottom: 0;
list-style: none;
&::before {
display: table;
content: ' ';
}
>.#{$ns}Tabs-link {
margin-bottom: -$Tabs-borderWidth;
display: inline-block;
position: relative;
>a:first-child {
font-size: $Tabs-linkFontSize;
outline: none;
border: $Tabs-borderWidth solid transparent;
border-top-left-radius: $Tabs-borderRadius;
border-top-right-radius: $Tabs-borderRadius;
color: $Tabs-color;
margin: $Tabs-linkMargin;
padding: $Tabs-linkPadding;
text-decoration: none;
cursor: pointer;
display: block;
}
>.#{$ns}Combo-toolbarBtn {
position: absolute;
right: -10px;
top: -10px;
z-index: 10;
display: none;
}
&:hover>.#{$ns}Combo-toolbarBtn {
display: block;
}
&:hover>a:first-child,
>a:first-child:focus {
border-color: $Tabs-onHover-borderColor;
text-decoration: none;
}
&.disabled>a:first-child,
&.is-disabled>a:first-child {
color: $Tabs-onDisabled-color;
background-color: transparent;
border-color: transparent;
pointer-events: none;
}
&.active>a:first-child,
&.is-active>a:first-child {
color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor;
border-bottom-color: transparent;
}
}
}
&-content {
background-color: $Tabs-content-bg;
padding: $gap-base;
border-style: solid;
border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
border-color: $Tabs-borderColor;
}
&-pane {
display: none;
opacity: 0;
transition: opacity 0.35s linear;
&.is-active {
display: block;
}
&.in {
opacity: 1;
}
}
&--line {
>.#{$ns}Tabs-links {
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;
}
}
&:last-child {
>a {
margin: 0;
}
}
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
border-color: $Tabs--line-onHover-borderColor;
color: $Tabs--line-onHover-color;
background-color: transparent;
}
}
}
}
>.#{$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;
>li {
&.is-active {
>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;
}
}
>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 {
>.#{$ns}Tabs-links {
border: 0;
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: 0;
padding: 0 px2rem(10px);
min-width: 68px;
height: px2rem(30px);
line-height: px2rem(30px);
border-radius: 0;
background: $Tabs--radio-bg;
&:hover,
&:focus {
color: $primary;
}
}
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
color: $Tabs--radio-bg;
background-color: $primary;
border-color: $primary;
position: relative;
z-index: 1;
}
}
}
>li+li {
margin-left: -1px;
}
}
>.#{$ns}Tabs-content {
border-top: $Tabs-borderWidth solid $Tabs-borderColor;
}
}
&--vertical {
display: flex;
min-height: px2rem(200px);
border: $Tabs-borderWidth solid $Tabs-borderColor;
border-radius: 0;
>.#{$ns}Tabs-links {
width: px2rem(140px);
background: #F5F5F5;
border: none;
padding-bottom: px2rem(60px);
>li {
margin: 0 0 0 -1px;
display: block;
>a:first-child {
border-color: transparent;
border-radius: 0;
border-width: 0 0 0 px2rem(4px);
margin: 0;
&:hover,
&:focus {
color: $primary;
border-color: transparent;
}
}
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
color: $primary;
border-color: $primary;
}
}
}
}
>.#{$ns}Tabs-content {
border: none;
flex-grow: 1;
}
}
}