Improved Focus Outline Mixin. (#468)

alexnatalia · web-flow · commit 2a8062222a43 · 2022-09-26T14:35:55.000+03:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/styles/neumorphism/mixins.scss b/src/styles/neumorphism/mixins.scss
@@ -1,11 +1,12 @@
 @mixin focus-outline($focusWithin: false) {
+  $outline: 1px solid var(--s-color-outline);
   @if $focusWithin == true {
     &:focus-within {
-      outline: 1px solid var(--s-color-outline);
+      outline: $outline;
     }
   } @else {
-    &:focus {
-      outline: 1px solid var(--s-color-outline);
+    &:focus:not(:active) {
+      outline: $outline;
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@soramitsu/soramitsu-js-ui",`
`3`		`- "version": "1.0.38",`
	`3`	`+ "version": "1.0.39",`
`4`	`4`	`"private": false,`
`5`	`5`	`"publishConfig": {`
`6`	`6`	`"registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,12 @@`
`1`	`1`	`@mixin focus-outline($focusWithin: false) {`
	`2`	`+ $outline: 1px solid var(--s-color-outline);`
`2`	`3`	`@if $focusWithin == true {`
`3`	`4`	`&:focus-within {`
`4`		`- outline: 1px solid var(--s-color-outline);`
	`5`	`+ outline: $outline;`
`5`	`6`	`}`
`6`	`7`	`} @else {`
`7`		`- &:focus {`
`8`		`- outline: 1px solid var(--s-color-outline);`
	`8`	`+ &:focus:not(:active) {`
	`9`	`+ outline: $outline;`
`9`	`10`	`}`
`10`	`11`	`}`
`11`	`12`	`}`