fix inset box-shadow in Safari

ugogo · ugogo · commit eb1c7c26f714 · 2020-06-19T12:15:53.000+02:00
diff --git a/src/index.css b/src/index.css
@@ -18,15 +18,19 @@
   font-weight: 800;
   line-height: var(--itemHeight);
   text-align: center;
+  border: 0;
 }
 
 .ReactVerificationCode__item {
+  --boxShadowColor: #ccc;
+  --boxShadowSize: 1px;
+  box-shadow: inset 0 0 0 var(--boxShadowSize) var(--boxShadowColor);
   transition: box-shadow 0.2s ease-out;
-  box-shadow: 0 0 0 1px inset #ccc;
 }
 
 .ReactVerificationCode__item.is-active {
-  box-shadow: 0 0 0 2px inset #888;
+  --boxShadowColor: #888;
+  --boxShadowSize: 2px;
 }
 
 .ReactVerificationCode__input {

Original file line number	Diff line number	Diff line change
`@@ -18,15 +18,19 @@`
`18`	`18`	`font-weight: 800;`
`19`	`19`	`line-height: var(--itemHeight);`
`20`	`20`	`text-align: center;`
	`21`	`+ border: 0;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`.ReactVerificationCode__item {`
	`25`	`+ --boxShadowColor: #ccc;`
	`26`	`+ --boxShadowSize: 1px;`
	`27`	`+ box-shadow: inset 0 0 0 var(--boxShadowSize) var(--boxShadowColor);`
`24`	`28`	`transition: box-shadow 0.2s ease-out;`
`25`		`- box-shadow: 0 0 0 1px inset #ccc;`
`26`	`29`	`}`
`27`	`30`
`28`	`31`	`.ReactVerificationCode__item.is-active {`
`29`		`- box-shadow: 0 0 0 2px inset #888;`
	`32`	`+ --boxShadowColor: #888;`
	`33`	`+ --boxShadowSize: 2px;`
`30`	`34`	`}`
`31`	`35`
`32`	`36`	`.ReactVerificationCode__input {`