Skip to content

Commit

Permalink
fix the Material Components section
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-leal committed Apr 23, 2024
1 parent e73be16 commit ace6e3c
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 31 deletions.
2 changes: 1 addition & 1 deletion docs/src/components/action/Frame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
borderColor: 'primaryDark.700',
borderTop: 0,
colorScheme: 'dark',
'* pre, code': {
'* > pre, code': {
p: 0,
m: 0,
maxHeight: '100%',
Expand Down
51 changes: 22 additions & 29 deletions docs/src/components/productMaterial/MaterialComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -287,47 +287,26 @@ export default function MaterialComponents() {
<Frame.Info
data-mui-color-scheme="dark"
sx={{
minHeight: 220,
pt: 7,
minHeight: 180,
maxHeight: demo === 'Table' ? 260 : 'none',
position: 'relative',
overflow: 'hidden',
p: 0,
pt: 5,
overflow: 'clip',
}}
>
<StylingInfo appeared={customized} />
<Box
sx={{
overflow: 'auto',
pt: 2,
pb: 1,
px: 2,
height: '100%',
}}
>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={CODES[demo]}
language="jsx"
/>
</Box>
<Box
sx={(theme) => ({
pb: 3,
display: 'flex',
alignItems: 'center',
gap: 1,
position: 'absolute',
top: 16,
left: 12,
right: 0,
zIndex: 10,
background: `linear-gradient(to bottom, ${
(theme.vars || theme).palette.common.black
} 30%, transparent)`,
display: 'flex',
alignItems: 'center',
gap: 1,
background: `linear-gradient(to bottom, ${(theme.vars || theme).palette.common.black} 30%, transparent)`,
[`& .${buttonClasses.root}`]: {
borderRadius: 40,
borderRadius: 99,
padding: '2px 10px',
fontSize: '0.75rem',
lineHeight: 18 / 12,
Expand Down Expand Up @@ -358,6 +337,20 @@ export default function MaterialComponents() {
Custom theme
</Button>
</Box>
<StylingInfo appeared={customized} />
<Box
sx={{
overflow: 'auto',
height: '100%',
}}
>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={CODES[demo]}
language="jsx"
/>
</Box>
</Frame.Info>
</Frame>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productMaterial/MaterialStyling.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ export default function MaterialStyling() {
}}
>
<Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
<Box sx={{ position: 'relative', zIndex: 1 }}>
<Box sx={{ zIndex: 1 }}>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
Expand Down

0 comments on commit ace6e3c

Please sign in to comment.