mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
CE-740 Style on page header; dark.main color; sticky app header bar margin & width
This commit is contained in:
@ -216,7 +216,7 @@ const colors: Types = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
dark: {
|
dark: {
|
||||||
main: "#344767",
|
main: "#212121",
|
||||||
focus: "#2c3c58",
|
focus: "#2c3c58",
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
|
|||||||
import {ReactNode, useContext} from "react";
|
import {ReactNode, useContext} from "react";
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import QContext from "QContext";
|
import QContext from "QContext";
|
||||||
|
import colors from "qqq/assets/theme/base/colors";
|
||||||
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
||||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||||
|
|
||||||
@ -113,16 +114,16 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
|
|||||||
<Box mr={{xs: 0, xl: 8}}>
|
<Box mr={{xs: 0, xl: 8}}>
|
||||||
<MuiBreadcrumbs
|
<MuiBreadcrumbs
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: pxToRem(18),
|
fontSize: "1.125rem",
|
||||||
fontWeight: "500",
|
fontWeight: "500",
|
||||||
color: "#212121",
|
color: colors.dark.main,
|
||||||
"& a": {
|
"& a": {
|
||||||
color: "#757575"
|
color: "#757575"
|
||||||
},
|
},
|
||||||
"& .MuiBreadcrumbs-separator": {
|
"& .MuiBreadcrumbs-separator": {
|
||||||
fontSize: pxToRem(18),
|
fontSize: "1.125rem",
|
||||||
fontWeight: "500",
|
fontWeight: "500",
|
||||||
color: "#212121"
|
color: colors.dark.main
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -137,11 +138,14 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
|
|||||||
</MuiBreadcrumbs>
|
</MuiBreadcrumbs>
|
||||||
<MDTypography
|
<MDTypography
|
||||||
pt={1}
|
pt={1}
|
||||||
fontWeight="bold"
|
|
||||||
textTransform="capitalize"
|
textTransform="capitalize"
|
||||||
variant="h5"
|
variant="h3"
|
||||||
color={light ? "white" : "dark"}
|
color={light ? "white" : "dark"}
|
||||||
noWrap
|
noWrap
|
||||||
|
sx={{
|
||||||
|
fontSize: "1.75rem",
|
||||||
|
fontWeight: "600"
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{pageHeader}
|
{pageHeader}
|
||||||
</MDTypography>
|
</MDTypography>
|
||||||
|
@ -74,6 +74,9 @@ function navbar(theme: Theme | any, ownerState: any)
|
|||||||
paddingRight: absolute ? pxToRem(8) : 0,
|
paddingRight: absolute ? pxToRem(8) : 0,
|
||||||
paddingLeft: absolute ? pxToRem(16) : 0,
|
paddingLeft: absolute ? pxToRem(16) : 0,
|
||||||
|
|
||||||
|
marginLeft: "-.5rem",
|
||||||
|
width: "calc(100% + .5rem)",
|
||||||
|
|
||||||
"& > *": {
|
"& > *": {
|
||||||
transition: transitions.create("all", {
|
transition: transitions.create("all", {
|
||||||
easing: transitions.easing.easeInOut,
|
easing: transitions.easing.easeInOut,
|
||||||
|
Reference in New Issue
Block a user