EPMRPP-87633 || Update button border on focus (#3664)

reportportal · Nov 20, 2023 · e4dfe64 · e4dfe64
1 parent 71b1808
commit e4dfe64
Showing 1 changed file with 20 additions and 5 deletions.
diff --git a/app/src/componentLibrary/button/button.scss b/app/src/componentLibrary/button/button.scss
@@ -14,6 +14,20 @@
  * limitations under the License.
  */
 
+@mixin draw-button-border($color) {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    border: 2px solid $color;
+    border-radius: 3px;
+  }
+}
+
 .button {
   display: inline-flex;
   justify-content: center;
@@ -29,6 +43,7 @@
   line-height: 20px;
   cursor: pointer;
   box-sizing: border-box;
+  position: relative;
 }
 
 .topaz {
@@ -44,7 +59,7 @@
     background-color: $COLOR--topaz-pressed;
   }
   &:focus:not(.disabled, :active) {
-    border: 2px solid $COLOR--topaz-focused;
+    @include draw-button-border($COLOR--topaz-focused);
   }
 }
 
@@ -61,7 +76,7 @@
     color: $COLOR--topaz-pressed;
   }
   &:focus:not(.disabled, :active) {
-    border: 2px solid $COLOR--topaz-focused;
+    @include draw-button-border($COLOR--topaz-focused);
     color: $COLOR--topaz-focused;
   }
 }
@@ -78,7 +93,7 @@
     background-color: $COLOR--red-pressed;
   }
   &:focus:not(.disabled, :active) {
-    border: 2px solid $COLOR--red-focused;
+    @include draw-button-border($COLOR--red-focused);
   }
 }
 
@@ -126,7 +141,7 @@
     background-color: $COLOR--topaz-pressed;
   }
   &:focus:not(.disabled, :active) {
-    border: 2px solid $COLOR--darkmode-topaz-focused;
+    @include draw-button-border($COLOR--darkmode-topaz-focused);
   }
 }
 
@@ -141,7 +156,7 @@
     border: 1px solid $COLOR--topaz-pressed;
   }
   &:focus:not(.disabled, :active) {
-    border: 2px solid $COLOR--darkmode-topaz-focused;
+    @include draw-button-border($COLOR--darkmode-topaz-focused);
   }
 }