diff --git a/packages/components/demo/js/components/ComponentExample/component-overrides.scss b/packages/components/demo/js/components/ComponentExample/component-overrides.scss index 1c4677c759ce..5f27dce4bd54 100644 --- a/packages/components/demo/js/components/ComponentExample/component-overrides.scss +++ b/packages/components/demo/js/components/ComponentExample/component-overrides.scss @@ -72,10 +72,6 @@ width: 100%; } - .bx--tooltip__trigger:hover { - color: inherit; - } - & .text-input .bx--text-input { min-width: 20rem; } diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss index 310c8b82ec06..c69c003b49e3 100644 --- a/packages/components/src/components/button/_button.scss +++ b/packages/components/src/components/button/_button.scss @@ -95,6 +95,15 @@ color: $inverse-01; } + &:focus { + color: $text-04; + background-color: $interactive-03; + } + + &:active { + background-color: $active-primary; + } + &:disabled, &:hover:disabled, &:focus:disabled, @@ -167,12 +176,25 @@ } } - .#{$prefix}--btn--icon-only { + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger { @include tooltip--trigger('icon', 'bottom'); + outline: $button-outline-width solid transparent; + outline-offset: -4px; + } + + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:hover + svg { + fill: red; + } + + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { + border-color: $focus; + outline-color: $ui-02; } - .#{$prefix}--btn--icon-only:focus svg { - outline: none; + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus + svg { + outline-color: transparent; } .#{$prefix}--btn--icon-only--top { diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss index 23fab344cc84..ffa91bd9f5d3 100644 --- a/packages/components/src/components/button/_mixins.scss +++ b/packages/components/src/components/button/_mixins.scss @@ -44,7 +44,6 @@ flex-shrink: 0; width: rem(16px); height: rem(16px); - transition: all $duration--fast-01 motion(entrance, productive); } }