Merge branch 'main' into feat/composed-modal-refactor

carbon-design-system · Nov 5, 2021 · 752dbbb · 752dbbb
2 parents ffdb983 + b0a79ab
commit 752dbbb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
@@ -371,9 +371,13 @@
     background-color: transparent;
   }
 
+  // We include `:not(:focus)` here because the pseudo elements will overlap the
+  // focus outline on the button if we set their background-color on focus
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
     background-color: $hover-light-ui;
   }
 

diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
@@ -134,8 +134,8 @@
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State

diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss
@@ -144,8 +144,8 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State