diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 31b25f5702..25129f1098 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -128,7 +128,7 @@ &:focus { background-color: unset; - border: 1px solid var(--green-50); + outline: 0; } &:hover { @@ -137,8 +137,8 @@ // tab navigation focus style &:focus-visible { - &:extend(.input-focus-style); - background-color: white; + .box-shadow-button-input(); + outline: 0; } @media (max-width: @screen-xs-max) { diff --git a/services/web/frontend/stylesheets/components/tabs.less b/services/web/frontend/stylesheets/components/tabs.less index 4e5e84c9be..c301a959b2 100644 --- a/services/web/frontend/stylesheets/components/tabs.less +++ b/services/web/frontend/stylesheets/components/tabs.less @@ -47,31 +47,52 @@ .nav-tabs-container { overflow-x: auto; margin-bottom: var(--spacing-11); - + text-align: center; .nav-tabs { - border: 0 !important; + display: inline-flex; + border-bottom: var(--border-width-base) solid var(--neutral-20); margin: 0 auto; padding: 0; text-align: center; min-width: max-content; // This is for horizontal scrolling + border-top: 2px solid transparent; // so that top focus border is visible li { display: inline-block; float: none; - margin-bottom: 0; //override navs.less + margin-bottom: calc(var(--border-width-base) * -1); + margin-right: var(--spacing-04); + + &:last-child { + margin-right: 0; + } a { border: 0; - color: @neutral-70; - border-bottom: 3px solid @neutral-20 !important; + border-radius: 0; + color: var(--neutral-70); margin-right: unset; padding: var(--spacing-04); + line-height: var(--line-height-03); &:focus, &:hover { - background-color: transparent !important; border: 0; } + + &:focus, + &:focus-visible { + background-color: unset; + outline: 0; + } + + &:hover { + background-color: var(--neutral-10); + } + + &:focus-visible { + .box-shadow-button-input(); + } } }