diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss index 3a71fa811b5365..e0b9cee26a74c8 100644 --- a/src/components/Pivot/Pivot.scss +++ b/src/components/Pivot/Pivot.scss @@ -13,6 +13,9 @@ @include ms-u-normalize; font-size: $ms-font-size-m; font-weight: $ms-font-weight-regular; + position: relative; + color: $ms-color-themePrimary; + white-space: nowrap; } .ms-Pivot-links { @@ -37,6 +40,10 @@ cursor: pointer; } + &:focus { + outline: none; + } + // Underline, not yet visible &::before { background-color: transparent; @@ -77,12 +84,14 @@ } } - - +.ms-Fabric.is-focusVisible .ms-Pivot-link { + &:focus { + outline: 1px solid $ms-color-neutralSecondaryAlt; + } +} // @TODO: Determine if any of the styles below this are necessary anymore. - // Overflow (ellipsis) .ms-Pivot-link.ms-Pivot-link--overflow { color: $ms-color-neutralSecondary; @@ -133,16 +142,16 @@ } } - //== Modifier: Tabs // .ms-Pivot.ms-Pivot--tabs { .ms-Pivot-link { + @include focus-border(); + @include margin-right(0px); height: 40px; background-color: $ms-color-neutralLighter; line-height: 40px; - margin-right: -2px; // Remove space next to inline-block element padding: 0 10px; &:hover:not(.is-selected):not(.ms-Pivot-link--overflow), @@ -175,6 +184,14 @@ } } +.ms-Fabric.is-focusVisible .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus { + &:before { + height: auto; + background: transparent; + transition: none; + } +} + // @TODO: Confirm that this component is not responsive. // // @media (min-width: $ms-screen-lg-min) { @@ -199,11 +216,3 @@ } } } - -// TODO: Remove override below. - -.ms-Pivot { - position: relative; - color: $ms-color-themePrimary; - white-space: nowrap; -}