QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-19 13:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-18: fixed to dashboards, removed and moved around all the things

Browse Source
This commit is contained in:
Tim Chamberlain
2023-01-04 11:40:21 -06:00
parent e49f178738
commit 267580b44b
460 changed files with 9717 additions and 11057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/qqq/assets/theme-dark/base/borders.ts Normal file
View File

@ -0,0 +1,76 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new border width, border color or border radius using this file.
* You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { white } = colors;
// types
interface Types {
borderColor: string;
borderWidth: {
0: number;
1: string;
2: string;
3: string;
4: string;
5: string;
};
borderRadius: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
section: string;
};
}
const borders: Types = {
borderColor: rgba(white.main, 0.4),
borderWidth: {
0: 0,
1: pxToRem(1),
2: pxToRem(2),
3: pxToRem(3),
4: pxToRem(4),
5: pxToRem(5),
},
borderRadius: {
xs: pxToRem(1.6),
sm: pxToRem(2),
md: pxToRem(6),
lg: pxToRem(8),
xl: pxToRem(12),
xxl: pxToRem(16),
section: pxToRem(160),
},
};
export default borders;

148
src/qqq/assets/theme-dark/base/boxShadows.ts Normal file
View File

@ -0,0 +1,148 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new box-shadow using this file.
* You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import boxShadow from "qqq/assets/theme-dark/functions/boxShadow";
const { black, dark, tabs, coloredShadows } = colors;
// types
interface Types {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
inset: string;
colored:
| {
primary: string;
secondary: string;
info: string;
success: string;
warning: string;
error: string;
light: string;
dark: string;
}
| any;
navbarBoxShadow: string;
sliderBoxShadow: {
thumb: string;
};
tabsBoxShadow: {
indicator: string;
};
}
const boxShadows: Types = {
xs: boxShadow([0, 2], [9, -5], black.main, 0.15),
sm: boxShadow([0, 5], [10, 0], black.main, 0.12),
md: `${boxShadow([0, 2], [2, 0], black.main, 0.14)}, ${boxShadow(
[0, 3],
[1, -2],
black.main,
0.2
)}, ${boxShadow([0, 1], [5, 0], black.main, 0.12)}`,
lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow(
[0, 4],
[6, -2],
black.main,
0.05
)}`,
xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow(
[0, 10],
[10, -5],
black.main,
0.04
)}`,
xxl: boxShadow([0, 20], [27, 0], black.main, 0.05),
inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"),
colored: {
primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.primary,
0.4
)}`,
secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.secondary,
0.4
)}`,
info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.info,
0.4
)}`,
success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.success,
0.4
)}`,
warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.warning,
0.4
)}`,
error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.error,
0.4
)}`,
light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.light,
0.4
)}`,
dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.dark,
0.4
)}`,
},
navbarBoxShadow: `${boxShadow([0, 0], [1, 1], dark.main, 0.9, "inset")}, ${boxShadow(
[0, 20],
[27, 0],
black.main,
0.05
)}`,
sliderBoxShadow: {
thumb: boxShadow([0, 1], [13, 0], black.main, 0.2),
},
tabsBoxShadow: {
indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1),
},
};
export default boxShadows;

33
src/qqq/assets/theme-dark/base/breakpoints.ts Normal file
View File

@ -0,0 +1,33 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new breakpoints using this file.
* You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
const breakpoints = {
values: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
},
};
export default breakpoints;

391
src/qqq/assets/theme-dark/base/colors.ts Normal file
View File

@ -0,0 +1,391 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new color using this file.
* You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// types
interface ColorsTypes {
main: string;
focus: string;
}
interface GradientsTypes {
main: string;
state: string;
}
interface SocialMediaColorsTypes {
main: string;
dark: string;
}
interface BadgeColorsTypes {
background: string;
text: string;
}
interface Types {
background:
| {
default: string;
sidenav?: string;
card?: string;
}
| any;
white:
| {
main: string;
focus: string;
}
| any;
text:
| {
main: string;
focus: string;
primary?: string;
secondary?: string;
disabled?: string;
}
| any;
transparent:
| {
main: string;
}
| any;
black:
| {
light: string;
main: string;
focus: string;
}
| any;
primary: ColorsTypes | any;
secondary: ColorsTypes | any;
info: ColorsTypes | any;
success: ColorsTypes | any;
warning: ColorsTypes | any;
error: ColorsTypes | any;
light: ColorsTypes | any;
dark: ColorsTypes | any;
grey:
| {
[key: string | number]: string;
}
| any;
gradients:
| {
primary: GradientsTypes;
secondary: GradientsTypes;
info: GradientsTypes;
success: GradientsTypes;
warning: GradientsTypes;
error: GradientsTypes;
light: GradientsTypes;
dark: GradientsTypes;
}
| any;
socialMediaColors:
| {
facebook: SocialMediaColorsTypes;
twitter: SocialMediaColorsTypes;
instagram: SocialMediaColorsTypes;
linkedin: SocialMediaColorsTypes;
pinterest: SocialMediaColorsTypes;
youtube: SocialMediaColorsTypes;
vimeo: SocialMediaColorsTypes;
slack: SocialMediaColorsTypes;
dribbble: SocialMediaColorsTypes;
github: SocialMediaColorsTypes;
reddit: SocialMediaColorsTypes;
tumblr: SocialMediaColorsTypes;
}
| any;
badgeColors:
| {
primary: BadgeColorsTypes;
secondary: BadgeColorsTypes;
info: BadgeColorsTypes;
success: BadgeColorsTypes;
warning: BadgeColorsTypes;
error: BadgeColorsTypes;
light: BadgeColorsTypes;
dark: BadgeColorsTypes;
}
| any;
coloredShadows:
| {
[key: string]: string;
}
| any;
inputBorderColor: string;
tabs:
| {
indicator:
| {
boxShadow: string;
}
| any;
}
| any;
}
const colors: Types = {
background: {
default: "#1a2035",
sidenav: "#1f283e",
card: "#202940",
},
text: {
main: "#ffffffcc",
focus: "#ffffffcc",
},
transparent: {
main: "transparent",
},
white: {
main: "#ffffff",
focus: "#ffffff",
},
black: {
light: "#000000",
main: "#000000",
focus: "#000000",
},
primary: {
main: "#e91e63",
focus: "#e91e63",
},
secondary: {
main: "#7b809a",
focus: "#8f93a9",
},
info: {
main: "#04aaef",
focus: "#1662C4",
},
success: {
main: "#4CAF50",
focus: "#67bb6a",
},
warning: {
main: "#fb8c00",
focus: "#fc9d26",
},
error: {
main: "#F44335",
focus: "#f65f53",
},
light: {
main: "#f0f2f566",
focus: "#f0f2f566",
},
dark: {
main: "#344767",
focus: "#2c3c58",
},
grey: {
100: "#f8f9fa",
200: "#f0f2f5",
300: "#dee2e6",
400: "#ced4da",
500: "#adb5bd",
600: "#6c757d",
700: "#495057",
800: "#343a40",
900: "#212529",
},
gradients: {
primary: {
main: "#EC407A",
state: "#D81B60",
},
secondary: {
main: "#747b8a",
state: "#495361",
},
info: {
main: "#49a3f1",
state: "#04aaef",
},
success: {
main: "#66BB6A",
state: "#43A047",
},
warning: {
main: "#FFA726",
state: "#FB8C00",
},
error: {
main: "#EF5350",
state: "#E53935",
},
light: {
main: "#EBEFF4",
state: "#CED4DA",
},
dark: {
main: "#323a54",
state: "#1a2035",
},
},
socialMediaColors: {
facebook: {
main: "#3b5998",
dark: "#344e86",
},
twitter: {
main: "#55acee",
dark: "#3ea1ec",
},
instagram: {
main: "#125688",
dark: "#0e456d",
},
linkedin: {
main: "#0077b5",
dark: "#00669c",
},
pinterest: {
main: "#cc2127",
dark: "#b21d22",
},
youtube: {
main: "#e52d27",
dark: "#d41f1a",
},
vimeo: {
main: "#1ab7ea",
dark: "#13a3d2",
},
slack: {
main: "#3aaf85",
dark: "#329874",
},
dribbble: {
main: "#ea4c89",
dark: "#e73177",
},
github: {
main: "#24292e",
dark: "#171a1d",
},
reddit: {
main: "#ff4500",
dark: "#e03d00",
},
tumblr: {
main: "#35465c",
dark: "#2a3749",
},
},
badgeColors: {
primary: {
background: "#f8b3ca",
text: "#cc084b",
},
secondary: {
background: "#d7d9e1",
text: "#6c757d",
},
info: {
background: "#aecef7",
text: "#095bc6",
},
success: {
background: "#bce2be",
text: "#339537",
},
warning: {
background: "#ffd59f",
text: "#c87000",
},
error: {
background: "#fcd3d0",
text: "#f61200",
},
light: {
background: "#ffffff",
text: "#c7d3de",
},
dark: {
background: "#8097bf",
text: "#1e2e4a",
},
},
coloredShadows: {
primary: "#e91e62",
secondary: "#110e0e",
info: "#00bbd4",
success: "#4caf4f",
warning: "#ff9900",
error: "#f44336",
light: "#adb5bd",
dark: "#404040",
},
inputBorderColor: "#d2d6da",
tabs: {
indicator: { boxShadow: "#ddd" },
},
};
export default colors;

41
src/qqq/assets/theme-dark/base/globals.ts Normal file
View File

@ -0,0 +1,41 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
const { info, dark } = colors;
const globals = {
html: {
scrollBehavior: "smooth",
},
"*, *::before, *::after": {
margin: 0,
padding: 0,
},
"a, a:link, a:visited": {
textDecoration: "none !important",
},
"a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": {
color: `${dark.main} !important`,
transition: "color 150ms ease-in !important",
},
"a.link:hover, .link:hover, a.link:focus, .link:focus": {
color: `${info.main} !important`,
},
};
export default globals;

320
src/qqq/assets/theme-dark/base/typography.ts Normal file
View File

@ -0,0 +1,320 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new typography style using this file.
* You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { white } = colors;
// types
interface DisplayTypes {
fontFamily: string;
color: string;
fontWeight: number;
lineHeight: number;
fontSize: string;
}
interface Types {
fontFamily: string;
fontWeightLighter: number;
fontWeightLight: number;
fontWeightRegular: number;
fontWeightMedium: number;
fontWeightBold: number;
h1: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h2: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h3: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h4: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h5: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h6: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
subtitle1: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
subtitle2: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
body1: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
body2: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
button: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
textTransform: any;
};
caption: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
overline: {
fontFamily: string;
};
d1: DisplayTypes;
d2: DisplayTypes;
d3: DisplayTypes;
d4: DisplayTypes;
d5: DisplayTypes;
d6: DisplayTypes;
size: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
};
lineHeight: {
sm: number;
md: number;
lg: number;
};
}
const baseProperties = {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontWeightLighter: 100,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 600,
fontWeightBold: 700,
fontSizeXXS: pxToRem(10.4),
fontSizeXS: pxToRem(12),
fontSizeSM: pxToRem(14),
fontSizeMD: pxToRem(16),
fontSizeLG: pxToRem(18),
fontSizeXL: pxToRem(20),
fontSize2XL: pxToRem(24),
fontSize3XL: pxToRem(30),
};
const baseHeadingProperties = {
fontFamily: baseProperties.fontFamily,
color: white.main,
fontWeight: baseProperties.fontWeightBold,
};
const baseDisplayProperties = {
fontFamily: baseProperties.fontFamily,
color: white.main,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.2,
};
const typography: Types = {
fontFamily: baseProperties.fontFamily,
fontWeightLighter: baseProperties.fontWeightLighter,
fontWeightLight: baseProperties.fontWeightLight,
fontWeightRegular: baseProperties.fontWeightRegular,
fontWeightMedium: baseProperties.fontWeightMedium,
fontWeightBold: baseProperties.fontWeightBold,
h1: {
fontSize: pxToRem(48),
lineHeight: 1.25,
...baseHeadingProperties,
},
h2: {
fontSize: pxToRem(36),
lineHeight: 1.3,
...baseHeadingProperties,
},
h3: {
fontSize: pxToRem(30),
lineHeight: 1.375,
...baseHeadingProperties,
},
h4: {
fontSize: pxToRem(24),
lineHeight: 1.375,
...baseHeadingProperties,
},
h5: {
fontSize: pxToRem(20),
lineHeight: 1.375,
...baseHeadingProperties,
},
h6: {
fontSize: pxToRem(16),
lineHeight: 1.625,
...baseHeadingProperties,
},
subtitle1: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeXL,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.625,
},
subtitle2: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeMD,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.6,
},
body1: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeXL,
fontWeight: baseProperties.fontWeightRegular,
lineHeight: 1.625,
},
body2: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeMD,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.6,
},
button: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeSM,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.5,
textTransform: "uppercase",
},
caption: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeXS,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.25,
},
overline: {
fontFamily: baseProperties.fontFamily,
},
d1: {
fontSize: pxToRem(80),
...baseDisplayProperties,
},
d2: {
fontSize: pxToRem(72),
...baseDisplayProperties,
},
d3: {
fontSize: pxToRem(64),
...baseDisplayProperties,
},
d4: {
fontSize: pxToRem(56),
...baseDisplayProperties,
},
d5: {
fontSize: pxToRem(48),
...baseDisplayProperties,
},
d6: {
fontSize: pxToRem(40),
...baseDisplayProperties,
},
size: {
xxs: baseProperties.fontSizeXXS,
xs: baseProperties.fontSizeXS,
sm: baseProperties.fontSizeSM,
md: baseProperties.fontSizeMD,
lg: baseProperties.fontSizeLG,
xl: baseProperties.fontSizeXL,
"2xl": baseProperties.fontSize2XL,
"3xl": baseProperties.fontSize3XL,
},
lineHeight: {
sm: 1.25,
md: 1.5,
lg: 2,
},
};
export default typography;

31
src/qqq/assets/theme-dark/components/appBar.ts Normal file
View File

@ -0,0 +1,31 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const appBar: Types = {
defaultProps: {
color: "transparent",
},
styleOverrides: {
root: {
boxShadow: "none",
},
},
};
export default appBar;

40
src/qqq/assets/theme-dark/components/avatar.ts Normal file
View File

@ -0,0 +1,40 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
const { borderRadius } = borders;
// types
type Types = any;
const avatar: Types = {
styleOverrides: {
root: {
transition: "all 200ms ease-in-out",
},
rounded: {
borderRadius: borderRadius.lg,
},
img: {
height: "auto",
},
},
};
export default avatar;

39
src/qqq/assets/theme-dark/components/breadcrumbs.ts Normal file
View File

@ -0,0 +1,39 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
const { grey } = colors;
const { size } = typography;
// types
type Types = any;
const breadcrumbs: Types = {
styleOverrides: {
li: {
lineHeight: 0,
},
separator: {
fontSize: size.sm,
color: grey[600],
},
},
};
export default breadcrumbs;

91
src/qqq/assets/theme-dark/components/button/contained.ts Normal file
View File

@ -0,0 +1,91 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { white, text, info, secondary } = colors;
const { size } = typography;
const contained = {
base: {
backgroundColor: white.main,
minHeight: pxToRem(37),
color: text.main,
padding: `${pxToRem(9)} ${pxToRem(24)}`,
"&:hover": {
backgroundColor: white.main,
},
"&:active, &:active:focus, &:active:hover": {
opacity: 0.85,
},
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(16)} !important`,
},
},
small: {
minHeight: pxToRem(29),
padding: `${pxToRem(6)} ${pxToRem(18)}`,
fontSize: size.xs,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(12)} !important`,
},
},
large: {
minHeight: pxToRem(44),
padding: `${pxToRem(12)} ${pxToRem(64)}`,
fontSize: size.sm,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(22)} !important`,
},
},
primary: {
backgroundColor: info.main,
"&:hover": {
backgroundColor: info.main,
},
"&:focus:not(:hover)": {
backgroundColor: info.focus,
},
},
secondary: {
backgroundColor: secondary.main,
"&:hover": {
backgroundColor: secondary.main,
},
"&:focus:not(:hover)": {
backgroundColor: secondary.focus,
},
},
};
export default contained;

49
src/qqq/assets/theme-dark/components/button/index.ts Normal file
View File

@ -0,0 +1,49 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React Button Styles
import root from "qqq/assets/theme-dark/components/button/root";
import contained from "qqq/assets/theme-dark/components/button/contained";
import outlined from "qqq/assets/theme-dark/components/button/outlined";
import buttonText from "qqq/assets/theme-dark/components/button/text";
// types
type Types = any;
const button: Types = {
defaultProps: {
disableRipple: false,
},
styleOverrides: {
root: { ...root },
contained: { ...contained.base },
containedSizeSmall: { ...contained.small },
containedSizeLarge: { ...contained.large },
containedPrimary: { ...contained.primary },
containedSecondary: { ...contained.secondary },
outlined: { ...outlined.base },
outlinedSizeSmall: { ...outlined.small },
outlinedSizeLarge: { ...outlined.large },
outlinedPrimary: { ...outlined.primary },
outlinedSecondary: { ...outlined.secondary },
text: { ...buttonText.base },
textSizeSmall: { ...buttonText.small },
textSizeLarge: { ...buttonText.large },
textPrimary: { ...buttonText.primary },
textSecondary: { ...buttonText.secondary },
},
};
export default button;

82
src/qqq/assets/theme-dark/components/button/outlined.ts Normal file
View File

@ -0,0 +1,82 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { transparent, light, info, secondary } = colors;
const { size } = typography;
const outlined = {
base: {
minHeight: pxToRem(39),
color: light.main,
borderColor: light.main,
padding: `${pxToRem(9)} ${pxToRem(24)}`,
"&:hover": {
opacity: 0.75,
backgroundColor: transparent.main,
},
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(16)} !important`,
},
},
small: {
minHeight: pxToRem(31),
padding: `${pxToRem(6)} ${pxToRem(18)}`,
fontSize: size.xs,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(12)} !important`,
},
},
large: {
minHeight: pxToRem(46),
padding: `${pxToRem(12)} ${pxToRem(64)}`,
fontSize: size.sm,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(22)} !important`,
},
},
primary: {
backgroundColor: transparent.main,
borderColor: info.main,
"&:hover": {
backgroundColor: transparent.main,
},
},
secondary: {
backgroundColor: transparent.main,
borderColor: secondary.main,
"&:hover": {
backgroundColor: transparent.main,
},
},
};
export default outlined;

53
src/qqq/assets/theme-dark/components/button/root.ts Normal file
View File

@ -0,0 +1,53 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme-dark/base/typography";
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { fontWeightBold, size } = typography;
const { borderRadius } = borders;
const root = {
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: size.xs,
fontWeight: fontWeightBold,
borderRadius: borderRadius.lg,
padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`,
lineHeight: 1.4,
textAlign: "center",
textTransform: "uppercase",
userSelect: "none",
backgroundSize: "150% !important",
backgroundPositionX: "25% !important",
transition: "all 150ms ease-in",
"&:disabled": {
pointerEvent: "none",
opacity: 0.65,
},
"& .material-icons": {
fontSize: pxToRem(15),
marginTop: pxToRem(-2),
},
};
export default root;

104
src/qqq/assets/theme-dark/components/button/text.ts Normal file
View File

@ -0,0 +1,104 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { text, info, secondary, transparent } = colors;
const { size } = typography;
const buttonText = {
base: {
backgroundColor: transparent.main,
minHeight: pxToRem(37),
color: text.main,
boxShadow: "none",
padding: `${pxToRem(9)} ${pxToRem(24)}`,
"&:hover": {
backgroundColor: transparent.main,
boxShadow: "none",
},
"&:focus": {
boxShadow: "none",
},
"&:active, &:active:focus, &:active:hover": {
opacity: 0.85,
boxShadow: "none",
},
"&:disabled": {
boxShadow: "none",
},
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(16)} !important`,
},
},
small: {
minHeight: pxToRem(29),
padding: `${pxToRem(6)} ${pxToRem(18)}`,
fontSize: size.xs,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(12)} !important`,
},
},
large: {
minHeight: pxToRem(44),
padding: `${pxToRem(12)} ${pxToRem(64)}`,
fontSize: size.sm,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(22)} !important`,
},
},
primary: {
color: info.main,
"&:hover": {
color: info.main,
},
"&:focus:not(:hover)": {
color: info.focus,
boxShadow: "none",
},
},
secondary: {
color: secondary.main,
"&:hover": {
color: secondary.main,
},
"&:focus:not(:hover)": {
color: secondary.focus,
boxShadow: "none",
},
},
};
export default buttonText;

25
src/qqq/assets/theme-dark/components/buttonBase.ts Normal file
View File

@ -0,0 +1,25 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const buttonBase: Types = {
defaultProps: {
disableRipple: false,
},
};
export default buttonBase;

32
src/qqq/assets/theme-dark/components/card/cardContent.ts Normal file
View File

@ -0,0 +1,32 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
// types
type Types = any;
const cardContent: Types = {
styleOverrides: {
root: {
marginTop: 0,
marginBottom: 0,
padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`,
},
},
};
export default cardContent;

40
src/qqq/assets/theme-dark/components/card/cardMedia.ts Normal file
View File

@ -0,0 +1,40 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { borderRadius } = borders;
// types
type Types = any;
const cardMedia: Types = {
styleOverrides: {
root: {
borderRadius: borderRadius.xl,
margin: `${pxToRem(16)} ${pxToRem(16)} 0`,
},
media: {
width: "auto",
},
},
};
export default cardMedia;

50
src/qqq/assets/theme-dark/components/card/index.ts Normal file
View File

@ -0,0 +1,50 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
// Material Dashboard 2 PRO React Helper Function
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { black, background } = colors;
const { borderWidth, borderRadius } = borders;
const { md } = boxShadows;
// types
type Types = any;
const card: Types = {
styleOverrides: {
root: {
display: "flex",
flexDirection: "column",
position: "relative",
minWidth: 0,
wordWrap: "break-word",
backgroundImage: "none",
backgroundColor: background.card,
backgroundClip: "border-box",
border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
borderRadius: borderRadius.xl,
boxShadow: md,
overflow: "visible",
},
},
};
export default card;

77
src/qqq/assets/theme-dark/components/container.ts Normal file
View File

@ -0,0 +1,77 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import breakpoints from "qqq/assets/theme-dark/base/breakpoints";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
// types
type Types = any;
const {
values: { sm, md, lg, xl, xxl },
} = breakpoints;
const SM = `@media (min-width: ${sm}px)`;
const MD = `@media (min-width: ${md}px)`;
const LG = `@media (min-width: ${lg}px)`;
const XL = `@media (min-width: ${xl}px)`;
const XXL = `@media (min-width: ${xxl}px)`;
const sharedClasses = {
paddingRight: `${pxToRem(24)} !important`,
paddingLeft: `${pxToRem(24)} !important`,
marginRight: "auto !important",
marginLeft: "auto !important",
width: "100% !important",
position: "relative",
};
const container: Types = {
[SM]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "540px !important",
},
},
[MD]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "720px !important",
},
},
[LG]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "960px !important",
},
},
[XL]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "1140px !important",
},
},
[XXL]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "1320px !important",
},
},
};
export default container;

30
src/qqq/assets/theme-dark/components/dialog/dialogActions.ts Normal file
View File

@ -0,0 +1,30 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
// types
type Types = any;
const dialogActions: Types = {
styleOverrides: {
root: {
padding: pxToRem(16),
},
},
};
export default dialogActions;

47
src/qqq/assets/theme-dark/components/dialog/dialogContent.ts Normal file
View File

@ -0,0 +1,47 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme-dark/base/typography";
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { size } = typography;
const { white } = colors;
const { borderWidth, borderColor } = borders;
// types
type Types = any;
const dialogContent: Types = {
styleOverrides: {
root: {
padding: pxToRem(16),
fontSize: size.md,
color: rgba(white.main, 0.8),
},
dividers: {
borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`,
borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`,
},
},
};
export default dialogContent;

38
src/qqq/assets/theme-dark/components/dialog/dialogContentText.ts Normal file
View File

@ -0,0 +1,38 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme-dark/base/typography";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { size } = typography;
const { white } = colors;
// types
type Types = any;
const dialogContentText: Types = {
styleOverrides: {
root: {
fontSize: size.md,
color: rgba(white.main, 0.8),
},
},
};
export default dialogContentText;

36
src/qqq/assets/theme-dark/components/dialog/dialogTitle.ts Normal file
View File

@ -0,0 +1,36 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme-dark/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { size } = typography;
// types
type Types = any;
const dialogTitle: Types = {
styleOverrides: {
root: {
padding: pxToRem(16),
fontSize: size.xl,
},
},
};
export default dialogTitle;

39
src/qqq/assets/theme-dark/components/dialog/index.ts Normal file
View File

@ -0,0 +1,39 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
const { borderRadius } = borders;
const { xxl } = boxShadows;
// types
type Types = any;
const dialog: Types = {
styleOverrides: {
paper: {
borderRadius: borderRadius.lg,
boxShadow: xxl,
},
paperFullScreen: {
borderRadius: 0,
},
},
};
export default dialog;

71
src/qqq/assets/theme-dark/components/divider.ts Normal file
View File

@ -0,0 +1,71 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme-dark/functions/rgba";
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { dark, transparent, white } = colors;
// types
type Types = any;
const divider: Types = {
styleOverrides: {
root: {
backgroundColor: transparent.main,
backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${white.main}, ${rgba(
dark.main,
0
)}) !important`,
height: pxToRem(1),
margin: `${pxToRem(16)} 0`,
borderBottom: "none",
opacity: 0.25,
},
vertical: {
backgroundColor: transparent.main,
backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${white.main}, ${rgba(
dark.main,
0
)}) !important`,
width: pxToRem(1),
height: "100%",
margin: `0 ${pxToRem(16)}`,
borderRight: "none",
},
light: {
backgroundColor: transparent.main,
backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${rgba(
dark.main,
0.4
)}, ${rgba(white.main, 0)}) !important`,
"&.MuiDivider-vertical": {
backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${rgba(
dark.main,
0.4
)}, ${rgba(white.main, 0)}) !important`,
},
},
},
};
export default divider;

58
src/qqq/assets/theme-dark/components/flatpickr.ts Normal file
View File

@ -0,0 +1,58 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { info, white, gradients } = colors;
// types
type Types = any;
const flatpickr: Types = {
".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus":
{
background: rgba(info.main, 0.28),
border: "none",
},
".flatpickr-day.today": {
background: info.main,
color: white.main,
border: "none",
"&:hover, &:focus": {
background: `${info.focus} !important`,
},
},
".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus":
{
background: `${gradients.info.state} !important`,
color: white.main,
border: "none",
},
".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg":
{
color: `${info.main} !important`,
fill: `${info.main} !important`,
},
};
export default flatpickr;

112
src/qqq/assets/theme-dark/components/form/autocomplete.ts Normal file
View File

@ -0,0 +1,112 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
import typography from "qqq/assets/theme-dark/base/typography";
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { md } = boxShadows;
const { size } = typography;
const { text, transparent, light, dark, gradients, background, white } = colors;
const { borderRadius } = borders;
// types
type Types = any;
const autocompletle: Types = {
styleOverrides: {
popper: {
boxShadow: md,
padding: pxToRem(8),
fontSize: size.sm,
color: text.main,
textAlign: "left",
backgroundColor: `${background.card} !important`,
borderRadius: borderRadius.md,
},
paper: {
boxShadow: "none",
backgroundColor: transparent.main,
},
option: {
padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
borderRadius: borderRadius.md,
fontSize: size.sm,
color: text.main,
transition: "background-color 300ms ease, color 300ms ease",
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
backgroundColor: rgba(light.main, 0.2),
color: white.main,
},
'&[aria-selected="true"]': {
backgroundColor: `${rgba(light.main, 0.2)} !important`,
color: `${white.main} !important`,
},
},
noOptions: {
fontSize: size.sm,
color: text.main,
},
groupLabel: {
color: dark.main,
},
loading: {
fontSize: size.sm,
color: text.main,
},
tag: {
display: "flex",
alignItems: "center",
height: "auto",
padding: pxToRem(4),
backgroundColor: gradients.dark.state,
color: white.main,
"& .MuiChip-label": {
lineHeight: 1.2,
padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`,
},
"& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": {
color: white.main,
marginRight: 0,
},
},
popupIndicator: {
color: text.main,
},
clearIndicator: {
color: text.main,
},
},
};
export default autocompletle;

86
src/qqq/assets/theme-dark/components/form/checkbox.ts Normal file
View File

@ -0,0 +1,86 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import linearGradient from "qqq/assets/theme-dark/functions/linearGradient";
const { borderWidth, borderColor } = borders;
const { transparent, info } = colors;
// types
type Types = any;
const checkbox: Types = {
styleOverrides: {
root: {
"& .MuiSvgIcon-root": {
backgroundPosition: "center",
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
width: pxToRem(20),
height: pxToRem(20),
color: transparent.main,
border: `${borderWidth[1]} solid ${borderColor}`,
borderRadius: pxToRem(5.6),
},
"&:hover": {
backgroundColor: transparent.main,
},
"&.Mui-focusVisible": {
border: `${borderWidth[2]} solid ${info.main} !important`,
},
},
colorPrimary: {
color: borderColor,
"&.Mui-checked": {
color: info.main,
"& .MuiSvgIcon-root": {
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(
info.main,
info.main
)}`,
borderColor: info.main,
},
},
},
colorSecondary: {
color: borderColor,
"& .MuiSvgIcon-root": {
color: info.main,
"&.Mui-checked": {
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(
info.main,
info.main
)}`,
borderColor: info.main,
},
},
},
},
};
export default checkbox;

53
src/qqq/assets/theme-dark/components/form/formControlLabel.ts Normal file
View File

@ -0,0 +1,53 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { white } = colors;
const { size, fontWeightBold } = typography;
// types
type Types = any;
const formControlLabel: Types = {
styleOverrides: {
root: {
display: "block",
minHeight: pxToRem(24),
marginBottom: pxToRem(2),
},
label: {
display: "inline-block",
fontSize: size.sm,
fontWeight: fontWeightBold,
color: white.main,
lineHeight: 1,
transform: `translateY(${pxToRem(1)})`,
marginLeft: pxToRem(4),
"&.Mui-disabled": {
color: white.main,
},
},
},
};
export default formControlLabel;

32
src/qqq/assets/theme-dark/components/form/formLabel.ts Normal file
View File

@ -0,0 +1,32 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
const { text } = colors;
// types
type Types = any;
const formLabel: Types = {
styleOverrides: {
root: {
color: text.main,
},
},
};
export default formLabel;

60
src/qqq/assets/theme-dark/components/form/input.ts Normal file
View File

@ -0,0 +1,60 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { info, inputBorderColor, dark, grey, white } = colors;
const { size } = typography;
const { borderWidth } = borders;
// types
type Types = any;
const input: Types = {
styleOverrides: {
root: {
fontSize: size.sm,
color: dark.main,
"&:hover:not(.Mui-disabled):before": {
borderBottom: `${borderWidth[1]} solid ${rgba(inputBorderColor, 0.6)}`,
},
"&:before": {
borderColor: rgba(inputBorderColor, 0.6),
},
"&:after": {
borderColor: info.main,
},
input: {
color: white.main,
"&::-webkit-input-placeholder": {
color: grey[100],
},
},
},
},
};
export default input;

63
src/qqq/assets/theme-dark/components/form/inputLabel.ts Normal file
View File

@ -0,0 +1,63 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
const { text, info } = colors;
const { size } = typography;
// types
type Types = any;
const inputLabel: Types = {
styleOverrides: {
root: {
fontSize: size.sm,
color: text.main,
lineHeight: 0.9,
"&.Mui-focused": {
color: info.main,
},
"&.MuiInputLabel-shrink": {
lineHeight: 1.5,
fontSize: size.md,
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
fontSize: "0.85em",
},
},
},
sizeSmall: {
fontSize: size.xs,
lineHeight: 1.625,
"&.MuiInputLabel-shrink": {
lineHeight: 1.6,
fontSize: size.sm,
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
fontSize: "0.72em",
},
},
},
},
};
export default inputLabel;

76
src/qqq/assets/theme-dark/components/form/inputOutlined.ts Normal file
View File

@ -0,0 +1,76 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
import typography from "qqq/assets/theme-dark/base/typography";
// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { inputBorderColor, info, grey, transparent, white } = colors;
const { borderRadius } = borders;
const { size } = typography;
// types
type Types = any;
const inputOutlined: Types = {
styleOverrides: {
root: {
backgroundColor: transparent.main,
fontSize: size.sm,
borderRadius: borderRadius.md,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: rgba(inputBorderColor, 0.6),
},
"&.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: info.main,
},
},
},
notchedOutline: {
borderColor: rgba(inputBorderColor, 0.6),
},
input: {
color: white.main,
padding: pxToRem(12),
backgroundColor: transparent.main,
"&::-webkit-input-placeholder": {
color: grey[100],
},
},
inputSizeSmall: {
fontSize: size.xs,
padding: pxToRem(10),
},
multiline: {
color: grey[700],
padding: 0,
},
},
};
export default inputOutlined;

100
src/qqq/assets/theme-dark/components/form/radio.ts Normal file
View File

@ -0,0 +1,100 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import linearGradient from "qqq/assets/theme-dark/functions/linearGradient";
const { borderWidth, borderColor } = borders;
const { transparent, info } = colors;
// types
type Types = any;
const radio: Types = {
styleOverrides: {
root: {
"& .MuiSvgIcon-root": {
width: pxToRem(20),
height: pxToRem(20),
color: transparent.main,
border: `${borderWidth[1]} solid ${borderColor}`,
borderRadius: "50%",
},
"&:after": {
transition: "opacity 250ms ease-in-out",
content: `""`,
position: "absolute",
width: pxToRem(14),
height: pxToRem(14),
borderRadius: "50%",
backgroundImage: linearGradient(info.main, info.main),
opacity: 0,
left: 0,
right: 0,
top: 0,
bottom: 0,
margin: "auto",
},
"&:hover": {
backgroundColor: transparent.main,
},
"&.Mui-focusVisible": {
border: `${borderWidth[2]} solid ${info.main} !important`,
},
},
colorPrimary: {
color: borderColor,
"&.Mui-checked": {
color: info.main,
"& .MuiSvgIcon-root": {
borderColor: info.main,
},
"&:after": {
opacity: 1,
},
},
},
colorSecondary: {
color: borderColor,
"&.Mui-checked": {
color: info.main,
"& .MuiSvgIcon-root": {
borderColor: info.main,
},
"&:after": {
opacity: 1,
},
},
},
},
};
export default radio;

52
src/qqq/assets/theme-dark/components/form/select.ts Normal file
View File

@ -0,0 +1,52 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { transparent } = colors;
// types
type Types = any;
const select: Types = {
styleOverrides: {
select: {
display: "grid",
alignItems: "center",
padding: `0 ${pxToRem(12)} !important`,
"& .Mui-selected": {
backgroundColor: transparent.main,
},
},
selectMenu: {
background: "none",
height: "none",
minHeight: "none",
overflow: "unset",
},
icon: {
display: "none",
},
},
};
export default select;

91
src/qqq/assets/theme-dark/components/form/switchButton.ts Normal file
View File

@ -0,0 +1,91 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
// import rgba from "assets/theme-dark/functions/rgba";
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import linearGradient from "qqq/assets/theme-dark/functions/linearGradient";
const { white, gradients, grey, transparent } = colors;
const { borderWidth } = borders;
const { md } = boxShadows;
// types
type Types = any;
const switchButton: Types = {
defaultProps: {
disableRipple: false,
},
styleOverrides: {
switchBase: {
color: gradients.dark.main,
"&:hover": {
backgroundColor: transparent.main,
},
"&.Mui-checked": {
color: gradients.dark.main,
"&:hover": {
backgroundColor: transparent.main,
},
"& .MuiSwitch-thumb": {
borderColor: `${gradients.dark.main} !important`,
},
"& + .MuiSwitch-track": {
backgroundColor: `${gradients.dark.main} !important`,
borderColor: `${gradients.dark.main} !important`,
opacity: 1,
},
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: "0.3 !important",
},
"&.Mui-focusVisible .MuiSwitch-thumb": {
backgroundImage: linearGradient(gradients.info.main, gradients.info.state),
},
},
thumb: {
backgroundColor: white.main,
boxShadow: md,
border: `${borderWidth[1]} solid ${grey[400]}`,
},
track: {
width: pxToRem(32),
height: pxToRem(15),
backgroundColor: grey[400],
border: `${borderWidth[1]} solid ${grey[400]}`,
opacity: 1,
},
checked: {},
},
};
export default switchButton;

32
src/qqq/assets/theme-dark/components/form/textField.ts Normal file
View File

@ -0,0 +1,32 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
const { transparent } = colors;
// types
type Types = any;
const textField: Types = {
styleOverrides: {
root: {
backgroundColor: transparent.main,
},
},
};
export default textField;

43
src/qqq/assets/theme-dark/components/icon.ts Normal file
View File

@ -0,0 +1,43 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
// types
type Types = any;
const icon: Types = {
defaultProps: {
baseClassName: "material-icons-round",
fontSize: "inherit",
},
styleOverrides: {
fontSizeInherit: {
fontSize: "inherit !important",
},
fontSizeSmall: {
fontSize: `${pxToRem(20)} !important`,
},
fontSizeLarge: {
fontSize: `${pxToRem(36)} !important`,
},
},
};
export default icon;

34
src/qqq/assets/theme-dark/components/iconButton.ts Normal file
View File

@ -0,0 +1,34 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
const { transparent } = colors;
// types
type Types = any;
const iconButton: Types = {
styleOverrides: {
root: {
"&:hover": {
backgroundColor: transparent.main,
},
},
},
};
export default iconButton;

56
src/qqq/assets/theme-dark/components/linearProgress.ts Normal file
View File

@ -0,0 +1,56 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { borderRadius } = borders;
const { light } = colors;
// types
type Types = any;
const linearProgress: Types = {
styleOverrides: {
root: {
height: pxToRem(6),
borderRadius: borderRadius.md,
overflow: "visible",
position: "relative",
},
colorPrimary: {
backgroundColor: light.main,
},
colorSecondary: {
backgroundColor: light.main,
},
bar: {
height: pxToRem(6),
borderRadius: borderRadius.sm,
position: "absolute",
transform: `translate(0, 0) !important`,
transition: "width 0.6s ease !important",
},
},
};
export default linearProgress;

26
src/qqq/assets/theme-dark/components/link.ts Normal file
View File

@ -0,0 +1,26 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const link: Types = {
defaultProps: {
underline: "none",
color: "inherit",
},
};
export default link;

28
src/qqq/assets/theme-dark/components/list/index.ts Normal file
View File

@ -0,0 +1,28 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const list: Types = {
styleOverrides: {
padding: {
paddingTop: 0,
paddingBottom: 0,
},
},
};
export default list;

32
src/qqq/assets/theme-dark/components/list/listItem.ts Normal file
View File

@ -0,0 +1,32 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const listItem: Types = {
defaultProps: {
disableGutters: true,
},
styleOverrides: {
root: {
paddingTop: 0,
paddingBottom: 0,
},
},
};
export default listItem;

28
src/qqq/assets/theme-dark/components/list/listItemText.ts Normal file
View File

@ -0,0 +1,28 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const listItemText: Types = {
styleOverrides: {
root: {
marginTop: 0,
marginBottom: 0,
},
},
};
export default listItemText;

52
src/qqq/assets/theme-dark/components/menu/index.ts Normal file
View File

@ -0,0 +1,52 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
import typography from "qqq/assets/theme-dark/base/typography";
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { md } = boxShadows;
const { size } = typography;
const { text, background } = colors;
const { borderRadius } = borders;
// types
type Types = any;
const menu: Types = {
defaultProps: {
disableAutoFocusItem: true,
},
styleOverrides: {
paper: {
minWidth: pxToRem(160),
boxShadow: md,
padding: `${pxToRem(16)} ${pxToRem(8)}`,
fontSize: size.sm,
color: text.main,
textAlign: "left",
backgroundColor: `${background.card} !important`,
borderRadius: borderRadius.md,
},
},
};
export default menu;

51
src/qqq/assets/theme-dark/components/menu/menuItem.ts Normal file
View File

@ -0,0 +1,51 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
import typography from "qqq/assets/theme-dark/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { dark, white } = colors;
const { borderRadius } = borders;
const { size } = typography;
// types
type Types = any;
const menuItem: Types = {
styleOverrides: {
root: {
minWidth: pxToRem(160),
minHeight: "unset",
padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
borderRadius: borderRadius.md,
fontSize: size.sm,
color: rgba(white.main, 0.8),
transition: "background-color 300ms ease, color 300ms ease",
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
backgroundColor: dark.main,
color: white.main,
},
},
},
};
export default menuItem;

38
src/qqq/assets/theme-dark/components/popover.ts Normal file
View File

@ -0,0 +1,38 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
import borders from "qqq/assets/theme-dark/base/borders";
const { transparent } = colors;
const { lg } = boxShadows;
const { borderRadius } = borders;
// types
type Types = any;
const popover: Types = {
styleOverrides: {
paper: {
backgroundColor: transparent.main,
boxShadow: lg,
borderRadius: borderRadius.md,
},
},
};
export default popover;

52
src/qqq/assets/theme-dark/components/sidenav.ts Normal file
View File

@ -0,0 +1,52 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { background } = colors;
const { borderRadius } = borders;
// types
type Types = any;
const sidenav: Types = {
styleOverrides: {
root: {
width: pxToRem(250),
whiteSpace: "nowrap",
border: "none",
},
paper: {
width: pxToRem(250),
backgroundColor: background.sidenav,
height: `calc(100vh - ${pxToRem(32)})`,
margin: pxToRem(16),
borderRadius: borderRadius.xl,
border: "none",
},
paperAnchorDockedLeft: {
borderRight: "none",
},
},
};
export default sidenav;

84
src/qqq/assets/theme-dark/components/slider.ts Normal file
View File

@ -0,0 +1,84 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import boxShadow from "qqq/assets/theme/functions/boxShadow";
const { grey, white, black, info } = colors;
const { borderRadius, borderWidth } = borders;
const { sliderBoxShadow } = boxShadows;
// types
type Types = any;
const slider: Types = {
styleOverrides: {
root: {
width: "100%",
"& .MuiSlider-active, & .Mui-focusVisible": {
boxShadow: "none !important",
},
"& .MuiSlider-valueLabel": {
color: black.main,
},
},
rail: {
height: pxToRem(2),
background: grey[200],
borderRadius: borderRadius.sm,
opacity: 1,
},
track: {
background: info.main,
height: pxToRem(2),
position: "relative",
border: "none",
borderRadius: borderRadius.lg,
zIndex: 1,
},
thumb: {
width: pxToRem(14),
height: pxToRem(14),
backgroundColor: white.main,
zIndex: 10,
boxShadow: sliderBoxShadow.thumb,
border: `${borderWidth[1]} solid ${info.main}`,
transition: "all 200ms linear",
"&:hover": {
boxShadow: "none",
},
"&:active": {
transform: "translate(-50%, -50%) scale(1.4)",
},
"&.Mui-active": { boxShadow: boxShadow([0, 0], [0, 14], info.main, 0.16) },
},
},
};
export default slider;

47
src/qqq/assets/theme-dark/components/stepper/index.ts Normal file
View File

@ -0,0 +1,47 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import linearGradient from "qqq/assets/theme-dark/functions/linearGradient";
const { transparent, gradients } = colors;
const { borderRadius } = borders;
const { colored } = boxShadows;
// types
type Types = any;
const stepper: Types = {
styleOverrides: {
root: {
background: linearGradient(gradients.info.main, gradients.info.state),
padding: `${pxToRem(24)} 0 ${pxToRem(16)}`,
borderRadius: borderRadius.lg,
boxShadow: colored.info,
"&.MuiPaper-root": {
backgroundColor: transparent.main,
},
},
},
};
export default stepper;

30
src/qqq/assets/theme-dark/components/stepper/step.ts Normal file
View File

@ -0,0 +1,30 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
// types
type Types = any;
const step: Types = {
styleOverrides: {
root: {
padding: `0 ${pxToRem(6)}`,
},
},
};
export default step;

55
src/qqq/assets/theme-dark/components/stepper/stepConnector.ts Normal file
View File

@ -0,0 +1,55 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
const { white } = colors;
const { borderWidth } = borders;
// types
type Types = any;
const stepConnector: Types = {
styleOverrides: {
root: {
color: "#9fc9ff",
transition: "all 200ms linear",
"&.Mui-active": {
color: white.main,
},
"&.Mui-completed": {
color: white.main,
},
},
alternativeLabel: {
top: "14%",
left: "-50%",
right: "50%",
},
line: {
borderWidth: `${borderWidth[2]} !important`,
borderColor: "currentColor",
opacity: 0.5,
},
},
};
export default stepConnector;

60
src/qqq/assets/theme-dark/components/stepper/stepIcon.ts Normal file
View File

@ -0,0 +1,60 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import boxShadow from "qqq/assets/theme-dark/functions/boxShadow";
const { white } = colors;
// types
type Types = any;
const stepIcon: Types = {
styleOverrides: {
root: {
background: "#9fc9ff",
fill: "#9fc9ff",
stroke: "#9fc9ff",
strokeWidth: pxToRem(10),
width: pxToRem(13),
height: pxToRem(13),
borderRadius: "50%",
zIndex: 99,
transition: "all 200ms linear",
"&.Mui-active": {
background: white.main,
fill: white.main,
stroke: white.main,
borderColor: white.main,
boxShadow: boxShadow([0, 0], [0, 2], white.main, 1),
},
"&.Mui-completed": {
background: white.main,
fill: white.main,
stroke: white.main,
borderColor: white.main,
boxShadow: boxShadow([0, 0], [0, 2], white.main, 1),
},
},
},
};
export default stepIcon;

52
src/qqq/assets/theme-dark/components/stepper/stepLabel.ts Normal file
View File

@ -0,0 +1,52 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme-dark/base/typography";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
import rgba from "qqq/assets/theme-dark/functions/rgba";
const { size, fontWeightRegular } = typography;
const { white } = colors;
// types
type Types = any;
const stepLabel: Types = {
styleOverrides: {
label: {
marginTop: `${pxToRem(8)} !important`,
fontWeight: fontWeightRegular,
fontSize: size.xs,
color: "#9fc9ff",
textTransform: "uppercase",
"&.Mui-active": {
fontWeight: `${fontWeightRegular} !important`,
color: `${rgba(white.main, 0.8)} !important`,
},
"&.Mui-completed": {
fontWeight: `${fontWeightRegular} !important`,
color: `${rgba(white.main, 0.8)} !important`,
},
},
},
};
export default stepLabel;

42
src/qqq/assets/theme-dark/components/svgIcon.ts Normal file
View File

@ -0,0 +1,42 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
// types
type Types = any;
const svgIcon: Types = {
defaultProps: {
fontSize: "inherit",
},
styleOverrides: {
fontSizeInherit: {
fontSize: "inherit !important",
},
fontSizeSmall: {
fontSize: `${pxToRem(20)} !important`,
},
fontSizeLarge: {
fontSize: `${pxToRem(36)} !important`,
},
},
};
export default svgIcon;

38
src/qqq/assets/theme-dark/components/table/tableCell.ts Normal file
View File

@ -0,0 +1,38 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { borderWidth } = borders;
const { light } = colors;
// types
type Types = any;
const tableCell: Types = {
styleOverrides: {
root: {
padding: `${pxToRem(12)} ${pxToRem(16)}`,
borderBottom: `${borderWidth[1]} solid ${light.main}`,
},
},
};
export default tableCell;

38
src/qqq/assets/theme-dark/components/table/tableContainer.ts Normal file
View File

@ -0,0 +1,38 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
import borders from "qqq/assets/theme-dark/base/borders";
const { background } = colors;
const { md } = boxShadows;
const { borderRadius } = borders;
// types
type Types = any;
const tableContainer: Types = {
styleOverrides: {
root: {
backgroundColor: background.card,
boxShadow: md,
borderRadius: borderRadius.xl,
},
},
};
export default tableContainer;

37
src/qqq/assets/theme-dark/components/table/tableHead.ts Normal file
View File

@ -0,0 +1,37 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { borderRadius } = borders;
// types
type Types = any;
const tableHead: Types = {
styleOverrides: {
root: {
display: "block",
padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`,
borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`,
},
},
};
export default tableHead;

68
src/qqq/assets/theme-dark/components/tabs/index.ts Normal file
View File

@ -0,0 +1,68 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import borders from "qqq/assets/theme-dark/base/borders";
import boxShadows from "qqq/assets/theme-dark/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { background } = colors;
const { borderRadius } = borders;
const { md } = boxShadows;
// types
type Types = any;
const tabs: Types = {
styleOverrides: {
root: {
position: "relative",
backgroundColor: background.card,
borderRadius: borderRadius.xl,
minHeight: "unset",
padding: pxToRem(4),
},
flexContainer: {
height: "100%",
position: "relative",
zIndex: 10,
},
fixed: {
overflow: "unset !important",
overflowX: "unset !important",
},
vertical: {
"& .MuiTabs-indicator": {
width: "100%",
},
},
indicator: {
height: "100%",
borderRadius: borderRadius.lg,
backgroundColor: background.default,
boxShadow: md,
transition: "all 500ms ease",
},
},
};
export default tabs;

68
src/qqq/assets/theme-dark/components/tabs/tab.ts Normal file
View File

@ -0,0 +1,68 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme-dark/base/typography";
import borders from "qqq/assets/theme-dark/base/borders";
import colors from "qqq/assets/theme-dark/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { size, fontWeightRegular } = typography;
const { borderRadius } = borders;
const { white } = colors;
// types
type Types = any;
const tab: Types = {
styleOverrides: {
root: {
display: "flex",
alignItems: "center",
flexDirection: "row",
flex: "1 1 auto",
textAlign: "center",
maxWidth: "unset !important",
minWidth: "unset !important",
minHeight: "unset !important",
fontSize: size.md,
fontWeight: fontWeightRegular,
textTransform: "none",
lineHeight: "inherit",
padding: pxToRem(4),
borderRadius: borderRadius.lg,
color: `${white.main} !important`,
opacity: "1 !important",
"& .material-icons, .material-icons-round": {
marginBottom: "0 !important",
marginRight: pxToRem(6),
},
"& svg": {
marginBottom: "0 !important",
marginRight: pxToRem(6),
},
},
labelIcon: {
paddingTop: pxToRem(4),
},
},
};
export default tab;

59
src/qqq/assets/theme-dark/components/tooltip.ts Normal file
View File

@ -0,0 +1,59 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// @mui material components
import Fade from "@mui/material/Fade";
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme-dark/base/colors";
import typography from "qqq/assets/theme-dark/base/typography";
import borders from "qqq/assets/theme-dark/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme-dark/functions/pxToRem";
const { black, white } = colors;
const { size, fontWeightRegular } = typography;
const { borderRadius } = borders;
// types
type Types = any;
const tooltip: Types = {
defaultProps: {
arrow: true,
TransitionComponent: Fade,
},
styleOverrides: {
tooltip: {
maxWidth: pxToRem(200),
backgroundColor: black.main,
color: white.main,
fontSize: size.sm,
fontWeight: fontWeightRegular,
textAlign: "center",
borderRadius: borderRadius.md,
opacity: 0.7,
padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`,
},
arrow: {
color: black.main,
},
},
};
export default tooltip;

40
src/qqq/assets/theme-dark/functions/boxShadow.ts Normal file
View File

@ -0,0 +1,40 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
The boxShadow() function helps you to create a box shadow for an element
*/
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme/functions/rgba";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
function boxShadow(
offset: number[],
radius: number[],
color: string,
opacity: number,
inset: string = ""
): string {
const [x, y] = offset;
const [blur, spread] = radius;
return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba(
color,
opacity
)}`;
}
export default boxShadow;

35
src/qqq/assets/theme-dark/functions/gradientChartLine.ts Normal file
View File

@ -0,0 +1,35 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
The gradientChartLine() function helps you to create a gradient color for the chart line
*/
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme/functions/rgba";
function gradientChartLine(chart: any, color: string, opacity: number = 0.2): any {
const ctx = chart.getContext("2d");
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
const primaryColor = rgba(color, opacity).toString();
gradientStroke.addColorStop(1, primaryColor);
gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)");
gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)");
return gradientStroke;
}
export default gradientChartLine;

28
src/qqq/assets/theme-dark/functions/hexToRgb.ts Normal file
View File

@ -0,0 +1,28 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
The hexToRgb() function helps you to change the hex color code to rgb
using chroma-js library.
*/
// chroma-js is a library for all kinds of color conversions and color scales.
import chroma from "chroma-js";
function hexToRgb(color: string): string {
return chroma(color).rgb().join(", ");
}
export default hexToRgb;

24
src/qqq/assets/theme-dark/functions/linearGradient.ts Normal file
View File

@ -0,0 +1,24 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
The linearGradient() function helps you to create a linear gradient color background
*/
function linearGradient(color: string, colorState: string, angle: number = 195): string {
return `linear-gradient(${angle}deg, ${color}, ${colorState})`;
}
export default linearGradient;

24
src/qqq/assets/theme-dark/functions/pxToRem.ts Normal file
View File

@ -0,0 +1,24 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
The pxToRem() function helps you to convert a px unit into a rem unit,
*/
function pxToRem(number: number, baseNumber: number = 16): string {
return `${number / baseNumber}rem`;
}
export default pxToRem;

28
src/qqq/assets/theme-dark/functions/rgba.ts Normal file
View File

@ -0,0 +1,28 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function
to convert the hex code into rgb for using it inside the rgba color format.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import hexToRgb from "qqq/assets/theme/functions/hexToRgb";
function rgba(color: string, opacity: number): string {
return `rgba(${hexToRgb(color)}, ${opacity})`;
}
export default rgba;

75
src/qqq/assets/theme/base/borders.ts Normal file
View File

@ -0,0 +1,75 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new border width, border color or border radius using this file.
* You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { grey } = colors;
// types
interface Types {
borderColor: string;
borderWidth: {
0: number;
1: string;
2: string;
3: string;
4: string;
5: string;
};
borderRadius: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
section: string;
};
}
const borders: Types = {
borderColor: grey[300],
borderWidth: {
0: 0,
1: pxToRem(1),
2: pxToRem(2),
3: pxToRem(3),
4: pxToRem(4),
5: pxToRem(5),
},
borderRadius: {
xs: pxToRem(1.6),
sm: pxToRem(2),
md: pxToRem(6),
lg: pxToRem(8),
xl: pxToRem(12),
xxl: pxToRem(16),
section: pxToRem(160),
},
};
export default borders;

148
src/qqq/assets/theme/base/boxShadows.ts Normal file
View File

@ -0,0 +1,148 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new box-shadow using this file.
* You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import boxShadow from "qqq/assets/theme/functions/boxShadow";
const { black, white, tabs, coloredShadows } = colors;
// types
interface Types {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
inset: string;
colored:
| {
primary: string;
secondary: string;
info: string;
success: string;
warning: string;
error: string;
light: string;
dark: string;
}
| any;
navbarBoxShadow: string;
sliderBoxShadow: {
thumb: string;
};
tabsBoxShadow: {
indicator: string;
};
}
const boxShadows: Types = {
xs: boxShadow([0, 2], [9, -5], black.main, 0.15),
sm: boxShadow([0, 5], [10, 0], black.main, 0.12),
md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow(
[0, 2],
[4, -1],
black.main,
0.06
)}`,
lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow(
[0, 4],
[6, -2],
black.main,
0.05
)}`,
xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow(
[0, 10],
[10, -5],
black.main,
0.04
)}`,
xxl: boxShadow([0, 20], [27, 0], black.main, 0.05),
inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"),
colored: {
primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.primary,
0.4
)}`,
secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.secondary,
0.4
)}`,
info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.info,
0.4
)}`,
success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.success,
0.4
)}`,
warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.warning,
0.4
)}`,
error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.error,
0.4
)}`,
light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.light,
0.4
)}`,
dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
[0, 7],
[10, -5],
coloredShadows.dark,
0.4
)}`,
},
navbarBoxShadow: `${boxShadow([0, 0], [1, 1], white.main, 0.9, "inset")}, ${boxShadow(
[0, 20],
[27, 0],
black.main,
0.05
)}`,
sliderBoxShadow: {
thumb: boxShadow([0, 1], [13, 0], black.main, 0.2),
},
tabsBoxShadow: {
indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1),
},
};
export default boxShadows;

33
src/qqq/assets/theme/base/breakpoints.ts Normal file
View File

@ -0,0 +1,33 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new breakpoints using this file.
* You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
const breakpoints = {
values: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
},
};
export default breakpoints;

389
src/qqq/assets/theme/base/colors.ts Normal file
View File

@ -0,0 +1,389 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new color using this file.
* You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// types
interface ColorsTypes {
main: string;
focus: string;
}
interface GradientsTypes {
main: string;
state: string;
}
interface SocialMediaColorsTypes {
main: string;
dark: string;
}
interface BadgeColorsTypes {
background: string;
text: string;
}
interface Types {
background:
| {
default: string;
sidenav?: string;
card?: string;
}
| any;
white:
| {
main: string;
focus: string;
}
| any;
text:
| {
main: string;
focus: string;
primary?: string;
secondary?: string;
disabled?: string;
}
| any;
transparent:
| {
main: string;
}
| any;
black:
| {
light: string;
main: string;
focus: string;
}
| any;
primary: ColorsTypes | any;
secondary: ColorsTypes | any;
info: ColorsTypes | any;
success: ColorsTypes | any;
warning: ColorsTypes | any;
error: ColorsTypes | any;
light: ColorsTypes | any;
dark: ColorsTypes | any;
grey:
| {
[key: string | number]: string;
}
| any;
gradients:
| {
primary: GradientsTypes;
secondary: GradientsTypes;
info: GradientsTypes;
success: GradientsTypes;
warning: GradientsTypes;
error: GradientsTypes;
light: GradientsTypes;
dark: GradientsTypes;
}
| any;
socialMediaColors:
| {
facebook: SocialMediaColorsTypes;
twitter: SocialMediaColorsTypes;
instagram: SocialMediaColorsTypes;
linkedin: SocialMediaColorsTypes;
pinterest: SocialMediaColorsTypes;
youtube: SocialMediaColorsTypes;
vimeo: SocialMediaColorsTypes;
slack: SocialMediaColorsTypes;
dribbble: SocialMediaColorsTypes;
github: SocialMediaColorsTypes;
reddit: SocialMediaColorsTypes;
tumblr: SocialMediaColorsTypes;
}
| any;
badgeColors:
| {
primary: BadgeColorsTypes;
secondary: BadgeColorsTypes;
info: BadgeColorsTypes;
success: BadgeColorsTypes;
warning: BadgeColorsTypes;
error: BadgeColorsTypes;
light: BadgeColorsTypes;
dark: BadgeColorsTypes;
}
| any;
coloredShadows:
| {
[key: string]: string;
}
| any;
inputBorderColor: string;
tabs:
| {
indicator:
| {
boxShadow: string;
}
| any;
}
| any;
}
const colors: Types = {
background: {
default: "#f0f2f5",
},
text: {
main: "#7b809a",
focus: "#7b809a",
},
transparent: {
main: "transparent",
},
white: {
main: "#ffffff",
focus: "#ffffff",
},
black: {
light: "#000000",
main: "#000000",
focus: "#000000",
},
primary: {
main: "#e91e63",
focus: "#e91e63",
},
secondary: {
main: "#7b809a",
focus: "#8f93a9",
},
info: {
main: "#04aaef",
focus: "#1662C4",
},
success: {
main: "#4CAF50",
focus: "#67bb6a",
},
warning: {
main: "#fb8c00",
focus: "#fc9d26",
},
error: {
main: "#F44335",
focus: "#f65f53",
},
light: {
main: "#f0f2f5",
focus: "#f0f2f5",
},
dark: {
main: "#344767",
focus: "#2c3c58",
},
grey: {
100: "#f8f9fa",
200: "#f0f2f5",
300: "#dee2e6",
400: "#ced4da",
500: "#adb5bd",
600: "#6c757d",
700: "#495057",
800: "#343a40",
900: "#212529",
},
gradients: {
primary: {
main: "#EC407A",
state: "#D81B60",
},
secondary: {
main: "#747b8a",
state: "#495361",
},
info: {
main: "#49a3f1",
state: "#04aaef",
},
success: {
main: "#66BB6A",
state: "#43A047",
},
warning: {
main: "#FFA726",
state: "#FB8C00",
},
error: {
main: "#EF5350",
state: "#E53935",
},
light: {
main: "#EBEFF4",
state: "#CED4DA",
},
dark: {
main: "#42424a",
state: "#191919",
},
},
socialMediaColors: {
facebook: {
main: "#3b5998",
dark: "#344e86",
},
twitter: {
main: "#55acee",
dark: "#3ea1ec",
},
instagram: {
main: "#125688",
dark: "#0e456d",
},
linkedin: {
main: "#0077b5",
dark: "#00669c",
},
pinterest: {
main: "#cc2127",
dark: "#b21d22",
},
youtube: {
main: "#e52d27",
dark: "#d41f1a",
},
vimeo: {
main: "#1ab7ea",
dark: "#13a3d2",
},
slack: {
main: "#3aaf85",
dark: "#329874",
},
dribbble: {
main: "#ea4c89",
dark: "#e73177",
},
github: {
main: "#24292e",
dark: "#171a1d",
},
reddit: {
main: "#ff4500",
dark: "#e03d00",
},
tumblr: {
main: "#35465c",
dark: "#2a3749",
},
},
badgeColors: {
primary: {
background: "#f8b3ca",
text: "#cc084b",
},
secondary: {
background: "#d7d9e1",
text: "#6c757d",
},
info: {
background: "#aecef7",
text: "#095bc6",
},
success: {
background: "#bce2be",
text: "#339537",
},
warning: {
background: "#ffd59f",
text: "#c87000",
},
error: {
background: "#fcd3d0",
text: "#f61200",
},
light: {
background: "#ffffff",
text: "#c7d3de",
},
dark: {
background: "#8097bf",
text: "#1e2e4a",
},
},
coloredShadows: {
primary: "#e91e62",
secondary: "#110e0e",
info: "#00bbd4",
success: "#4caf4f",
warning: "#ff9900",
error: "#f44336",
light: "#adb5bd",
dark: "#404040",
},
inputBorderColor: "#d2d6da",
tabs: {
indicator: { boxShadow: "#ddd" },
},
};
export default colors;

41
src/qqq/assets/theme/base/globals.ts Normal file
View File

@ -0,0 +1,41 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
const { info, dark } = colors;
const globals = {
html: {
scrollBehavior: "smooth",
},
"*, *::before, *::after": {
margin: 0,
padding: 0,
},
"a, a:link, a:visited": {
textDecoration: "none !important",
},
"a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": {
color: `${dark.main} !important`,
transition: "color 150ms ease-in !important",
},
"a.link:hover, .link:hover, a.link:focus, .link:focus": {
color: `${info.main} !important`,
},
};
export default globals;

320
src/qqq/assets/theme/base/typography.ts Normal file
View File

@ -0,0 +1,320 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
* You can add new typography style using this file.
* You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { dark } = colors;
// types
interface DisplayTypes {
fontFamily: string;
color: string;
fontWeight: number;
lineHeight: number;
fontSize: string;
}
interface Types {
fontFamily: string;
fontWeightLighter: number;
fontWeightLight: number;
fontWeightRegular: number;
fontWeightMedium: number;
fontWeightBold: number;
h1: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h2: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h3: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h4: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h5: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
h6: {
fontFamily: string;
fontSize: string;
fontWeight: number;
color: string;
lineHeight: number;
};
subtitle1: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
subtitle2: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
body1: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
body2: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
button: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
textTransform: any;
};
caption: {
fontFamily: string;
fontSize: string;
fontWeight: number;
lineHeight: number;
};
overline: {
fontFamily: string;
};
d1: DisplayTypes;
d2: DisplayTypes;
d3: DisplayTypes;
d4: DisplayTypes;
d5: DisplayTypes;
d6: DisplayTypes;
size: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
};
lineHeight: {
sm: number;
md: number;
lg: number;
};
}
const baseProperties = {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontWeightLighter: 100,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 600,
fontWeightBold: 700,
fontSizeXXS: pxToRem(10.4),
fontSizeXS: pxToRem(12),
fontSizeSM: pxToRem(14),
fontSizeMD: pxToRem(16),
fontSizeLG: pxToRem(18),
fontSizeXL: pxToRem(20),
fontSize2XL: pxToRem(24),
fontSize3XL: pxToRem(30),
};
const baseHeadingProperties = {
fontFamily: baseProperties.fontFamily,
color: dark.main,
fontWeight: baseProperties.fontWeightBold,
};
const baseDisplayProperties = {
fontFamily: baseProperties.fontFamily,
color: dark.main,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.2,
};
const typography: Types = {
fontFamily: baseProperties.fontFamily,
fontWeightLighter: baseProperties.fontWeightLighter,
fontWeightLight: baseProperties.fontWeightLight,
fontWeightRegular: baseProperties.fontWeightRegular,
fontWeightMedium: baseProperties.fontWeightMedium,
fontWeightBold: baseProperties.fontWeightBold,
h1: {
fontSize: pxToRem(48),
lineHeight: 1.25,
...baseHeadingProperties,
},
h2: {
fontSize: pxToRem(36),
lineHeight: 1.3,
...baseHeadingProperties,
},
h3: {
fontSize: pxToRem(30),
lineHeight: 1.375,
...baseHeadingProperties,
},
h4: {
fontSize: pxToRem(24),
lineHeight: 1.375,
...baseHeadingProperties,
},
h5: {
fontSize: pxToRem(20),
lineHeight: 1.375,
...baseHeadingProperties,
},
h6: {
fontSize: pxToRem(16),
lineHeight: 1.625,
...baseHeadingProperties,
},
subtitle1: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeXL,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.625,
},
subtitle2: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeMD,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.6,
},
body1: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeXL,
fontWeight: baseProperties.fontWeightRegular,
lineHeight: 1.625,
},
body2: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeMD,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.6,
},
button: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeSM,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.5,
textTransform: "uppercase",
},
caption: {
fontFamily: baseProperties.fontFamily,
fontSize: baseProperties.fontSizeXS,
fontWeight: baseProperties.fontWeightLight,
lineHeight: 1.25,
},
overline: {
fontFamily: baseProperties.fontFamily,
},
d1: {
fontSize: pxToRem(80),
...baseDisplayProperties,
},
d2: {
fontSize: pxToRem(72),
...baseDisplayProperties,
},
d3: {
fontSize: pxToRem(64),
...baseDisplayProperties,
},
d4: {
fontSize: pxToRem(56),
...baseDisplayProperties,
},
d5: {
fontSize: pxToRem(48),
...baseDisplayProperties,
},
d6: {
fontSize: pxToRem(40),
...baseDisplayProperties,
},
size: {
xxs: baseProperties.fontSizeXXS,
xs: baseProperties.fontSizeXS,
sm: baseProperties.fontSizeSM,
md: baseProperties.fontSizeMD,
lg: baseProperties.fontSizeLG,
xl: baseProperties.fontSizeXL,
"2xl": baseProperties.fontSize2XL,
"3xl": baseProperties.fontSize3XL,
},
lineHeight: {
sm: 1.25,
md: 1.5,
lg: 2,
},
};
export default typography;

31
src/qqq/assets/theme/components/appBar.ts Normal file
View File

@ -0,0 +1,31 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const appBar: Types = {
defaultProps: {
color: "transparent",
},
styleOverrides: {
root: {
boxShadow: "none",
},
},
};
export default appBar;

40
src/qqq/assets/theme/components/avatar.ts Normal file
View File

@ -0,0 +1,40 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme/base/borders";
const { borderRadius } = borders;
// types
type Types = any;
const avatar: Types = {
styleOverrides: {
root: {
transition: "all 200ms ease-in-out",
},
rounded: {
borderRadius: borderRadius.lg,
},
img: {
height: "auto",
},
},
};
export default avatar;

39
src/qqq/assets/theme/components/breadcrumbs.ts Normal file
View File

@ -0,0 +1,39 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
const { grey } = colors;
const { size } = typography;
// types
type Types = any;
const breadcrumbs: Types = {
styleOverrides: {
li: {
lineHeight: 0,
},
separator: {
fontSize: size.sm,
color: grey[600],
},
},
};
export default breadcrumbs;

91
src/qqq/assets/theme/components/button/contained.ts Normal file
View File

@ -0,0 +1,91 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { white, text, info, secondary } = colors;
const { size } = typography;
const contained = {
base: {
backgroundColor: white.main,
minHeight: pxToRem(40),
color: text.main,
padding: `${pxToRem(10)} ${pxToRem(24)}`,
"&:hover": {
backgroundColor: white.main,
},
"&:active, &:active:focus, &:active:hover": {
opacity: 0.85,
},
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(16)} !important`,
},
},
small: {
minHeight: pxToRem(32),
padding: `${pxToRem(6)} ${pxToRem(16)}`,
fontSize: size.xs,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(12)} !important`,
},
},
large: {
minHeight: pxToRem(47),
padding: `${pxToRem(12)} ${pxToRem(28)}`,
fontSize: size.sm,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(22)} !important`,
},
},
primary: {
backgroundColor: info.main,
"&:hover": {
backgroundColor: info.main,
},
"&:focus:not(:hover)": {
backgroundColor: info.focus,
},
},
secondary: {
backgroundColor: secondary.main,
"&:hover": {
backgroundColor: secondary.main,
},
"&:focus:not(:hover)": {
backgroundColor: secondary.focus,
},
},
};
export default contained;

49
src/qqq/assets/theme/components/button/index.ts Normal file
View File

@ -0,0 +1,49 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React Button Styles
import root from "qqq/assets/theme/components/button/root";
import contained from "qqq/assets/theme/components/button/contained";
import outlined from "qqq/assets/theme/components/button/outlined";
import text from "qqq/assets/theme/components/button/text";
// types
type Types = any;
const button: Types = {
defaultProps: {
disableRipple: false,
},
styleOverrides: {
root: { ...root },
contained: { ...contained.base },
containedSizeSmall: { ...contained.small },
containedSizeLarge: { ...contained.large },
containedPrimary: { ...contained.primary },
containedSecondary: { ...contained.secondary },
outlined: { ...outlined.base },
outlinedSizeSmall: { ...outlined.small },
outlinedSizeLarge: { ...outlined.large },
outlinedPrimary: { ...outlined.primary },
outlinedSecondary: { ...outlined.secondary },
text: { ...text.base },
textSizeSmall: { ...text.small },
textSizeLarge: { ...text.large },
textPrimary: { ...text.primary },
textSecondary: { ...text.secondary },
},
};
export default button;

82
src/qqq/assets/theme/components/button/outlined.ts Normal file
View File

@ -0,0 +1,82 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { transparent, light, info, secondary } = colors;
const { size } = typography;
const outlined = {
base: {
minHeight: pxToRem(40),
color: light.main,
borderColor: light.main,
padding: `${pxToRem(10)} ${pxToRem(24)}`,
"&:hover": {
opacity: 0.75,
backgroundColor: transparent.main,
},
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(16)} !important`,
},
},
small: {
minHeight: pxToRem(32),
padding: `${pxToRem(6)} ${pxToRem(16)}`,
fontSize: size.xs,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(12)} !important`,
},
},
large: {
minHeight: pxToRem(47),
padding: `${pxToRem(12)} ${pxToRem(28)}`,
fontSize: size.sm,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(22)} !important`,
},
},
primary: {
backgroundColor: transparent.main,
borderColor: info.main,
"&:hover": {
backgroundColor: transparent.main,
},
},
secondary: {
backgroundColor: transparent.main,
borderColor: secondary.main,
"&:hover": {
backgroundColor: transparent.main,
},
},
};
export default outlined;

53
src/qqq/assets/theme/components/button/root.ts Normal file
View File

@ -0,0 +1,53 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme/base/typography";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { fontWeightBold, size } = typography;
const { borderRadius } = borders;
const root = {
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: size.xs,
fontWeight: fontWeightBold,
borderRadius: borderRadius.lg,
padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`,
lineHeight: 1.4,
textAlign: "center",
textTransform: "uppercase",
userSelect: "none",
backgroundSize: "150% !important",
backgroundPositionX: "25% !important",
transition: "all 150ms ease-in",
"&:disabled": {
pointerEvent: "none",
opacity: 0.65,
},
"& .material-icons": {
fontSize: pxToRem(15),
marginTop: pxToRem(-2),
},
};
export default root;

104
src/qqq/assets/theme/components/button/text.ts Normal file
View File

@ -0,0 +1,104 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { text, info, secondary, transparent } = colors;
const { size } = typography;
const buttonText = {
base: {
backgroundColor: transparent.main,
minHeight: pxToRem(40),
color: text.main,
boxShadow: "none",
padding: `${pxToRem(10)} ${pxToRem(24)}`,
"&:hover": {
backgroundColor: transparent.main,
boxShadow: "none",
},
"&:focus": {
boxShadow: "none",
},
"&:active, &:active:focus, &:active:hover": {
opacity: 0.85,
boxShadow: "none",
},
"&:disabled": {
boxShadow: "none",
},
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(16)} !important`,
},
},
small: {
minHeight: pxToRem(32),
padding: `${pxToRem(6)} ${pxToRem(16)}`,
fontSize: size.xs,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(12)} !important`,
},
},
large: {
minHeight: pxToRem(47),
padding: `${pxToRem(12)} ${pxToRem(28)}`,
fontSize: size.sm,
"& .material-icon, .material-icons-round, svg": {
fontSize: `${pxToRem(22)} !important`,
},
},
primary: {
color: info.main,
"&:hover": {
color: info.main,
},
"&:focus:not(:hover)": {
color: info.focus,
boxShadow: "none",
},
},
secondary: {
color: secondary.main,
"&:hover": {
color: secondary.main,
},
"&:focus:not(:hover)": {
color: secondary.focus,
boxShadow: "none",
},
},
};
export default buttonText;

25
src/qqq/assets/theme/components/buttonBase.ts Normal file
View File

@ -0,0 +1,25 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
type Types = any;
const buttonBase: Types = {
defaultProps: {
disableRipple: false,
},
};
export default buttonBase;

32
src/qqq/assets/theme/components/card/cardContent.ts Normal file
View File

@ -0,0 +1,32 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;
const cardContent: Types = {
styleOverrides: {
root: {
marginTop: 0,
marginBottom: 0,
padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`,
},
},
};
export default cardContent;

40
src/qqq/assets/theme/components/card/cardMedia.ts Normal file
View File

@ -0,0 +1,40 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { borderRadius } = borders;
// types
type Types = any;
const cardMedia: Types = {
styleOverrides: {
root: {
borderRadius: borderRadius.xl,
margin: `${pxToRem(16)} ${pxToRem(16)} 0`,
},
media: {
width: "auto",
},
},
};
export default cardMedia;

52
src/qqq/assets/theme/components/card/index.ts Normal file
View File

@ -0,0 +1,52 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
// Material Dashboard 2 PRO React Helper Function
import rgba from "qqq/assets/theme/functions/rgba";
const {black, white} = colors;
const {borderWidth, borderRadius} = borders;
const {md} = boxShadows;
// types
// types
type Types = any;
const card: Types = {
defaultProps: {
elevation: 3
},
styleOverrides: {
root: {
display: "flex",
flexDirection: "column",
position: "relative",
minWidth: 0,
wordWrap: "break-word",
backgroundColor: white.main,
backgroundClip: "border-box",
border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
borderRadius: borderRadius.xl,
overflow: "visible",
},
},
};
export default card;

77
src/qqq/assets/theme/components/container.ts Normal file
View File

@ -0,0 +1,77 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import breakpoints from "qqq/assets/theme/base/breakpoints";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;
const {
values: { sm, md, lg, xl, xxl },
} = breakpoints;
const SM = `@media (min-width: ${sm}px)`;
const MD = `@media (min-width: ${md}px)`;
const LG = `@media (min-width: ${lg}px)`;
const XL = `@media (min-width: ${xl}px)`;
const XXL = `@media (min-width: ${xxl}px)`;
const sharedClasses = {
paddingRight: `${pxToRem(24)} !important`,
paddingLeft: `${pxToRem(24)} !important`,
marginRight: "auto !important",
marginLeft: "auto !important",
width: "100% !important",
position: "relative",
};
const container: Types = {
[SM]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "540px !important",
},
},
[MD]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "720px !important",
},
},
[LG]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "960px !important",
},
},
[XL]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "1140px !important",
},
},
[XXL]: {
".MuiContainer-root": {
...sharedClasses,
maxWidth: "1320px !important",
},
},
};
export default container;

30
src/qqq/assets/theme/components/dialog/dialogActions.ts Normal file
View File

@ -0,0 +1,30 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;
const dialogActions: Types = {
styleOverrides: {
root: {
padding: pxToRem(16),
},
},
};
export default dialogActions;

46
src/qqq/assets/theme/components/dialog/dialogContent.ts Normal file
View File

@ -0,0 +1,46 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme/base/typography";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { size } = typography;
const { text } = colors;
const { borderWidth, borderColor } = borders;
// types
type Types = any;
const dialogContent: Types = {
styleOverrides: {
root: {
padding: pxToRem(16),
fontSize: size.md,
color: text.main,
},
dividers: {
borderTop: `${borderWidth[1]} solid ${borderColor}`,
borderBottom: `${borderWidth[1]} solid ${borderColor}`,
},
},
};
export default dialogContent;

35
src/qqq/assets/theme/components/dialog/dialogContentText.ts Normal file
View File

@ -0,0 +1,35 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
const { size } = typography;
const { text } = colors;
// types
type Types = any;
const dialogContentText: Types = {
styleOverrides: {
root: {
fontSize: size.md,
color: text.main,
},
},
};
export default dialogContentText;

36
src/qqq/assets/theme/components/dialog/dialogTitle.ts Normal file
View File

@ -0,0 +1,36 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { size } = typography;
// types
type Types = any;
const dialogTitle: Types = {
styleOverrides: {
root: {
padding: pxToRem(16),
fontSize: size.xl,
},
},
};
export default dialogTitle;

39
src/qqq/assets/theme/components/dialog/index.ts Normal file
View File

@ -0,0 +1,39 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
const { borderRadius } = borders;
const { xxl } = boxShadows;
// types
type Types = any;
const dialog: Types = {
styleOverrides: {
paper: {
borderRadius: borderRadius.lg,
boxShadow: xxl,
},
paperFullScreen: {
borderRadius: 0,
},
},
};
export default dialog;

71
src/qqq/assets/theme/components/divider.ts Normal file
View File

@ -0,0 +1,71 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme/functions/rgba";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { dark, transparent, white } = colors;
// types
type Types = any;
const divider: Types = {
styleOverrides: {
root: {
backgroundColor: transparent.main,
backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba(
dark.main,
0.4
)}, ${rgba(dark.main, 0)}) !important`,
height: pxToRem(1),
margin: `${pxToRem(16)} 0`,
borderBottom: "none",
opacity: 0.25,
},
vertical: {
backgroundColor: transparent.main,
backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba(
dark.main,
0.4
)}, ${rgba(dark.main, 0)}) !important`,
width: pxToRem(1),
height: "100%",
margin: `0 ${pxToRem(16)}`,
borderRight: "none",
},
light: {
backgroundColor: transparent.main,
backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${white.main}, ${rgba(
white.main,
0
)}) !important`,
"&.MuiDivider-vertical": {
backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${white.main}, ${rgba(
white.main,
0
)}) !important`,
},
},
},
};
export default divider;

58
src/qqq/assets/theme/components/flatpickr.ts Normal file
View File

@ -0,0 +1,58 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "qqq/assets/theme/functions/rgba";
const { info, white, gradients } = colors;
// types
type Types = any;
const flatpickr: Types = {
".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus":
{
background: rgba(info.main, 0.28),
border: "none",
},
".flatpickr-day.today": {
background: info.main,
color: white.main,
border: "none",
"&:hover, &:focus": {
background: `${info.focus} !important`,
},
},
".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus":
{
background: `${gradients.info.state} !important`,
color: white.main,
border: "none",
},
".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg":
{
color: `${info.main} !important`,
fill: `${info.main} !important`,
},
};
export default flatpickr;

103
src/qqq/assets/theme/components/form/autocomplete.ts Normal file
View File

@ -0,0 +1,103 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import boxShadows from "qqq/assets/theme/base/boxShadows";
import typography from "qqq/assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { lg } = boxShadows;
const { size } = typography;
const { text, white, transparent, light, dark, gradients } = colors;
const { borderRadius } = borders;
// types
type Types = any;
const autocomplete: Types = {
styleOverrides: {
popper: {
boxShadow: lg,
padding: pxToRem(8),
fontSize: size.sm,
color: text.main,
textAlign: "left",
backgroundColor: `${white.main} !important`,
borderRadius: borderRadius.md,
},
paper: {
boxShadow: "none",
backgroundColor: transparent.main,
},
option: {
padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
borderRadius: borderRadius.md,
fontSize: size.sm,
color: text.main,
transition: "background-color 300ms ease, color 300ms ease",
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
backgroundColor: light.main,
color: dark.main,
},
'&[aria-selected="true"]': {
backgroundColor: `${light.main} !important`,
color: `${dark.main} !important`,
},
},
noOptions: {
fontSize: size.sm,
color: text.main,
},
groupLabel: {
color: dark.main,
},
loading: {
fontSize: size.sm,
color: text.main,
},
tag: {
display: "flex",
alignItems: "center",
height: "auto",
padding: pxToRem(4),
backgroundColor: gradients.dark.state,
color: white.main,
"& .MuiChip-label": {
lineHeight: 1.2,
padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`,
},
"& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": {
color: white.main,
marginRight: 0,
},
},
},
};
export default autocomplete;

86
src/qqq/assets/theme/components/form/checkbox.ts Normal file
View File

@ -0,0 +1,86 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import linearGradient from "qqq/assets/theme/functions/linearGradient";
const { borderWidth, borderColor } = borders;
const { transparent, info } = colors;
// types
type Types = any;
const checkbox: Types = {
styleOverrides: {
root: {
"& .MuiSvgIcon-root": {
backgroundPosition: "center",
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
width: pxToRem(20),
height: pxToRem(20),
color: transparent.main,
border: `${borderWidth[1]} solid ${borderColor}`,
borderRadius: pxToRem(5.6),
},
"&:hover": {
backgroundColor: transparent.main,
},
"&.Mui-focusVisible": {
border: `${borderWidth[2]} solid ${info.main} !important`,
},
},
colorPrimary: {
color: borderColor,
"&.Mui-checked": {
color: info.main,
"& .MuiSvgIcon-root": {
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(
info.main,
info.main
)}`,
borderColor: info.main,
},
},
},
colorSecondary: {
color: borderColor,
"& .MuiSvgIcon-root": {
color: info.main,
"&.Mui-checked": {
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(
info.main,
info.main
)}`,
borderColor: info.main,
},
},
},
},
};
export default checkbox;

53
src/qqq/assets/theme/components/form/formControlLabel.ts Normal file
View File

@ -0,0 +1,53 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { dark } = colors;
const { size, fontWeightBold } = typography;
// types
type Types = any;
const formControlLabel: Types = {
styleOverrides: {
root: {
display: "block",
minHeight: pxToRem(24),
marginBottom: pxToRem(2),
},
label: {
display: "inline-block",
fontSize: size.sm,
fontWeight: fontWeightBold,
color: dark.main,
lineHeight: 1,
transform: `translateY(${pxToRem(1)})`,
marginLeft: pxToRem(4),
"&.Mui-disabled": {
color: dark.main,
},
},
},
};
export default formControlLabel;

32
src/qqq/assets/theme/components/form/formLabel.ts Normal file
View File

@ -0,0 +1,32 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
const { text } = colors;
// types
type Types = any;
const formLabel: Types = {
styleOverrides: {
root: {
color: text.main,
},
},
};
export default formLabel;

49
src/qqq/assets/theme/components/form/input.ts Normal file
View File

@ -0,0 +1,49 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
import borders from "qqq/assets/theme/base/borders";
const { info, inputBorderColor, dark } = colors;
const { size } = typography;
const { borderWidth } = borders;
// types
type Types = any;
const input: Types = {
styleOverrides: {
root: {
fontSize: size.sm,
color: dark.main,
"&:hover:not(.Mui-disabled):before": {
borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`,
},
"&:before": {
borderColor: inputBorderColor,
},
"&:after": {
borderColor: info.main,
},
},
},
};
export default input;

63
src/qqq/assets/theme/components/form/inputLabel.ts Normal file
View File

@ -0,0 +1,63 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
const { text, info } = colors;
const { size } = typography;
// types
type Types = any;
const inputLabel: Types = {
styleOverrides: {
root: {
fontSize: size.sm,
color: text.main,
lineHeight: 0.9,
"&.Mui-focused": {
color: info.main,
},
"&.MuiInputLabel-shrink": {
lineHeight: 1.5,
fontSize: size.md,
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
fontSize: "0.85em",
},
},
},
sizeSmall: {
fontSize: size.xs,
lineHeight: 1.625,
"&.MuiInputLabel-shrink": {
lineHeight: 1.6,
fontSize: size.sm,
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
fontSize: "0.72em",
},
},
},
},
};
export default inputLabel;

71
src/qqq/assets/theme/components/form/inputOutlined.ts Normal file
View File

@ -0,0 +1,71 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import typography from "qqq/assets/theme/base/typography";
// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { inputBorderColor, info, grey, transparent } = colors;
const { borderRadius } = borders;
const { size } = typography;
// types
type Types = any;
const inputOutlined: Types = {
styleOverrides: {
root: {
backgroundColor: transparent.main,
fontSize: size.sm,
borderRadius: borderRadius.md,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: inputBorderColor,
},
"&.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: info.main,
},
},
},
notchedOutline: {
borderColor: inputBorderColor,
},
input: {
color: grey[700],
padding: pxToRem(12),
backgroundColor: transparent.main,
},
inputSizeSmall: {
fontSize: size.xs,
padding: pxToRem(10),
},
multiline: {
color: grey[700],
padding: 0,
},
},
};
export default inputOutlined;

Some files were not shown because too many files have changed in this diff Show More