Add ring to buttons in foucs

vmardorf · Dec 30, 2021 · b54b270 · b54b270
1 parent 2a89b6f
commit b54b270
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/components/btn.js b/src/components/btn.js
@@ -26,10 +26,22 @@ module.exports = ({theme}) => {
  borderRadius: '0.25rem',
  backgroundColor: primaryColor,
  color: '#fff',
+ "--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)",
+ "--tw-ring-offset-width": "0px",
+ "--tw-ring-offset-color": "#fff",
 
  '&:hover': {
  backgroundColor: hoverColor
  },
+
+ '&:focus': {
+ "--tw-ring-offset-shadow": "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+ "--tw-ring-shadow": "var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+ "--tw-ring-color": tc(primaryColor).setAlpha(0.1).toString(),
+ borderColor: tc(primaryColor).setAlpha(0.6).toString(),
+ boxShadow: "var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)",
+ outline: 'none',
+ }
  },
 
  '.btn-outline': {