fix(button): prevent box shadow overlaps

carbon-design-system · Aug 11, 2020 · 810d3fd · 810d3fd
1 parent 7d54714
commit 810d3fd
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -32,20 +32,27 @@
     // 196px from design kit
     max-width: rem(196px);
 
-    &:not(:first-of-type):not(:focus) {
+    &:not(:focus) {
       box-shadow: rem(-1px) 0 0 0 $button-separator;
     }
+
+    &:first-of-type:not(:focus) {
+      box-shadow: inherit;
+    }
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
     box-shadow: inherit;
   }
 
-  .#{$prefix}--btn-set--stacked
-    .#{$prefix}--btn:not(:first-of-type):not(:focus) {
+  .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) {
     box-shadow: 0 rem(-1px) 0 0 $button-separator;
   }
 
+  .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) {
+    box-shadow: inherit;
+  }
+
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled {
     box-shadow: rem(-1px) 0 0 0 $disabled-03;