#RI-3025-add focus btn style (#766)

AmirAllayarovSofteq · web-flow · commit 743763add198 · 2022-06-10T09:43:00.000+03:00
diff --git a/redisinsight/ui/src/styles/components/_buttons.scss b/redisinsight/ui/src/styles/components/_buttons.scss
@@ -12,14 +12,16 @@
     color: var(--buttonSecondaryTextColor) !important;
     border-color: var(--euiColorSecondary);
     &:not([class*='isDisabled']) {
-      &:hover,
-      &:focus,
-      &:focus-within {
+      &:hover {
         background-color: var(--buttonSecondaryHoverColor);
         border-color: var(--buttonSecondaryHoverColor);
         color: var(--euiColorPrimaryText) !important;
       }
     }
+    &:focus,
+    &:focus-within {
+      border: 2px solid var(--euiColorPrimary);
+    }
     .euiTextColor--default {
       color: currentColor;
     }
@@ -34,6 +36,10 @@
     &:hover {
       color: var(--euiColorPrimaryText) !important;
     }
+    &:focus,
+    &:focus-within {
+      border: 2px solid var(--euiColorPrimary);
+    }
   }
 }
 .euiButton.euiButton--fill {
@@ -42,12 +48,14 @@
     background-color: var(--euiColorSecondary);
 
     &:not([class*='isDisabled']) {
-      &:hover,
-      &:focus,
-      &:focus-within {
+      &:hover {
         background-color: var(--buttonSecondaryHoverColor);
         border-color: var(--buttonSecondaryHoverColor);
       }
+      &:focus,
+      &:focus-within {
+        border: 2px solid var(--euiColorPrimary);
+      }   
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -12,14 +12,16 @@`
`12`	`12`	`color: var(--buttonSecondaryTextColor) !important;`
`13`	`13`	`border-color: var(--euiColorSecondary);`
`14`	`14`	`&:not([class*='isDisabled']) {`
`15`		`- &:hover,`
`16`		`- &:focus,`
`17`		`- &:focus-within {`
	`15`	`+ &:hover {`
`18`	`16`	`background-color: var(--buttonSecondaryHoverColor);`
`19`	`17`	`border-color: var(--buttonSecondaryHoverColor);`
`20`	`18`	`color: var(--euiColorPrimaryText) !important;`
`21`	`19`	`}`
`22`	`20`	`}`
	`21`	`+ &:focus,`
	`22`	`+ &:focus-within {`
	`23`	`+ border: 2px solid var(--euiColorPrimary);`
	`24`	`+ }`
`23`	`25`	`.euiTextColor--default {`
`24`	`26`	`color: currentColor;`
`25`	`27`	`}`
`@@ -34,6 +36,10 @@`
`34`	`36`	`&:hover {`
`35`	`37`	`color: var(--euiColorPrimaryText) !important;`
`36`	`38`	`}`
	`39`	`+ &:focus,`
	`40`	`+ &:focus-within {`
	`41`	`+ border: 2px solid var(--euiColorPrimary);`
	`42`	`+ }`
`37`	`43`	`}`
`38`	`44`	`}`
`39`	`45`	`.euiButton.euiButton--fill {`
`@@ -42,12 +48,14 @@`
`42`	`48`	`background-color: var(--euiColorSecondary);`
`43`	`49`
`44`	`50`	`&:not([class*='isDisabled']) {`
`45`		`- &:hover,`
`46`		`- &:focus,`
`47`		`- &:focus-within {`
	`51`	`+ &:hover {`
`48`	`52`	`background-color: var(--buttonSecondaryHoverColor);`
`49`	`53`	`border-color: var(--buttonSecondaryHoverColor);`
`50`	`54`	`}`
	`55`	`+ &:focus,`
	`56`	`+ &:focus-within {`
	`57`	`+ border: 2px solid var(--euiColorPrimary);`
	`58`	`+ }`
`51`	`59`	`}`
`52`	`60`	`}`
`53`	`61`	`}`