vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 12:30:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to Mantine v8 and Design Changes (#961)

Browse Source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff
2025-06-24 00:04:36 -07:00
committed by GitHub
parent bea55d48a8
commit c1330d92b2
473 changed files with 12469 additions and 11607 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/action-icon/action-icon.module.css
+92
View File
@@ -0,0 +1,92 @@
.root {
--ai-size-xs: calc(1.875rem * var(--mantine-scale));
--ai-size-sm: calc(2.25rem * var(--mantine-scale));
--ai-size-md: calc(2.625rem * var(--mantine-scale));
--ai-size-lg: calc(3.125rem * var(--mantine-scale));
--ai-size-xl: calc(3.75rem * var(--mantine-scale));
font-weight: 500;
transition:
background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out;
&[data-disabled='true'] {
opacity: 0.6;
}
&[data-variant='default'] {
color: var(--theme-colors-foreground);
background: var(--theme-colors-surface);
border: 1px solid transparent;
&:hover {
background: lighten(var(--theme-colors-surface), 5%);
}
&:focus-visible {
background: lighten(var(--theme-colors-surface), 10%);
}
}
&[data-variant='outline'] {
--button-border: var(--theme-colors-border);
color: var(--theme-colors-foreground);
border: 1px solid var(--theme-colors-border);
&:hover {
border: 1px solid lighten(var(--theme-colors-border), 10%);
}
&:focus-visible {
border: 1px solid lighten(var(--theme-colors-border), 10%);
}
}
&[data-variant='filled'] {
color: var(--theme-colors-primary-contrast);
background: var(--theme-colors-primary-filled);
border: 1px solid transparent;
transition: background-color 0.2s ease-in-out;
&:hover,
&:focus-visible {
background: darken(var(--theme-colors-primary-filled), 10%);
}
}
&[data-variant='subtle'] {
color: var(--theme-colors-foreground);
background: transparent;
&:hover,
&:focus-visible {
background: lighten(var(--theme-colors-surface), 10%);
}
}
&[data-variant='secondary'] {
border: 1px solid transparent;
&:hover {
background: darken(var(--theme-colors-surface), 5%);
}
&:focus-visible {
background: darken(var(--theme-colors-surface), 10%);
}
}
&[data-variant='transparent'] {
color: var(--theme-colors-foreground);
border: 1px solid transparent;
&:hover {
background: transparent;
}
&:focus-visible {
border: 1px solid lighten(var(--theme-colors-border), 10%);
}
}
}