fix(controls): Avoid showing focus styles for disabled controls (#1365)

box · Apr 27, 2021 · f8e8b8b · f8e8b8b
1 parent da2702f
commit f8e8b8b
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/lib/viewers/controls/_styles.scss b/src/lib/viewers/controls/_styles.scss
@@ -11,6 +11,9 @@ $bp-controls-size-small: 32px;
 $bp-controls-spacing: 6px;
 
 @mixin bp-Control($height: $bp-controls-size-default, $width: $bp-controls-size-default) {
+    @include bp-Control--fade;
+    @include bp-Control--outline;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -39,9 +42,6 @@ $bp-controls-spacing: 6px;
         padding: 5px;
         border-radius: $bp-controls-radius-inner;
     }
-
-    @include bp-Control--fade;
-    @include bp-Control--outline;
 }
 
 @mixin bp-Control--expand {
@@ -54,20 +54,20 @@ $bp-controls-spacing: 6px;
     transition: opacity 150ms;
     will-change: opacity; // Prevent flickering in Safari
 
-    &:focus,
-    &:hover {
+    &:focus:not(:disabled),
+    &:hover:not(:disabled) {
         opacity: 1;
     }
 }
 
 @mixin bp-Control--outline {
     outline: 0;
 
-    &:focus {
+    &:focus:not(:disabled) {
         box-shadow: $bp-controls-outline; // Show effect for all events in legacy browsers (IE, Safari)
     }
 
-    &:focus-visible {
+    &:focus-visible:not(:disabled) {
         box-shadow: $bp-controls-outline; // Show effect for keyboard events in modern browsers
     }