chore: Reduce duplicated styles on button component

cloudscape-design · Feb 5, 2025 · c7580a6 · c7580a6
1 parent f8a00dd
commit c7580a6
Showing 1 changed file with 22 additions and 27 deletions.
diff --git a/src/button/styles.scss b/src/button/styles.scss
@@ -34,32 +34,6 @@
     border-color: map.get($variant, 'active-border-color');
   }
 
-  &:focus {
-    outline: none;
-    text-decoration: none;
-  }
-
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
-  }
-  &.variant-icon,
-  &.variant-modal-dismiss,
-  &.variant-flashbar-icon {
-    @include focus-visible.when-visible {
-      @include styles.focus-highlight(
-        (
-          'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
-          'horizontal': awsui.$space-button-focus-outline-gutter,
-        )
-      );
-    }
-  }
-  &.variant-inline-icon {
-    @include focus-visible.when-visible {
-      @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
-    }
-  }
-
   &.disabled {
     background: map.get($variant, 'disabled-background');
     border-color: map.get($variant, 'disabled-border-color');
@@ -96,6 +70,15 @@
     }
   }
 
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  }
+
   &.button-no-text {
     padding-inline-start: awsui.$space-button-icon-only-horizontal;
     padding-inline-end: awsui.$space-button-icon-only-horizontal;
@@ -111,8 +94,16 @@
   }
 
   &.variant-icon,
-  &.variant-inline-icon,
   &.variant-flashbar-icon {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(
+        (
+          'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
+          'horizontal': awsui.$space-button-focus-outline-gutter,
+        )
+      );
+    }
+
     // Icon has vertical padding, but no horizontal, we need to conpensate this
     // in order to have equal height and width
     padding-inline-start: awsui.$space-xxs;
@@ -126,6 +117,10 @@
   }
 
   &.variant-inline-icon {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
+    }
+
     padding-block-start: 0;
     padding-block-end: 0;
     border-block: 0;