File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.tab-area {
width: 100%;
}
.tab {
> ul {
display: flex;
align-items: center;
overflow-x: auto;
width: 100%;
}
li,
.btn-tab {
@include flex-layout(inline-flex, center, center);
position: relative;
white-space: nowrap;
}
.btn-tab {
width: 100%;
background-color: var(--#{$prefix}white);
border: 1px solid var(--#{$prefix}white);
color: var(--#{$prefix}gray-70);
font-weight: map-get($fws, bold);
transition: $transition-base;
&:not(:disabled):hover {
border-radius: .6rem;
background-color: var(--tk-secondary-5);
transition: $transition-base;
}
&:not(:disabled):active {
background-color: var(--tk-secondary-10);
transition: $transition-base;
}
&[disabled] {
color: var(--tk-gray-50);
cursor: default;
}
}
li {
flex-grow: 0;
}
&.full {
width: 100%;
.btn-tab {
height: var(--#{$prefix}tab-h-full) !important;
font-size: var(--#{$prefix}tab-fz-full) !important;
}
> ul {
@include group-wrap;
> li {
@include equal-width;
}
}
}
&.fill {
.btn-tab {
height: var(--#{$prefix}tab-h-fill);
padding: 0 var(--#{$prefix}tab-px-fill);
font-size: var(--#{$prefix}tab-fz-fill);
}
.active {
.btn-tab {
background-color: var(--#{$prefix}secondary);
border-color: var(--#{$prefix}secondary);
color: var(--#{$prefix}white);
}
}
> ul {
> li {
& + li {
margin-left: var(--#{$prefix}tab-ml-fill);
}
.btn-tab {
border-radius: var(--#{$prefix}tab-rd-fill);
}
}
}
&.full {
.btn-tab {
border: 1px solid var(--#{$prefix}secondary-20);
}
.active {
.btn-tab {
background-color: var(--#{$prefix}secondary);
border-color: var(--#{$prefix}secondary);
color: var(--#{$prefix}white);
}
}
> ul {
> li {
& + li {
margin-left: 0;
.btn-tab {
border-left: none;
}
}
.btn-tab {
border-radius: 0;
}
&:first-of-type {
.btn-tab {
border-top-left-radius: var(--#{$prefix}tab-rd-full);
border-bottom-left-radius: var(--#{$prefix}tab-rd-full);
}
}
&:last-of-type {
.btn-tab {
border-top-right-radius: var(--#{$prefix}tab-rd-full);
border-bottom-right-radius: var(--#{$prefix}tab-rd-full);
}
}
}
}
}
}
&.line {
.btn-tab {
height: var(--#{$prefix}tab-h-line);
padding: 0 var(--#{$prefix}tab-px-line);
font-size: var(--#{$prefix}tab-fz-line);
&:before {
@include position($b: 0, $l: 50%);
@include pseudo();
width: 0;
height: .2rem;
background-color: var(--#{$prefix}secondary);
transition: $transition-base;
}
}
.active {
.btn-tab {
color: var(--#{$prefix}secondary);
&:before {
@include position($l: 0);
width: 100%;
}
}
}
> ul {
> li {
& + li {
margin-left: var(--#{$prefix}tab-ml-line);
}
}
}
&.full {
.btn-tab {
padding-left:0;
padding-right: 0;
border: 0;
border-bottom: 2px solid var(--#{$prefix}gray-30);
&:before {
bottom: -.2rem;
height: .4rem;
}
&:hover,
&:active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
> ul {
> li {
& + li {
margin-left: 0;
}
}
}
}
}
}
.tab-conts {
display: none;
margin-top: var(--#{$prefix}spacer-10);
/*position: absolute;
z-index: -1;
opacity: 0;
transition: $transition-fade;*/
&.active {
@include flex-layout($fd: column, $ai: normal);
gap: var(--#{$prefix}spacer-10);
/*position: relative;
z-index: auto;
opacity: 1;*/
}
}
//mobile only
@include mobile {
.tab-conts {
margin-top: var(--#{$prefix}spacer-10);
&.active {
gap: var(--#{$prefix}spacer-8);
}
}
}