// ========================================================================== // jQuery UI Tab Styling // ========================================================================== .#{$selector} { .ui-tabs { .ui-tabs-panel { padding: 14px 20px; } .ipt-eform-tab-nav-wrap { position: relative; display: flex; padding: 0 2em; background-color: $primary-color; color: $primary-color-text; margin: -0.2em -0.2em 0 -0.2em; .eform-tab-active-notifier, .eform-tab-passive-notifier { display: none; } .eform-tab-passive-notifier { display: block; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: $primary-color-dark; box-shadow: 0 -1px 1px 0px fade-out( $box-shadow-color, 0.6 ); } .eform-tab-nav { display: none; } } .ui-tabs-nav { position: relative; overflow-x: auto; overflow-y: hidden; height: 3em; white-space: nowrap; padding: 0; margin: 0; &::-webkit-scrollbar-track { background-color: rgba( 255, 255, 255, 0.5 ); } &::-webkit-scrollbar { height: 4px; background-color: rgba( 0, 0, 0, 0.2 ); } &::-webkit-scrollbar-thumb { background-color: rgba( 0, 0, 0, 0.5 ); } li { display: inline-block; text-align: left; line-height: 3em; height: 3em; padding: 0; margin: 0; float: none; opacity: 0.5; @include material__smooth-tran( 200ms, opacity ); &.ui-tabs-active { opacity: 1; } .ui-tabs-anchor { display: block; width: 100%; height: 100%; font-size: 1.5em; padding: 0 0.5em; color: $primary-color-text; /*text-overflow: ellipsis;*/ /*overflow: hidden;*/ text-shadow: 0 0 1px fade-out( $box-shadow-color, 0.5 ); &:focus, &:active { outline: none; } .ipticm { vertical-align: middle; margin-right: 4px; display: inline-block; } .eform-tab-labels { display: inline-block; .ipt_uif_tab_subtitle { font-size: 0.5em; } } } } } } }