antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions
Download patch file Download diff file Expand all files Collapse all files

156
src/shared/components/button/button.module.css Normal file
View file

@ -0,0 +1,156 @@
.root {
font-weight: 500;
border: 1px solid transparent;
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-color: var(--theme-colors-surface);
&: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='state-error'] {
background: var(--theme-colors-state-error);
&:hover,
&:focus-visible {
background: darken(var(--theme-colors-state-error), 10%);
}
}
&[data-variant='state-info'] {
background: var(--theme-colors-state-info);
&:hover,
&:focus-visible {
background: darken(var(--theme-colors-state-info), 10%);
}
}
&[data-variant='state-success'] {
background: var(--theme-colors-state-success);
&:hover,
&:focus-visible {
background: darken(var(--theme-colors-state-success), 10%);
}
}
&[data-variant='state-warning'] {
background: var(--theme-colors-state-warning);
&:hover,
&:focus-visible {
background: darken(var(--theme-colors-state-warning), 10%);
}
}
&[data-variant='subtle'] {
color: var(--theme-colors-foreground);
background: transparent;
&:hover,
&:active,
&:focus-visible {
background-color: lighten(var(--button-bg), 10%);
}
}
&[data-variant='secondary'] {
border: 1px solid transparent;
&:hover {
background-color: darken(var(--button-bg), 5%);
}
&:focus-visible {
background-color: darken(var(--button-bg), 10%);
}
}
&[data-variant='transparent'] {
color: var(--theme-colors-foreground);
border: 1px solid transparent;
transition: color 0.2s ease-in-out;
&:hover {
background-color: transparent;
@mixin dark {
color: lighten(var(--theme-colors-foreground), 10%);
}
@mixin light {
color: darken(var(--theme-colors-foreground), 10%);
}
}
&:focus-visible {
border: 1px solid lighten(var(--theme-colors-border), 10%);
}
}
}
.loader {
display: none;
}
.section {
display: flex;
margin-inline-end: var(--theme-spacing-sm);
}
.button-inner.loading {
color: transparent;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.uppercase {
text-transform: uppercase;
}