amis2/scss/components/_tabs.scss

270 lines
7.4 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Tabs {
&-links {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
2019-08-07 15:36:05 +08:00
padding-left: 0;
margin-bottom: 0;
list-style: none;
2019-09-09 00:53:39 +08:00
2019-08-07 15:36:05 +08:00
&::before {
display: table;
2019-09-09 00:53:39 +08:00
content: ' ';
2019-08-07 15:36:05 +08:00
}
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-link {
2019-04-30 11:11:25 +08:00
margin-bottom: -$Tabs-borderWidth;
display: inline-block;
2019-09-04 23:36:19 +08:00
position: relative;
2019-10-29 12:37:20 +08:00
>a:first-child {
2019-04-30 11:11:25 +08:00
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;
2019-09-25 17:06:08 +08:00
margin: $Tabs-linkMargin;
padding: $Tabs-linkPadding;
2019-04-30 11:11:25 +08:00
text-decoration: none;
cursor: pointer;
2019-08-07 15:36:05 +08:00
display: block;
2019-04-30 11:11:25 +08:00
}
2019-10-29 12:37:20 +08:00
>.#{$ns}Combo-toolbarBtn {
2019-09-04 23:36:19 +08:00
position: absolute;
right: -10px;
top: -10px;
z-index: 10;
display: none;
}
2019-09-09 00:53:39 +08:00
2019-10-29 12:37:20 +08:00
&:hover>.#{$ns}Combo-toolbarBtn {
2019-09-04 23:36:19 +08:00
display: block;
}
2019-10-29 12:37:20 +08:00
&:hover>a:first-child,
>a:first-child:focus {
2019-04-30 11:11:25 +08:00
border-color: $Tabs-onHover-borderColor;
text-decoration: none;
}
2019-10-29 12:37:20 +08:00
&.disabled>a:first-child,
&.is-disabled>a:first-child {
2019-04-30 11:11:25 +08:00
color: $Tabs-onDisabled-color;
background-color: transparent;
border-color: transparent;
pointer-events: none;
}
2019-10-29 12:37:20 +08:00
&.active>a:first-child,
&.is-active>a:first-child {
2019-04-30 11:11:25 +08:00
color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor;
border-bottom-color: transparent;
}
}
}
2019-04-30 11:11:25 +08:00
&-content {
background-color: $Tabs-content-bg;
2019-09-25 17:06:08 +08:00
padding: $gap-base;
2019-04-30 11:11:25 +08:00
border-style: solid;
2019-09-25 17:06:08 +08:00
border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
2019-04-30 11:11:25 +08:00
border-color: $Tabs-borderColor;
2019-08-13 11:12:42 +08:00
}
2019-08-07 15:36:05 +08:00
2019-08-13 11:12:42 +08:00
&-pane {
display: none;
2019-08-13 20:10:11 +08:00
opacity: 0;
2019-09-09 00:53:39 +08:00
transition: opacity 0.35s linear;
2019-08-13 11:12:42 +08:00
&.is-active {
display: block;
2019-08-07 15:36:05 +08:00
}
2019-09-09 00:53:39 +08:00
2019-08-13 20:10:11 +08:00
&.in {
opacity: 1;
}
}
2019-04-30 11:11:25 +08:00
&--line {
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-links {
2019-09-25 17:06:08 +08:00
border-bottom-color: $Tabs--line-borderColor;
2019-10-29 12:37:20 +08:00
>li {
>a:first-child {
2019-09-25 17:06:08 +08:00
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 {
2019-10-29 12:37:20 +08:00
>a {
margin: 0;
}
}
2019-08-13 11:12:42 +08:00
&.is-active {
2019-10-29 12:37:20 +08:00
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
2019-09-25 17:06:08 +08:00
border-color: $Tabs--line-onHover-borderColor;
color: $Tabs--line-onHover-color;
background-color: transparent;
2019-04-30 11:11:25 +08:00
}
}
}
}
2019-09-25 17:06:08 +08:00
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-content {
2019-09-25 17:06:08 +08:00
border-width: 0;
padding: $Tabs--line-content-padding;
background-color: $Tabs--line-content-bg;
}
2019-04-30 11:11:25 +08:00
}
2019-04-30 11:11:25 +08:00
&--card {
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-links {
2019-09-25 17:06:08 +08:00
padding: $Tabs--card-padding;
2019-09-09 00:53:39 +08:00
background-color: $Tabs--card-bg;
border-top: px2rem(1px) solid $Tabs--card-borderTopColor;
2019-10-29 12:37:20 +08:00
>li {
2019-08-13 11:12:42 +08:00
&.is-active {
2019-10-29 12:37:20 +08:00
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
2019-09-25 17:06:08 +08:00
border-color: $Tabs--card-onActive-borderColor;
2019-04-30 11:11:25 +08:00
color: $primary;
2019-09-25 17:06:08 +08:00
border-bottom-color: $Tabs--card-onActive-bg;
2019-09-09 00:53:39 +08:00
background-color: $Tabs--card-onActive-bg;
2019-04-30 11:11:25 +08:00
}
}
2019-10-29 12:37:20 +08:00
>a:first-child {
2019-09-25 17:06:08 +08:00
padding: $Tabs--card-linkPadding;
margin: $Tabs--card-linkMargin;
&:hover,
&:focus {
color: #666;
background-color: $Tabs--card-onActive-bg;
border-bottom-color: transparent;
}
2019-04-30 11:11:25 +08:00
}
}
}
2019-09-25 17:06:08 +08:00
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-content {
2019-09-25 17:06:08 +08:00
border-width: 0;
}
2019-04-30 11:11:25 +08:00
}
2019-04-30 11:11:25 +08:00
&--radio {
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-links {
2019-04-30 11:11:25 +08:00
border: 0;
margin-bottom: px2rem(10px);
2019-10-29 12:37:20 +08:00
>li {
2019-09-25 17:06:08 +08:00
margin: 0;
2019-10-29 12:37:20 +08:00
>a:first-child {
2019-09-25 17:06:08 +08:00
border-width: px2rem(1px);
border-color: $Tabs-borderColor;
2019-04-30 11:11:25 +08:00
font-size: $fontSizeSm;
text-align: center;
2019-09-25 17:06:08 +08:00
margin: 0;
padding: 0 px2rem(10px);
min-width: 68px;
2019-04-30 11:11:25 +08:00
height: px2rem(30px);
line-height: px2rem(30px);
2019-09-25 17:06:08 +08:00
border-radius: 0;
2019-10-29 12:37:20 +08:00
background: $Tabs--radio-bg;
&:hover,
&:focus {
color: $primary;
}
2019-04-30 11:11:25 +08:00
}
2019-08-13 11:12:42 +08:00
&.is-active {
2019-10-29 12:37:20 +08:00
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
2019-09-25 17:06:08 +08:00
color: $Tabs--radio-bg;
2019-04-30 11:11:25 +08:00
background-color: $primary;
2019-09-25 17:06:08 +08:00
border-color: $primary;
position: relative;
z-index: 1;
2019-04-30 11:11:25 +08:00
}
}
2019-10-29 12:37:20 +08:00
}
2019-10-29 12:37:20 +08:00
>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;
2019-09-25 17:06:08 +08:00
&:hover,
&:focus {
color: $primary;
2019-10-29 12:37:20 +08:00
border-color: transparent;
2019-09-25 17:06:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-09-25 17:06:08 +08:00
2019-10-29 12:37:20 +08:00
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
color: $primary;
border-color: $primary;
}
}
2019-09-25 17:06:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-10-29 12:37:20 +08:00
>.#{$ns}Tabs-content {
border: none;
flex-grow: 1;
2019-04-30 11:11:25 +08:00
}
}
2019-09-25 17:06:08 +08:00
}