cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-12-22 16:37:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: focus ring class

Browse Source
This commit is contained in:
Zachery Ng 2024-02-19 20:05:29 +08:00
parent 082353e9bc
commit d498ba7e9a
3 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/index.css
View File

@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.focus-ring {
@apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
}
}

20
packages/frontend/src/pages/components/index.tsx
View File

@ -18,10 +18,22 @@ const Page = () => {
<h1 className="text-2xl font-bold">Component A</h1>
<div className="flex flex-row gap-10 items-center justify-center">
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div
tabIndex={0}
className="h-20 w-40 bg-red-400 rounded-md focus-ring"
/>
<div
tabIndex={0}
className="h-20 w-40 bg-red-400 rounded-md focus-ring"
/>
<div
tabIndex={0}
className="h-20 w-40 bg-red-400 rounded-md focus-ring"
/>
<div
tabIndex={0}
className="h-20 w-40 bg-red-400 rounded-md focus-ring"
/>
</div>
<div className="flex flex-row gap-10 items-center justify-center">

9
packages/frontend/tailwind.config.js
View File

@ -8,7 +8,14 @@ export default withMT({
'../../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
extend: {
colors: {
snowball: {
200: '#DDEEFD',
500: '#47A4FA',
},
},
},
},
plugins: [],
});