fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: css variables for colors and shadows

Browse Source
This commit is contained in:
AlexSserb
2025-08-14 18:18:24 +04:00
parent 28004dc2a0
commit 43355b6ce3
12 changed files with 79 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/layout/PageBlock/PageBlock.module.css
View File

@ -7,14 +7,13 @@
}
@media (min-width: 48em) {
padding: rem(35);
border-radius: rem(20);
padding: var(--mantine-spacing-md);
@mixin dark {
box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-thick-shadow);
}
@mixin light {
box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-thick-shadow);
}
}
}
@ -22,17 +21,16 @@
.mobile-padding-height {
height: 100% !important;
@media (min-width: 48em) {
padding: rem(40);
height: 89vh;
}
}
.container-full-height {
min-height: calc(100vh - (rem(20) * 2));
min-height: calc(100vh - (var(--mantine-spacing-md) * 2));
}
.container-full-height-fixed {
height: calc(100vh - (rem(20) * 2));
height: calc(100vh - (var(--mantine-spacing-md) * 2));
}
.container-no-border-radius {
@ -45,7 +43,6 @@
height: 100vh;
width: 100vw;
border-radius: 0 !important;
padding: rem(40) rem(20) rem(20);
position: fixed;
top: 0;
left: 0;

6
src/components/layout/PageBlock/PageBlock.tsx
View File

@ -1,6 +1,7 @@
import { CSSProperties, FC, ReactNode } from "react";
import classNames from "classnames";
import styles from "./PageBlock.module.css";
import { Box } from "@mantine/core";
type Props = {
children: ReactNode;
@ -24,7 +25,8 @@ const PageBlock: FC<Props> = ({
transparent = false,
}) => {
return (
<div
<Box
bdrs={"lg"}
style={style}
className={classNames(
styles.container,
@ -36,7 +38,7 @@ const PageBlock: FC<Props> = ({
styles[className]
)}>
{children}
</div>
</Box>
);
};
export default PageBlock;

19
src/components/layout/SmallPageBlock/SmallPageBlock.module.css
View File

@ -1,36 +1,33 @@
.container {
border-radius: 20px;
margin: 18px;
@mixin dark {
background-color: #212121;
box-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
background-color: var(--mantine-color-dark-7-5);
box-shadow: var(--dark-shadow);
}
@mixin light {
background-color: #fcfdff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
background-color: var(--color-light-whitesmoke);
box-shadow: var(--light-shadow);
}
}
.container-active {
@mixin dark {
background-color: var(--mantine-color-dark-8);
box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-thick-shadow);
}
@mixin light {
background-color: white;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-thick-shadow);
}
}
.container:hover {
@mixin dark {
background-color: var(--mantine-color-dark-8);
box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-thick-shadow);
}
@mixin light {
background-color: white;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-thick-shadow);
}
}

6
src/components/layout/SmallPageBlock/SmallPageBlock.tsx
View File

@ -1,6 +1,7 @@
import { CSSProperties, FC, ReactNode } from "react";
import classNames from "classnames";
import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
import { Box } from "@mantine/core";
type Props = {
children: ReactNode;
@ -10,14 +11,15 @@ type Props = {
const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
return (
<div
<Box
bdrs={"lg"}
className={classNames(
styles.container,
active && styles["container-active"]
)}
style={style}>
{children}
</div>
</Box>
);
};
export default SmallPageBlock;