* Fixed action icon styles * small fixes * fix brand color * more small fixes * fix disabled color for dark * feat: customize highlight and warning badge * chore: Remove hardcoded variables * feat: add text wrap pretty to pop over * fix: pagination position * chore: small adjustmentspull/2521/head v1.4.4-beta.1
parent
240948e638
commit
0a0762b1cf
@ -1,14 +1,25 @@
|
||||
@layer mantine {
|
||||
.root {
|
||||
background-color: transparent;
|
||||
|
||||
&[data-variant="light"] {
|
||||
color: var(--mantine-color-dark-0);
|
||||
}
|
||||
|
||||
&[data-variant="dark"] {
|
||||
--ai-bg: transparent;
|
||||
--ai-hover: darken(var(--mantine-color-grape-light), 0.2);
|
||||
}
|
||||
|
||||
@include light {
|
||||
&[data-variant="light"] {
|
||||
background-color: var(--mantine-color-gray-1);
|
||||
color: var(--mantine-color-dark-2);
|
||||
}
|
||||
|
||||
&[data-variant="dark"] {
|
||||
--ai-color: var(--mantine-color-dark-filled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,7 @@
|
||||
.main {
|
||||
@include dark {
|
||||
background-color: rgb(26, 27, 30);
|
||||
@layer mantine {
|
||||
.main {
|
||||
@include dark {
|
||||
background-color: var(--mantine-color-dark-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,40 @@
|
||||
.root {
|
||||
background-color: var(--mantine-color-grape-light);
|
||||
@layer mantine {
|
||||
.root {
|
||||
background-color: transparentize($color-brand-6, 0.8);
|
||||
|
||||
@include light {
|
||||
color: var(--mantine-color-dark-filled);
|
||||
background-color: var(--mantine-color-grape-light);
|
||||
&[data-variant="warning"] {
|
||||
color: lighten($color-warning-2, 1);
|
||||
background-color: transparentize($color-warning-6, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="highlight"] {
|
||||
color: lighten($color-highlight-2, 1);
|
||||
background-color: transparentize($color-highlight-5, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="disabled"] {
|
||||
color: lighten($color-disabled-0, 1);
|
||||
background-color: transparentize($color-disabled-7, 0.8);
|
||||
}
|
||||
|
||||
@include light {
|
||||
color: $color-brand-6;
|
||||
background-color: transparentize($color-brand-3, 0.8);
|
||||
|
||||
&[data-variant="warning"] {
|
||||
color: darken($color-warning-7, 1);
|
||||
background-color: transparentize($color-warning-6, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="disabled"] {
|
||||
color: darken($color-disabled-6, 1);
|
||||
background-color: transparentize($color-disabled-4, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="highlight"] {
|
||||
color: darken($color-highlight-6, 1);
|
||||
background-color: transparentize($color-highlight-5, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,3 @@
|
||||
.control {
|
||||
--pagination-active-bg: var(--mantine-color-brand-filled);
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
.group {
|
||||
@include light {
|
||||
color: var(--mantine-color-gray-3);
|
||||
background-color: var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
@include dark {
|
||||
color: var(--mantine-color-dark-5);
|
||||
background-color: var(--mantine-color-dark-5);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in new issue