fix styling

This commit is contained in:
Philipinho
2023-09-26 12:36:27 +01:00
parent 4dc3d58645
commit 3a53a7ea30
4 changed files with 10 additions and 13 deletions

View File

@ -11,9 +11,9 @@
},
"dependencies": {
"@hocuspocus/provider": "^2.5.0",
"@mantine/core": "^7.0.0",
"@mantine/form": "^7.0.0",
"@mantine/hooks": "^7.0.0",
"@mantine/core": "^7.0.2",
"@mantine/form": "^7.0.2",
"@mantine/hooks": "^7.0.2",
"@tabler/icons-react": "^2.32.0",
"@tanstack/react-query": "^4.33.0",
"@tanstack/react-table": "^8.9.3",
@ -42,12 +42,10 @@
"@types/node": "20.4.8",
"@types/react": "18.2.18",
"@types/react-dom": "18.2.7",
"autoprefixer": "^10.4.16",
"eslint": "8.46.0",
"eslint-config-next": "13.4.13",
"optics-ts": "^2.4.1",
"postcss": "^8.4.30",
"postcss-preset-env": "^9.1.4",
"postcss-preset-mantine": "^1.7.0",
"postcss-simple-vars": "^7.0.1"
}

View File

@ -1,7 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {},
"postcss-preset-env": {},
"postcss-preset-mantine": {},
"postcss-simple-vars": {
variables: {

View File

@ -7,6 +7,7 @@
display: flex;
flex-direction: column;
border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
user-select: none;
}
.section {
@ -42,9 +43,8 @@
font-weight: 500;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
&
:hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
&:hover {
background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
}
}
@ -83,7 +83,7 @@
font-weight: 500;
&:hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
}
}

View File

@ -41,10 +41,11 @@
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-sm);
font-weight: 500;
user-select: none;
@mixin hover {
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-gray-1),
var(--mantine-color-dark-6)
);
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
@ -54,7 +55,7 @@
}
}
& [data-active] {
&[data-active] {
&,
& :hover {
background-color: var(--mantine-color-blue-light);