.nav-tabs { border-bottom: 2px solid #eee; > li { position: relative; top: 3px; left: -2px; > a { border: none !important; color: #999 !important; @include border-radius(0); &:hover, &:active, &:focus { background-color: transparent !important; } &:before { content: ''; position: absolute; left: 0; width: 100%; height: 0; border-bottom: 2px solid #2196F3; bottom: 2px; @include transform(scaleX(0)); @include transition(0.1s ease-in); } .material-icons { position: relative; top: 7px; margin-bottom: 8px; } } } li.active { a { color: #222 !important; &:hover, &:active, &:focus { background-color: transparent !important; } &:before { @include transform(scaleX(1)); } } } + .tab-content { padding: 15px 0; } } @each $key, $val in $colors { .nav-tabs.tab-col-#{$key} { > li { > a { &:before { border-bottom: 2px solid $val; } } } } }