fix(plugins/plugin-client-common): Click to select error block, and l…

…eft border stays red part of #8088
kubernetes-sigs · Sep 30, 2021 · 098aa6c · 098aa6c
1 parent 7bc6ce2
commit 098aa6c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/plugins/plugin-client-common/web/scss/components/Terminal/BlockBorder.scss b/plugins/plugin-client-common/web/scss/components/Terminal/BlockBorder.scss
@@ -36,26 +36,24 @@
     background-color: $focus-color;
   }
 
-  &:focus,
-  &[data-is-focused] {
+  @include BlockFocusAttributes {
     @include BlockBorder {
       opacity: 1;
       background-color: $focus-color;
     }
   }
 }
-@include Block {
-  &:focus,
-  &[data-is-focused] {
-    @include BlockBorder {
-      opacity: 1;
-      background-color: var(--color-table-border3);
-    }
+@include FocusedBlock {
+  @include BlockBorder {
+    opacity: 1;
+    background-color: var(--color-table-border3);
   }
 }
 @include ErrorBlock {
-  @include BlockBorder {
-    opacity: 0.625;
-    background-color: var(--color-red);
+  @include BlockNotFocusedAttributes {
+    @include BlockBorder {
+      opacity: 0.625;
+      background-color: var(--color-red);
+    }
   }
 }
diff --git a/plugins/plugin-client-common/web/scss/components/Terminal/_mixins.scss b/plugins/plugin-client-common/web/scss/components/Terminal/_mixins.scss
@@ -110,6 +110,25 @@ $action-hover-delay: 210ms;
   }
 }
 
+@mixin BlockFocusAttributes {
+  &:focus,
+  &[data-is-focused] {
+    @content;
+  }
+}
+@mixin BlockNotFocusedAttributes {
+  &:not(:focus):not([data-is-focused]) {
+    @content;
+  }
+}
+@mixin FocusedBlock {
+  @include Block {
+    @include BlockFocusAttributes {
+      @content;
+    }
+  }
+}
+
 @mixin SectionBreak {
   @include Block {
     &[data-is-section-break] {