.nav-tabs {
margin-left: -$nav-tabs-link-padding-x; margin-bottom: 40px; .nav-link { font-size: 0.75rem; font-weight: 500; padding: 12px 0; text-transform: uppercase; position: relative; color: $white; &:after { position: absolute; content: ""; left: $nav-tabs-link-padding-x; right: $nav-tabs-link-padding-x; bottom: 0; border-bottom: 4px solid theme-color("primary"); width: 0; @include transition(width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s) } &.active, &:focus, &:hover { font-weight: 700; &:after { width: calc(100% - 1.875rem); @include media-breakpoint-down(xs) { width: 100%; } } } }
}
.nav-tabs.nav-fill {
.nav-link { width: fit-content; margin: 0 auto; &:after { left: 0; right: 0; } &.active, &:focus, &:hover { font-weight: 700; &:after { width: 100%; } } } @include media-breakpoint-down(xs) { .nav-item { width: 100%; } }
}