@mixin tab-active-text {
color: #1d2638; font-weight: 700;
} @mixin tab-active-border {
border-bottom-color: #3c4356;
} @mixin tab-focus-style {
&.js-current, &:focus.js-current { @include tab-active-text; @include tab-active-border; } &:focus { @include tab-active-text; border-bottom-color: rgba(58, 151, 212, .8); }
}
.tabbox {
position: relative; .separator { margin: 14px 0; } .inline-separator { display: inline-block; width: 7px; } .js-slider { position: absolute; background-color: #858585; height: 2px; transition: all .3s; } &.tabbox-sm .tab-btn { font-size: 12px; padding: 6px 12px; } &.tabbox-lg .tab-btn { font-size: 14px; padding: 18px 50px; } .tab-btn { .icon-chevron-down { margin-left: 7px; font-size: 10px; } &:hover { .icon-chevron-down:before { color: #1d2638; } } background: #fff; padding: 12px 25px; font-size: 13px; border-top: 0; border-right: 0; border-left: 0; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #e3e8ee; outline: 0; transition: all .3s; &:hover { @include tab-active-text; } @include tab-focus-style; $tab-btn-borders: ( (tab-btn-type0, rgba(109, 188, 128, .3)), (tab-btn-type1, rgba(1, 137, 114, .2)), (tab-btn-type2, rgba(0, 91, 74, .2)), (tab-btn-type3, rgba(93, 105, 227, .3)), (tab-btn-type4, rgba(205, 205, 205, 1)), ); @each $classname, $border in $tab-btn-borders { &.#{$classname} { border-bottom-color: $border; @include tab-focus-style; } } }
} .tabbox.tabbox-uno {
$tab-active-color: #6772e5; .js-slider { background-color: $tab-active-color; } .tab-btn.js-current { color: $tab-active-color; font-weight: 700; }
}